Skip to content

feat(insights): add view trends button mobile domain view #78552

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

Merged
merged 1 commit into from
Oct 4, 2024
Merged

feat(insights): add view trends button mobile domain view #78552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions static/app/views/insights/common/viewTrendsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {Button} from 'sentry/components/button';
import {t} from 'sentry/locale';
import {useLocation} from 'sentry/utils/useLocation';
import {useNavigate} from 'sentry/utils/useNavigate';
import useOrganization from 'sentry/utils/useOrganization';
import {trendsTargetRoute} from 'sentry/views/performance/utils';

export function ViewTrendsButton() {
const location = useLocation();
const organization = useOrganization();
const navigate = useNavigate();

const handleTrendsClick = () => {
const target = trendsTargetRoute({organization, location});
navigate(target);
};
return (
<Button
size="sm"
priority="primary"
data-test-id="landing-header-trends"
onClick={() => handleTrendsClick()}
>
{t('View Trends')}
</Button>
);
}
59 changes: 22 additions & 37 deletions static/app/views/insights/mobile/screens/views/screenDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,21 @@ export function ScreenDetailsPage() {
});
}

const tabList = (
<TabList hideBorder>
{tabs.map(tab => {
const visible =
tab.feature === undefined || organization.features?.includes(tab.feature);
return (
<TabList.Item key={tab.key} hidden={!visible} textValue={tab.label}>
{tab.label}
{tab.alpha && <FeatureBadge type="alpha" variant={'badge'} />}
</TabList.Item>
);
})}
</TabList>
);

return (
<PageFiltersContainer>
<SentryDocumentTitle title={t('Mobile Screens')} orgSlug={organization.slug} />
Expand All @@ -116,47 +131,17 @@ export function ScreenDetailsPage() {
{isProjectCrossPlatform && <PlatformSelector />}
</ButtonBar>
</Layout.HeaderActions>

<TabList hideBorder>
{tabs.map(tab => {
const visible =
tab.feature === undefined ||
organization.features?.includes(tab.feature);
return (
<TabList.Item key={tab.key} hidden={!visible} textValue={tab.label}>
{tab.label}
{tab.alpha && <FeatureBadge type="alpha" variant={'badge'} />}
</TabList.Item>
);
})}
</TabList>
{tabList}
</Layout.Header>
)}

{isInDomainView && (
<Layout.Header>
<MobileHeader module={ModuleName.MOBILE_SCREENS} hideTabs />
<Layout.HeaderActions>
<ButtonBar gap={1}>
{isProjectCrossPlatform && <PlatformSelector />}
</ButtonBar>
</Layout.HeaderActions>

{/* TODO - There's two sets of tabs here, we'll have to do some UI work here */}
<TabList hideBorder>
{tabs.map(tab => {
const visible =
tab.feature === undefined ||
organization.features?.includes(tab.feature);
return (
<TabList.Item key={tab.key} hidden={!visible} textValue={tab.label}>
{tab.label}
{tab.alpha && <FeatureBadge type="alpha" variant={'badge'} />}
</TabList.Item>
);
})}
</TabList>
</Layout.Header>
<MobileHeader
module={ModuleName.MOBILE_SCREENS}
hideDefaultTabs
tabs={{tabList, value: selectedTabKey, onTabChange: handleTabChange}}
headerActions={isProjectCrossPlatform && <PlatformSelector />}
/>
)}
<Layout.Body>
<Layout.Main fullWidth>
Expand Down
6 changes: 1 addition & 5 deletions static/app/views/insights/mobile/screens/views/screensLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,11 +314,7 @@ export function ScreensLandingPage() {
</Layout.HeaderActions>
</Layout.Header>
)}
{isInDomainView && (
<Layout.Header>
<MobileHeader module={ModuleName.MOBILE_SCREENS} />
</Layout.Header>
)}
{isInDomainView && <MobileHeader module={ModuleName.MOBILE_SCREENS} />}

