Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(notebooks): make panels focusable #18233

Merged
merged 9 commits into from
May 27, 2020
Merged

feat(notebooks): make panels focusable #18233

merged 9 commits into from
May 27, 2020

Conversation

alexpaxton
Copy link
Contributor

@alexpaxton alexpaxton commented May 26, 2020 •
edited
Loading

Closes https://github.com/influxdata/idpe/issues/7381

  • Hide panel buttons unless it is in focus or hover state
  • Add focus key to PipeMeta
    • In focus state a panel has a highlighted background color and persisted buttons
  • Clicking anywhere inside a panel sets focus to true
  • Clicking anywhere outside a panel sets focus to false
  • Event bubbling is blocked from move panel buttons (otherwise the focusing interaction gets funky)
  • Add title attribute to all the panel buttons for usability
  • Change default panel name to Cell_
  • CHANGELOG.md updated with a link to the PR (not the Issue)
  • Well-formatted commit messages
  • Rebased/mergeable
  • Tests pass
  • http/swagger.yml updated (if modified Go structs or API)
  • Documentation updated or issue created (provide link to issue/pr)
  • Signed CLA (if not already signed)

@alexpaxton alexpaxton requested a review from drdelambre May 27, 2020 16:38
drdelambre
drdelambre reviewed May 27, 2020
View reviewed changes
ui/src/notebooks/components/panel/NotebookPanel.tsx Outdated
})

const updatePanelFocus = (focus: boolean): void => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you wrap these in useCallback indexed on [index]? i dont think it'll have an immediate difference, it just saves some memory as we're stretching out functional components

drdelambre
drdelambre reviewed May 27, 2020
View reviewed changes
ui/src/notebooks/context/notebook.tsx
@@ -63,7 +64,7 @@ export const NotebookProvider: FC = ({children}) => {
_setPipes(add(pipe))
_setMeta(
add({
title: `Notebook_${++GENERATOR_INDEX}`,
title: `Cell_${++GENERATOR_INDEX}`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

saw sam's comments. 💯

drdelambre
drdelambre approved these changes May 27, 2020
View reviewed changes
Copy link
Contributor

@drdelambre drdelambre left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm having some flashbacks from that week of auditing re-rendering triggers, but that comment is just nit level if the page seems to be working fine

@alexpaxton alexpaxton merged commit 0eb1e06 into master May 27, 2020
@alexpaxton alexpaxton deleted the notebooks/focusable-panels branch May 27, 2020 18:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@drdelambre drdelambre drdelambre approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@alexpaxton @drdelambre