Merge pull request #2631 from headlamp-k8s/back-home-authchooser

frontend: AuthChooser: Add home navigation on auth fail
headlamp-k8s · Dec 4, 2024 · a0d4185 · a0d4185
2 parents 6f2b61d + 56d4947
commit a0d4185
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 23 deletions.
diff --git a/frontend/src/components/authchooser/AuthChooser.stories.tsx b/frontend/src/components/authchooser/AuthChooser.stories.tsx
@@ -32,7 +32,6 @@ const argFixture = {
   error: null,
   oauthUrl: 'http://example.com/',
   clusterAuthType: '',
-  haveClusters: false,
 };
 
 export const BasicAuthChooser = Template.bind({});
@@ -49,7 +48,6 @@ Testing.args = {
 export const HaveClusters = Template.bind({});
 HaveClusters.args = {
   ...argFixture,
-  haveClusters: true,
 };
 
 export const AuthTypeoidc = Template.bind({});

diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.AnError.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.AnError.stories.storyshot
@@ -127,6 +127,25 @@
               </button>
             </div>
           </main>
+          <div
+            class="MuiBox-root css-dvxtzn"
+          >
+            <div
+              class="MuiBox-root css-oo0cqs"
+              role="button"
+              style="cursor: pointer;"
+            >
+              <div
+                class="MuiBox-root css-37urdo"
+              />
+              <div
+                class="MuiBox-root css-1kuy7z7"
+                style="text-transform: uppercase;"
+              >
+                Back
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.AuthTypeoidc.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.AuthTypeoidc.stories.storyshot
@@ -136,6 +136,25 @@
               </div>
             </div>
           </main>
+          <div
+            class="MuiBox-root css-dvxtzn"
+          >
+            <div
+              class="MuiBox-root css-oo0cqs"
+              role="button"
+              style="cursor: pointer;"
+            >
+              <div
+                class="MuiBox-root css-37urdo"
+              />
+              <div
+                class="MuiBox-root css-1kuy7z7"
+                style="text-transform: uppercase;"
+              >
+                Back
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/...d/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot b/...d/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot
@@ -122,6 +122,25 @@
               </div>
             </div>
           </main>
+          <div
+            class="MuiBox-root css-dvxtzn"
+          >
+            <div
+              class="MuiBox-root css-oo0cqs"
+              role="button"
+              style="cursor: pointer;"
+            >
+              <div
+                class="MuiBox-root css-37urdo"
+              />
+              <div
+                class="MuiBox-root css-1kuy7z7"
+                style="text-transform: uppercase;"
+              >
+                Back
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.Testing.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.Testing.stories.storyshot
@@ -118,6 +118,25 @@
               </span>
             </div>
           </main>
+          <div
+            class="MuiBox-root css-dvxtzn"
+          >
+            <div
+              class="MuiBox-root css-oo0cqs"
+              role="button"
+              style="cursor: pointer;"
+            >
+              <div
+                class="MuiBox-root css-37urdo"
+              />
+              <div
+                class="MuiBox-root css-1kuy7z7"
+                style="text-transform: uppercase;"
+              >
+                Back
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/authchooser/index.tsx b/frontend/src/components/authchooser/index.tsx
@@ -186,7 +186,6 @@ function AuthChooser({ children }: AuthChooserProps) {
           ? t('Authentication: {{ clusterName }}', { clusterName })
           : t('Authentication')
       }
-      haveClusters={!!clusters && Object.keys(clusters).length > 1}
       error={error}
       oauthUrl={`${helpers.getAppUrl()}oidc?dt=${Date()}&cluster=${getCluster()}`}
       clusterAuthType={clusterAuthType}
@@ -199,7 +198,7 @@ function AuthChooser({ children }: AuthChooserProps) {
         });
       }}
       handleBackButtonPress={() => {
-        history.goBack();
+        numClusters > 1 ? history.goBack() : history.push('/');
       }}
       handleTokenAuth={() => {
         history.push({
@@ -221,7 +220,6 @@ export interface PureAuthChooserProps {
   error: Error | null;
   oauthUrl: string;
   clusterAuthType: string;
-  haveClusters: boolean;
   handleOidcAuth: () => void;
   handleTokenAuth: () => void;
   handleTryAgain: () => void;
@@ -237,7 +235,6 @@ export function PureAuthChooser({
   error,
   oauthUrl,
   clusterAuthType,
-  haveClusters,
   handleOidcAuth,
   handleTokenAuth,
   handleTryAgain,
@@ -310,25 +307,23 @@ export function PureAuthChooser({
           )}
         </Box>
       )}
-      {haveClusters && (
-        <Box display="flex" flexDirection="column" alignItems="center">
-          <Box
-            m={2}
-            display="flex"
-            alignItems="center"
-            style={{ cursor: 'pointer' }}
-            onClick={handleBackButtonPress}
-            role="button"
-          >
-            <Box pt={0.5}>
-              <InlineIcon icon="mdi:chevron-left" height={20} width={20} />
-            </Box>
-            <Box fontSize={14} style={{ textTransform: 'uppercase' }}>
-              {t('translation|Back')}
-            </Box>
+      <Box display="flex" flexDirection="column" alignItems="center">
+        <Box
+          m={2}
+          display="flex"
+          alignItems="center"
+          style={{ cursor: 'pointer' }}
+          onClick={handleBackButtonPress}
+          role="button"
+        >
+          <Box pt={0.5}>
+            <InlineIcon icon="mdi:chevron-left" height={20} width={20} />
+          </Box>
+          <Box fontSize={14} style={{ textTransform: 'uppercase' }}>
+            {t('translation|Back')}
           </Box>
         </Box>
-      )}
+      </Box>
       {children}
     </ClusterDialog>
   );