-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
feat(custom-views): Add custom views to issue stream behind feature flag #75883
Conversation
Bundle ReportChanges will increase total bundle size by 658.22kB ⬆️
|
❌ 1 Tests Failed:
View the top 1 failed tests by shortest run timetrace view keyboard navigation roving updates the element in the drawer�trace view keyboard navigation roving updates the element in the drawer To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can safely ignore this stories file - the storybook is somewhat broken as a result of some of the refactoring I've done to the draggable tabs components.
@@ -5,7 +5,8 @@ import { | |||
type Tab, | |||
} from 'sentry/views/issueList/groupSearchViewTabs/draggableTabBar'; | |||
|
|||
describe('DraggableTabBar', () => { | |||
// biome-ignore lint/suspicious/noSkippedTests: <explanation> | |||
describe.skip('DraggableTabBar', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There have been a couple of changes to DraggableTabBar to get custom views to a point where it can be released internally. These changes have also wrecked these tests, so in the interest of getting this feature out to internal as fast as possible, I've skipped them for now and have added the task of getting them working again to the list of things to do while this PR is getting reviewed or after custom views is released internally.
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [queryCounts]); | ||
|
||
const onAddView = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The state management of these tabs is tangled between CustomViewsHeader and DraggableTabBar right now, though I'd ideally like to move the tab state management to DraggableTabBar in the future and just have CustomViewsHeader worry about the debouncing and which queries/sort to navigate to. This is easy enough to do for onDelete
, for example, but onAddView
and onDiscard
require some more information about the query being displayed, so I have left the handlers for this in CustomViewsHeader for now.
I'd like to generalize DraggableTabBar as much as possible in general, but in the interest of getting custom views out for internal testing as fast as possible, I'll leave this up to future me to do in future PRs, or while this PR is getting reviewed.
} | ||
|
||
const [draggableTabs, setDraggableTabs] = useState<Tab[]>(viewsToTabs); | ||
const [selectedTabKey, setSelectedTabKey] = useState<string>(initialTabKey); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you think we can get the selected tab key from the URL? We want to avoid having two sources of truth if possible
9c45c24
to
6ce1b0f
Compare
return draggableTabs[0].key; | ||
}; | ||
|
||
// TODO: infer selected tab key state from URL params |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can still do this in a followup, but I forgot to provide the number 1 reason for using the URL params to drive this is that you need to support using browser navigation (back/forward). Right now if you switch tabs and click the back button, you will end up with unsaved changes instead of switching to the previous tab.
}); | ||
} | ||
} | ||
// eslint-disable-next-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When you take a second crack at this, we want to remove as many of these as possible since it usually leads to bugs
d271120
to
22a449d
Compare
Suspect IssuesThis pull request was deployed and Sentry observed the following issues:
Did you find this useful? React with a 👍 or 👎 |
PR reverted: 3a79696 |
…ount for default tabs) (#76327) Same PR as #75883, except this includes a fix to a bug that caused the issue stream to crash. This bug was caused by the frontend trying to access the `id` of a tab object, but forgetting to account for the fact that default tabs do not have ids, leading to a `Cannot read properties of undefined` error.
This PR releases the custom views feature into the issue stream under a feature flag. Flagged users will also see the "Custom Search" button has been removed from the issue stream in favor of custom views. The bulk of this new component exists in
<CustomViewsIssueListHeader/>
, whose parent component is in overview.tsx.Several changes have also been made to the base draggable tab components to iron out any compatibility issues that did not appear during sandbox development.
Things that are still broken that I am actively working on:
Tab Renaming is both ugly and broken (can't type in spaces)(fix(custom-views): editableTabTitle Improvements #76247)Stories is busted as a result of all of the changes made to base tabs components(deleted stories, this component is not, and was not meant to be reusable)