frontend: ClusterBadge: remove default icon, clusters appearance defaults to no icon

alexmathieu22 · alexmathieu22 · commit 643d2fe35d37 · 2026-02-02T20:49:31.000-05:00
diff --git a/frontend/src/components/App/Home/__snapshots__/index.Base.stories.storyshot b/frontend/src/components/App/Home/__snapshots__/index.Base.stories.storyshot
@@ -618,11 +618,8 @@
                         href="/c/cluster0/"
                       >
                         <div
-                          class="MuiBox-root css-1or8la4"
+                          class="MuiBox-root css-172hjuw"
                         >
-                          <div
-                            class="MuiBox-root css-iyhyxy"
-                          />
                           <span
                             class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
                           >
@@ -729,11 +726,8 @@
                         href="/c/cluster1/"
                       >
                         <div
-                          class="MuiBox-root css-1or8la4"
+                          class="MuiBox-root css-172hjuw"
                         >
-                          <div
-                            class="MuiBox-root css-iyhyxy"
-                          />
                           <span
                             class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
                           >
@@ -840,11 +834,8 @@
                         href="/c/cluster2/"
                       >
                         <div
-                          class="MuiBox-root css-1or8la4"
+                          class="MuiBox-root css-172hjuw"
                         >
-                          <div
-                            class="MuiBox-root css-iyhyxy"
-                          />
                           <span
                             class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
                           >
diff --git a/frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot
@@ -125,11 +125,8 @@
             type="button"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
diff --git a/frontend/src/components/Sidebar/ClusterBadge.test.tsx b/frontend/src/components/Sidebar/ClusterBadge.test.tsx
@@ -50,14 +50,17 @@ describe('ClusterBadge', () => {
     expect(container).toBeInTheDocument();
   });
 
