Skip to content

feat(ui): Fix /settings/ when user is not part of any orgs #90771

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 4 commits into from
May 1, 2025
Merged

feat(ui): Fix /settings/ when user is not part of any orgs #90771

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
847133f
feat(ui): Fix `/settings/` when no org in context
billyvg May 1, 2025
4255435
hardcode support link
billyvg May 1, 2025
b67ab26
remove props
billyvg May 1, 2025
03cbdec
Merge branch 'master' into feat-ui-fix-org-links-in-settings
billyvg May 1, 2025
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
97 changes: 51 additions & 46 deletions static/app/views/settings/settingsIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ function SettingsIndex(props: SettingsIndexProps) {

const supportLinkProps = {
isSelfHosted,
organizationSettingsUrl,
};

// For the new navigation, we are removing this page. The default base route should
Expand All @@ -74,7 +73,7 @@ function SettingsIndex(props: SettingsIndexProps) {
<HomePanelHeader>
<HomeLinkIcon to="/settings/account/">
<UserAvatar user={user} size={HOME_ICON_SIZE} />
{t('My Account')}
<HomeLinkLabel>{t('My Account')}</HomeLinkLabel>
</HomeLinkIcon>
</HomePanelHeader>

Expand Down Expand Up @@ -102,35 +101,44 @@ function SettingsIndex(props: SettingsIndexProps) {
const orgSettings = (
<GridPanel>
<HomePanelHeader>
<HomeLinkIcon to={organizationSettingsUrl}>
{organization ? (
{organization ? (
<HomeLinkIcon to={organizationSettingsUrl}>
<OrganizationAvatar organization={organization} size={HOME_ICON_SIZE} />
) : (
<HomeLinkLabel>{organization.slug}</HomeLinkLabel>
</HomeLinkIcon>
) : (
<HomeLinkIcon to="/organizations/new/">
<HomeIconContainer color="green300">
<IconStack size="lg" />
</HomeIconContainer>
)}
<OrganizationName>
{organization ? organization.slug : t('No Organization')}
</OrganizationName>
</HomeLinkIcon>
<HomeLinkLabel>{t('Create an Organization')}</HomeLinkLabel>
</HomeLinkIcon>
)}
</HomePanelHeader>

<HomePanelBody>
<h3>{t('Quick links')}:</h3>
<ul>
<li>
<HomeLink to={`${organizationSettingsUrl}projects/`}>
{t('Projects')}
</HomeLink>
</li>
{organization ? (
<ul>
<li>
<HomeLink to={`${organizationSettingsUrl}projects/`}>
{t('Projects')}
</HomeLink>
</li>
<li>
<HomeLink to={`${organizationSettingsUrl}teams/`}>{t('Teams')}</HomeLink>
</li>
<li>
<HomeLink to={`${organizationSettingsUrl}members/`}>
{t('Members')}
</HomeLink>
</li>
</ul>
) : (
<li>
<HomeLink to={`${organizationSettingsUrl}teams/`}>{t('Teams')}</HomeLink>
<HomeLink to="/organizations/new/">{t('Create an organization')}</HomeLink>
</li>
<li>
<HomeLink to={`${organizationSettingsUrl}members/`}>{t('Members')}</HomeLink>
</li>
</ul>
)}
</HomePanelBody>
</GridPanel>
);
Expand All @@ -142,7 +150,7 @@ function SettingsIndex(props: SettingsIndexProps) {
<HomeIconContainer color="pink300">
<IconDocs size="lg" />
</HomeIconContainer>
{t('Documentation')}
<HomeLinkLabel>{t('Documentation')}</HomeLinkLabel>
</ExternalHomeLinkIcon>
</HomePanelHeader>

Expand Down Expand Up @@ -176,7 +184,7 @@ function SettingsIndex(props: SettingsIndexProps) {
<HomeIconContainer color="activeText">
<IconSupport size="lg" />
</HomeIconContainer>
{t('Support')}
<HomeLinkLabel>{t('Support')}</HomeLinkLabel>
</SupportLink>
</HomePanelHeader>

Expand Down Expand Up @@ -210,26 +218,30 @@ function SettingsIndex(props: SettingsIndexProps) {
<HomeIconContainer>
<IconLock size="lg" locked />
</HomeIconContainer>
{t('API Keys')}
<HomeLinkLabel>{t('API Keys')}</HomeLinkLabel>
</HomeLinkIcon>
</HomePanelHeader>

<HomePanelBody>
<h3>{t('Quick links')}:</h3>
<ul>
<li>
<HomeLink to={`${organizationSettingsUrl}auth-tokens/`}>
{t('Organization Auth Tokens')}
</HomeLink>
</li>
{organizationSettingsUrl && (
<li>
<HomeLink to={`${organizationSettingsUrl}auth-tokens/`}>
{t('Organization Auth Tokens')}
</HomeLink>
</li>
)}
<li>
<HomeLink to={LINKS.API}>{t('User Auth Tokens')}</HomeLink>
</li>
<li>
<HomeLink to={`${organizationSettingsUrl}developer-settings/`}>
{t('Custom Integrations')}
</HomeLink>
</li>
{organizationSettingsUrl && (
<li>
<HomeLink to={`${organizationSettingsUrl}developer-settings/`}>
{t('Custom Integrations')}
</HomeLink>
</li>
)}
<li>
<ExternalHomeLink href={LINKS.DOCUMENTATION_API}>
{t('Documentation')}
Expand Down Expand Up @@ -274,7 +286,7 @@ const HomePanelHeader = styled(PanelHeader)`
font-size: ${p => p.theme.fontSizeExtraLarge};
align-items: center;
text-transform: unset;
padding: ${space(4)};
padding: ${space(4)} ${space(4)} 0;
`;

const HomePanelBody = styled(PanelBody)`
Expand Down Expand Up @@ -342,27 +354,20 @@ const ExternalHomeLinkIcon = styled(ExternalLink)`

interface SupportLinkProps extends Omit<LinkProps, 'ref' | 'to'> {
isSelfHosted: boolean;
organizationSettingsUrl: string;
icon?: boolean;
}

function SupportLink({
isSelfHosted,
icon,
organizationSettingsUrl,
...props
}: SupportLinkProps) {
function SupportLink({isSelfHosted, icon, ...props}: SupportLinkProps) {
if (isSelfHosted) {
const SelfHostedLink = icon ? ExternalHomeLinkIcon : ExternalHomeLink;
return <SelfHostedLink href={LINKS.FORUM} {...props} />;
}

const SelfHostedLink = icon ? HomeLinkIcon : HomeLink;
return <SelfHostedLink to={`${organizationSettingsUrl}support`} {...props} />;
return <SelfHostedLink to="https://sentry.zendesk.com/hc/en-us" {...props} />;
Copy link
Member Author

@billyvg billyvg May 1, 2025

Choose a reason for hiding this comment

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

The prev support link, /settings/:orgSlug/support/ redirects to this.

}

const OrganizationName = styled('div')`
line-height: 1.1em;

const HomeLinkLabel = styled('div')`
padding-bottom: ${space(4)};
${p => p.theme.overflowEllipsis};
`;
Loading