ref(issue-views): Restructure issue views components #82593
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
MichaelSun48
changed the title
MichaelSun48
commented
Dec 27, 2024
Comment on lines
67
to
124
| const handleNewViewsSaved: NewTabContext['onNewViewsSaved'] = useCallback< | ||
| NewTabContext['onNewViewsSaved'] | ||
| >( | ||
| () => (newViews: NewView[]) => { | ||
| if (newViews.length === 0) { | ||
| return; | ||
| } | ||
| setNewViewActive(false); | ||
| const {label, query, saveQueryToView} = newViews[0]; | ||
| const remainingNewViews: IssueView[] = newViews.slice(1)?.map(view => { | ||
| const newId = generateTempViewId(); | ||
| const viewToTab: IssueView = { | ||
| id: newId, | ||
| key: newId, | ||
| label: view.label, | ||
| query: view.query, | ||
| querySort: IssueSortOptions.DATE, | ||
| unsavedChanges: view.saveQueryToView | ||
| ? undefined | ||
| : [view.query, IssueSortOptions.DATE], | ||
| isCommitted: true, | ||
| }; | ||
| return viewToTab; | ||
| }); | ||
| let updatedTabs: IssueView[] = tabs.map(tab => { | ||
| if (tab.key === viewId) { | ||
| return { | ||
| ...tab, | ||
| label, | ||
| query: saveQueryToView ? query : '', | ||
| querySort: IssueSortOptions.DATE, | ||
| unsavedChanges: saveQueryToView ? undefined : [query, IssueSortOptions.DATE], | ||
| isCommitted: true, | ||
| }; | ||
| } | ||
| return tab; | ||
| }); | ||
|
|
||
| if (remainingNewViews.length > 0) { | ||
| updatedTabs = [...updatedTabs, ...remainingNewViews]; | ||
| } | ||
|
|
||
| dispatch({ | ||
| type: 'SET_VIEWS', | ||
| views: updatedTabs, | ||
| syncViews: true, | ||
| updateQueryParams: { | ||
| newQueryParams: {query, sort: IssueSortOptions.DATE}, | ||
| replace: true, | ||
| }, | ||
| }); | ||
| }, | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [location, setNewViewActive, tabs, viewId] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| setOnNewViewsSaved(handleNewViewsSaved); |
There was a problem hiding this comment.
Moved to IssueViews.tsx (context component)
This logic makes sure that the "save as view" and "save all" buttons on the new view page work properly.
MichaelSun48
commented
Dec 27, 2024
Comment on lines
-51
to
-67
| useHotkeys( | ||
| [ | ||
| { | ||
| match: ['command+s', 'ctrl+s'], | ||
| includeInputs: true, | ||
| callback: () => { | ||
| if (tabs.find(tab => tab.key === tabListState?.selectedKey)?.unsavedChanges) { | ||
| dispatch({type: 'SAVE_CHANGES', syncViews: true}); | ||
| addSuccessMessage(t('Changes saved to view')); | ||
| } | ||
| }, | ||
| }, | ||
| ], | ||
| [dispatch, tabListState?.selectedKey, tabs] | ||
| ); |
There was a problem hiding this comment.
Moved to customViewsHeader.tsx
This logic controls the ctrl/cmd+s to save behavior
MichaelSun48
commented
Dec 27, 2024
Comment on lines
-218
to
-279
| <TabContentWrap> | ||
| <EditableTabTitle | ||
| label={tab.label} | ||
| isEditing={editingTabKey === tab.key} | ||
| setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)} | ||
| onChange={newLabel => | ||
| dispatch({type: 'RENAME_TAB', newLabel: newLabel.trim(), syncViews: true}) | ||
| } | ||
| isSelected={ | ||
| (tabListState && tabListState?.selectedKey === tab.key) || | ||
| (!tabListState && tab.key === initialTabKey) | ||
| } | ||
| /> | ||
| {/* If tablistState isn't initialized, we want to load the elipsis menu | ||
| for the initial tab, that way it won't load in a second later | ||
| and cause the tabs to shift and animate on load. | ||
| */} | ||
| {((tabListState && tabListState?.selectedKey === tab.key) || | ||
| (!tabListState && tab.key === initialTabKey)) && ( | ||
| <motion.div | ||
| // This stops the ellipsis menu from animating in on load (when tabListState isn't initialized yet), | ||
| // but enables the animation later on when switching tabs | ||
| initial={tabListState ? {opacity: 0} : false} | ||
| animate={{opacity: 1}} | ||
| transition={{delay: 0.1, duration: 0.1}} | ||
| > | ||
| <DraggableTabMenuButton | ||
| hasUnsavedChanges={!!tab.unsavedChanges} | ||
| menuOptions={makeMenuOptions(tab)} | ||
| aria-label={t(`%s Ellipsis Menu`, tab.label)} | ||
| /> | ||
| </motion.div> | ||
| )} | ||
| </TabContentWrap> |
There was a problem hiding this comment.
Moved to its own component IssueViewTab.tsx
This contains the tab's content like the editable title and ellipsis menu
MichaelSun48
commented
Dec 27, 2024
|
|
||
| const TEMPORARY_TAB_KEY = 'temporary-tab'; | ||
|
|
||
| export const generateTempViewId = () => `_${Math.random().toString().substring(2, 7)}`; |
There was a problem hiding this comment.
Moved in from draggableTabBar.tsx - this is a general function used by a lot of components. It should live in the context component not some random component in the hierachy
scttcper
reviewed
Dec 27, 2024
Bundle ReportChanges will increase total bundle size by 68 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
malwilley
approved these changes
Dec 30, 2024
MichaelSun48
force-pushed
the
msun/issueViews/reorganizeComponents
branch
from
edc837e to
ed6c6d5
Compare
MichaelSun48
force-pushed
the
msun/issueViews/reorganizeComponents
branch
from
ed6c6d5 to
90e2196
Compare
MichaelSun48
force-pushed
the
msun/issueViews/reorganizeComponents
branch
from
90e2196 to
757cfc0
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR reorganizes some of the components and logic in IssueViews components. No visual or functional changes should are intended by these changes. If you see any in the preview, please lmk.
The biggest changes include:
draggableTabBar.tsxcomponent, redistribute it's parts to other components (detailed in the diff)IssueViewTabcomponent that contains the tab contents (title, ellipsis menu, etc.).draggableTabMenuButton.tsxtoissueViewEllipsisMenu.tsxdraggableTabstoviewsincustomViewsHeader.tsxSome reasoning:
DraggableTabBarsounds very redundant to and less clear thanCustomViewsHeaderandDraggableTabList. To me, CustomViewsHeader (soon to be renamed IssueViewsHeader) should be a specific implementation ofDraggableTabList, which sounds like it should be reusable.