<Layout.Body>
<Layout.Main fullWidth>
Expand Down
5 changes: 2 additions & 3 deletions static/app/views/insights/pages/mobile/mobileOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import useProjects from 'sentry/utils/useProjects';
import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
import {ViewTrendsButton} from 'sentry/views/insights/common/viewTrendsButton';
import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
import {
Expand Down Expand Up @@ -169,9 +170,7 @@ function MobileOverviewPage() {
organization={organization}
renderDisabled={NoAccess}
>
<Layout.Header>
<MobileHeader />
</Layout.Header>
<MobileHeader headerActions={<ViewTrendsButton />} />
<Layout.Body>
<Layout.Main fullWidth>
<ModuleLayout.Layout>
Expand Down
54 changes: 33 additions & 21 deletions static/app/views/insights/pages/mobile/mobilePageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@ import {MODULE_TITLES} from 'sentry/views/insights/settings';
import {ModuleName} from 'sentry/views/insights/types';

type Props = {
hideTabs?: boolean;
headerActions?: React.ReactNode;
hideDefaultTabs?: boolean;
module?: ModuleName;
tabs?: {onTabChange: (key: string) => void; tabList: React.ReactNode; value: string};
};

// TODO - add props to append to breadcrumbs and change title
export function MobileHeader({module, hideTabs}: Props) {
export function MobileHeader({module, hideDefaultTabs, headerActions, tabs}: Props) {
const navigate = useNavigate();
const {slug} = useOrganization();
const moduleURLBuilder = useModuleURLBuilder();
Expand All @@ -57,7 +59,7 @@ export function MobileHeader({module, hideTabs}: Props) {
},
];

const handleTabChange = (key: ModuleName | typeof OVERVIEW_PAGE_TITLE) => {
const defaultHandleTabChange = (key: ModuleName | typeof OVERVIEW_PAGE_TITLE) => {
if (key === module || (key === OVERVIEW_PAGE_TITLE && !module)) {
return;
}
Expand All @@ -71,27 +73,37 @@ export function MobileHeader({module, hideTabs}: Props) {
navigate(`${moduleURLBuilder(key as RoutableModuleNames)}/`);
};

const tabValue =
hideDefaultTabs && tabs?.value ? tabs.value : module ?? OVERVIEW_PAGE_TITLE;

const handleTabChange =
hideDefaultTabs && tabs ? tabs.onTabChange : defaultHandleTabChange;

return (
<Fragment>
<Tabs value={module ?? OVERVIEW_PAGE_TITLE} onChange={handleTabChange}>
<Layout.HeaderContent>
<Breadcrumbs crumbs={crumbs} />
<Tabs value={tabValue} onChange={handleTabChange}>
<Layout.Header>
<Layout.HeaderContent>
<Breadcrumbs crumbs={crumbs} />

<Layout.Title>{MOBILE_LANDING_TITLE}</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>
<ButtonBar gap={1}>
<FeedbackWidgetButton />
</ButtonBar>
</Layout.HeaderActions>
{!hideTabs && (
<TabList hideBorder>
<TabList.Item key={OVERVIEW_PAGE_TITLE}>{OVERVIEW_PAGE_TITLE}</TabList.Item>
<TabList.Item key={ModuleName.MOBILE_SCREENS}>
{MODULE_TITLES[ModuleName.MOBILE_SCREENS]}
</TabList.Item>
</TabList>
)}
<Layout.Title>{MOBILE_LANDING_TITLE}</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>
<ButtonBar gap={1}>
{headerActions}
<FeedbackWidgetButton />
</ButtonBar>
</Layout.HeaderActions>
{!hideDefaultTabs && (
<TabList hideBorder>
<TabList.Item key={OVERVIEW_PAGE_TITLE}>{OVERVIEW_PAGE_TITLE}</TabList.Item>
<TabList.Item key={ModuleName.MOBILE_SCREENS}>
{MODULE_TITLES[ModuleName.MOBILE_SCREENS]}
</TabList.Item>
</TabList>
)}
{hideDefaultTabs && tabs && tabs.tabList}
</Layout.Header>
</Tabs>
</Fragment>
);
Expand Down