From 847133f53540a48fecee4d30a18811e12a88e50c Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Thu, 1 May 2025 16:08:32 -0400
Subject: [PATCH 1/3] feat(ui): Fix `/settings/` when no org in context

This should fix [todo] as the `/settings/` index page can link to invalid URLs when user is not apart of any orgs. Replace/remove all org links on this index page. Also fixes text clipping due to overflow + ellipsis.
---
 static/app/views/settings/settingsIndex.tsx | 86 ++++++++++++---------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/static/app/views/settings/settingsIndex.tsx b/static/app/views/settings/settingsIndex.tsx
index ec319e9206eba7..2094a23b80fcea 100644
--- a/static/app/views/settings/settingsIndex.tsx
+++ b/static/app/views/settings/settingsIndex.tsx
@@ -74,7 +74,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>
 
@@ -102,35 +102,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>
   );
@@ -142,7 +151,7 @@ function SettingsIndex(props: SettingsIndexProps) {
           <HomeIconContainer color="pink300">
             <IconDocs size="lg" />
           </HomeIconContainer>
-          {t('Documentation')}
+          <HomeLinkLabel>{t('Documentation')}</HomeLinkLabel>
         </ExternalHomeLinkIcon>
       </HomePanelHeader>
 
@@ -176,7 +185,7 @@ function SettingsIndex(props: SettingsIndexProps) {
           <HomeIconContainer color="activeText">
             <IconSupport size="lg" />
           </HomeIconContainer>
-          {t('Support')}
+          <HomeLinkLabel>{t('Support')}</HomeLinkLabel>
         </SupportLink>
       </HomePanelHeader>
 
@@ -210,26 +219,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')}
@@ -274,7 +287,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)`
@@ -361,8 +374,7 @@ function SupportLink({
   return <SelfHostedLink to={`${organizationSettingsUrl}support`} {...props} />;
 }
 
-const OrganizationName = styled('div')`
-  line-height: 1.1em;
-
+const HomeLinkLabel = styled('div')`
+  padding-bottom: ${space(4)};
   ${p => p.theme.overflowEllipsis};
 `;

From 42554355c13c84cac10f10f6eaeee52179dffb14 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Thu, 1 May 2025 17:16:06 -0400
Subject: [PATCH 2/3] hardcode support link

---
 static/app/views/settings/settingsIndex.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/static/app/views/settings/settingsIndex.tsx b/static/app/views/settings/settingsIndex.tsx
index 2094a23b80fcea..8e7d688f71c2b8 100644
--- a/static/app/views/settings/settingsIndex.tsx
+++ b/static/app/views/settings/settingsIndex.tsx
@@ -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
@@ -359,19 +358,14 @@ interface SupportLinkProps extends Omit<LinkProps, 'ref' | 'to'> {
   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} />;
 }
 
 const HomeLinkLabel = styled('div')`

From b67ab263fd201c4e7729f063c867ff4b07ddbb8d Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Thu, 1 May 2025 17:18:43 -0400
Subject: [PATCH 3/3] remove props

---
 static/app/views/settings/settingsIndex.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/app/views/settings/settingsIndex.tsx b/static/app/views/settings/settingsIndex.tsx
index 8e7d688f71c2b8..4ce8690699eefa 100644
--- a/static/app/views/settings/settingsIndex.tsx
+++ b/static/app/views/settings/settingsIndex.tsx
@@ -354,7 +354,6 @@ const ExternalHomeLinkIcon = styled(ExternalLink)`
 
 interface SupportLinkProps extends Omit<LinkProps, 'ref' | 'to'> {
   isSelfHosted: boolean;
-  organizationSettingsUrl: string;
   icon?: boolean;
 }