From 56d4947f1eeabc64e2fd3fb9ede94a01693fec50 Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Mon, 2 Dec 2024 18:54:53 -0500
Subject: [PATCH] frontend: AuthChooser: Add home navigation on auth fail

This change makes the back button on the auth fail pop-up persist to
allow the user to navigate back to home from an inaccessible
single-cluster context.

Fixes: #2591

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 .../authchooser/AuthChooser.stories.tsx       |  2 -
 .../AuthChooser.AnError.stories.storyshot     | 19 ++++++++++
 ...AuthChooser.AuthTypeoidc.stories.storyshot | 19 ++++++++++
 ...Chooser.BasicAuthChooser.stories.storyshot | 19 ++++++++++
 .../AuthChooser.Testing.stories.storyshot     | 19 ++++++++++
 frontend/src/components/authchooser/index.tsx | 37 ++++++++-----------
 6 files changed, 92 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/authchooser/AuthChooser.stories.tsx b/frontend/src/components/authchooser/AuthChooser.stories.tsx
index 2699269add..c5fbc9bbc9 100644
--- 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
index 428def9f99..6fc0ade153 100644
--- 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
index b825b7f9ef..f1cc99d16b 100644
--- 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/frontend/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot
index afb192f7fa..66410fd28b 100644
--- a/frontend/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot
+++ b/frontend/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
index c1d8d98679..0a9acce786 100644
--- 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
index abc733b212..6f5d78b3be 100644
--- 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>
   );