-  it('renders with default icon when no icon provided', () => {
-    const { container } = render(
+  it('renders no icon when no icon provided', () => {
+    render(
       <TestContext>
         <ClusterBadge name="test-cluster" />
       </TestContext>
     );
 
-    expect(container).toBeInTheDocument();
+    // Should not render the icon element
+    expect(screen.queryByTestId('cluster-badge-icon')).toBeNull();
+    // Still renders the cluster name
+    expect(screen.getByText('test-cluster')).toBeInTheDocument();
   });
 
   it('renders with all props', () => {
diff --git a/frontend/src/components/Sidebar/ClusterBadge.tsx b/frontend/src/components/Sidebar/ClusterBadge.tsx
@@ -35,8 +35,6 @@ export interface ClusterBadgeProps {
  */
 export default function ClusterBadge({ name, accentColor, icon }: ClusterBadgeProps) {
   const theme = useTheme();
-  const defaultIcon = 'mdi:hexagon-multiple-outline';
-
   const iconColor = theme.palette.primary.main;
   const backgroundColor = theme.palette.secondary.main;
 
@@ -46,25 +44,32 @@ export default function ClusterBadge({ name, accentColor, icon }: ClusterBadgePr
         display: 'flex',
         alignItems: 'center',
         gap: 0.75,
-        paddingY: 0.5,
       }}
     >
-      {/* Colored circle with icon */}
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: 28,
-          height: 28,
-          borderRadius: '50%',
-          backgroundColor,
-          border: `2px solid ${accentColor}`,
-          flexShrink: 0,
-        }}
-      >
-        <Icon icon={icon || defaultIcon} color={iconColor} width={20} height={20} />
-      </Box>
+      {/* Colored circle with icon, only if icon is provided */}
+      {icon && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 28,
+            height: 28,
+            borderRadius: '50%',
+            backgroundColor,
+            border: `2px solid ${accentColor}`,
+            flexShrink: 0,
+          }}
+        >
+          <Icon
+            icon={icon}
+            color={iconColor}
+            width={20}
+            height={20}
+            data-testid="cluster-badge-icon"
+          />
+        </Box>
+      )}
 
       {/* Cluster name */}
       <Typography
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooser.LongClusterName.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooser.LongClusterName.stories.storyshot
@@ -6,11 +6,8 @@
       type="button"
     >
       <div
-        class="MuiBox-root css-1or8la4"
+        class="MuiBox-root css-172hjuw"
       >
-        <div
-          class="MuiBox-root css-iyhyxy"
-        />
         <span
           class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
         >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooser.NoCluster.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooser.NoCluster.stories.storyshot
@@ -6,11 +6,8 @@
       type="button"
     >
       <div
-        class="MuiBox-root css-1or8la4"
+        class="MuiBox-root css-172hjuw"
       >
-        <div
-          class="MuiBox-root css-iyhyxy"
-        />
         <span
           class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
         >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooser.Normal.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooser.Normal.stories.storyshot
@@ -6,11 +6,8 @@
       type="button"
     >
       <div
-        class="MuiBox-root css-1or8la4"
+        class="MuiBox-root css-172hjuw"
       >
-        <div
-          class="MuiBox-root css-iyhyxy"
-        />
         <span
           class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
         >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooser.SpecialCharacters.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooser.SpecialCharacters.stories.storyshot
@@ -6,11 +6,8 @@
       type="button"
     >
       <div
-        class="MuiBox-root css-1or8la4"
+        class="MuiBox-root css-172hjuw"
       >
-        <div
-          class="MuiBox-root css-iyhyxy"
-        />
         <span
           class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
         >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.NoClustersButRecent.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.NoClustersButRecent.stories.storyshot
@@ -78,11 +78,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -109,11 +106,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -131,11 +125,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.NoRecentClusters.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.NoRecentClusters.stories.storyshot
@@ -78,11 +78,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -109,11 +106,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -131,11 +125,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -153,11 +144,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -175,11 +163,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.Normal.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.Normal.stories.storyshot
@@ -83,11 +83,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -114,11 +111,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -136,11 +130,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -161,11 +152,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
@@ -183,11 +171,8 @@
             tabindex="-1"
           >
             <div
-              class="MuiBox-root css-1or8la4"
+              class="MuiBox-root css-172hjuw"
             >
-              <div
-                class="MuiBox-root css-iyhyxy"
-              />
               <span
                 class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"
               >
diff --git a/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.Scrollbar.stories.storyshot b/frontend/src/components/cluster/__snapshots__/ClusterChooserPopup.Scrollbar.stories.storyshot
diff --git a/frontend/src/lib/k8s/api/v1/clusterApi.ts b/frontend/src/lib/k8s/api/v1/clusterApi.ts

Original file line number	Diff line number	Diff line change
`@@ -618,11 +618,8 @@`
`618`	`618`	`href="/c/cluster0/"`
`619`	`619`	`>`
`620`	`620`	`<div`
`621`		`- class="MuiBox-root css-1or8la4"`
	`621`	`+ class="MuiBox-root css-172hjuw"`
`622`	`622`	`>`
`623`		`- <div`
`624`		`- class="MuiBox-root css-iyhyxy"`
`625`		`- />`
`626`	`623`	`<span`
`627`	`624`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`628`	`625`	`>`
`@@ -729,11 +726,8 @@`
`729`	`726`	`href="/c/cluster1/"`
`730`	`727`	`>`
`731`	`728`	`<div`
`732`		`- class="MuiBox-root css-1or8la4"`
	`729`	`+ class="MuiBox-root css-172hjuw"`
`733`	`730`	`>`
`734`		`- <div`
`735`		`- class="MuiBox-root css-iyhyxy"`
`736`		`- />`
`737`	`731`	`<span`
`738`	`732`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`739`	`733`	`>`
`@@ -840,11 +834,8 @@`
`840`	`834`	`href="/c/cluster2/"`
`841`	`835`	`>`
`842`	`836`	`<div`
`843`		`- class="MuiBox-root css-1or8la4"`
	`837`	`+ class="MuiBox-root css-172hjuw"`
`844`	`838`	`>`
`845`		`- <div`
`846`		`- class="MuiBox-root css-iyhyxy"`
`847`		`- />`
`848`	`839`	`<span`
`849`	`840`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`850`	`841`	`>`
Original file line number	Diff line number	Diff line change
`@@ -125,11 +125,8 @@`
`125`	`125`	`type="button"`
`126`	`126`	`>`
`127`	`127`	`<div`
`128`		`- class="MuiBox-root css-1or8la4"`
	`128`	`+ class="MuiBox-root css-172hjuw"`
`129`	`129`	`>`
`130`		`- <div`
`131`		`- class="MuiBox-root css-iyhyxy"`
`132`		`- />`
`133`	`130`	`<span`
`134`	`131`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`135`	`132`	`>`
Original file line number	Diff line number	Diff line change
`@@ -6,11 +6,8 @@`
`6`	`6`	`type="button"`
`7`	`7`	`>`
`8`	`8`	`<div`
`9`		`- class="MuiBox-root css-1or8la4"`
	`9`	`+ class="MuiBox-root css-172hjuw"`
`10`	`10`	`>`
`11`		`- <div`
`12`		`- class="MuiBox-root css-iyhyxy"`
`13`		`- />`
`14`	`11`	`<span`
`15`	`12`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`16`	`13`	`>`
Original file line number	Diff line number	Diff line change
`@@ -78,11 +78,8 @@`
`78`	`78`	`tabindex="-1"`
`79`	`79`	`>`
`80`	`80`	`<div`
`81`		`- class="MuiBox-root css-1or8la4"`
	`81`	`+ class="MuiBox-root css-172hjuw"`
`82`	`82`	`>`
`83`		`- <div`
`84`		`- class="MuiBox-root css-iyhyxy"`
`85`		`- />`
`86`	`83`	`<span`
`87`	`84`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`88`	`85`	`>`
`@@ -109,11 +106,8 @@`
`109`	`106`	`tabindex="-1"`
`110`	`107`	`>`
`111`	`108`	`<div`
`112`		`- class="MuiBox-root css-1or8la4"`
	`109`	`+ class="MuiBox-root css-172hjuw"`
`113`	`110`	`>`
`114`		`- <div`
`115`		`- class="MuiBox-root css-iyhyxy"`
`116`		`- />`
`117`	`111`	`<span`
`118`	`112`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`119`	`113`	`>`
`@@ -131,11 +125,8 @@`
`131`	`125`	`tabindex="-1"`
`132`	`126`	`>`
`133`	`127`	`<div`
`134`		`- class="MuiBox-root css-1or8la4"`
	`128`	`+ class="MuiBox-root css-172hjuw"`
`135`	`129`	`>`
`136`		`- <div`
`137`		`- class="MuiBox-root css-iyhyxy"`
`138`		`- />`
`139`	`130`	`<span`
`140`	`131`	`class="MuiTypography-root MuiTypography-caption css-chqac-MuiTypography-root"`
`141`	`132`	`>`