coder · Parkreiner · Jun 4, 2024 · May 24, 2024 · May 24, 2024 · May 24, 2024
diff --git a/plugins/backstage-plugin-coder/src/api/queryOptions.ts b/plugins/backstage-plugin-coder/src/api/queryOptions.ts
@@ -4,7 +4,10 @@ import type { CoderWorkspacesConfig } from '../hooks/useCoderWorkspacesConfig';
 import type { BackstageCoderSdk } from './CoderClient';
 import type { CoderAuth } from '../components/CoderProvider';
 
-export const CODER_QUERY_KEY_PREFIX = 'coder-backstage-plugin';
+// Making the type more broad to hide some implementation details from the end
+// user; the prefix should be treated as an opaque string we can change whenever
+// we want
+export const CODER_QUERY_KEY_PREFIX = 'coder-backstage-plugin' as string;
 
 // Defined here and not in CoderAuthProvider.ts to avoid circular dependency
 // issues

diff --git a/plugins/backstage-plugin-coder/src/api/vendoredSdk/api/api.ts b/plugins/backstage-plugin-coder/src/api/vendoredSdk/api/api.ts
@@ -312,7 +312,7 @@ type RestartWorkspaceParameters = Readonly<{
 
 export type DeleteWorkspaceOptions = Pick<
   TypesGen.CreateWorkspaceBuildRequest,
-  'log_level' & 'orphan'
+  'log_level' | 'orphan'
 >;
 
 type Claims = {

diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx
@@ -1,4 +1,5 @@
 import React, {
+  type FC,
   type PropsWithChildren,
   createContext,
   useCallback,
@@ -136,10 +137,16 @@ function useAuthState(): CoderAuth {
     return () => window.clearTimeout(distrustTimeoutId);
   }, [authState.status]);
 
+  const isAuthenticated = validAuthStatuses.includes(authState.status);
+
   // Sets up subscription to spy on potentially-expired tokens. Can't do this
   // outside React because we let the user connect their own queryClient
   const queryClient = useQueryClient();
   useEffect(() => {
+    if (!isAuthenticated) {
+      return undefined;
+    }
+
     // Pseudo-mutex; makes sure that if we get a bunch of errors, only one
     // revalidation will be processed at a time
     let isRevalidatingToken = false;
@@ -163,7 +170,7 @@ function useAuthState(): CoderAuth {
     const queryCache = queryClient.getQueryCache();
     const unsubscribe = queryCache.subscribe(revalidateTokenOnError);
     return unsubscribe;
-  }, [queryClient]);
+  }, [queryClient, isAuthenticated]);
 
   const registerNewToken = useCallback((newToken: string) => {
     if (newToken !== '') {
@@ -179,7 +186,7 @@ function useAuthState(): CoderAuth {
 
   return {
     ...authState,
-    isAuthenticated: validAuthStatuses.includes(authState.status),
+    isAuthenticated,
     registerNewToken,
     ejectToken,
   };
@@ -607,24 +614,75 @@ export const dummyTrackComponent: TrackComponent = () => {
   };
 };
 
+export type FallbackAuthInputBehavior = 'restrained' | 'assertive' | 'hidden';
+type AuthFallbackProvider = FC<
+  Readonly<
+    PropsWithChildren<{
+      isAuthenticated: boolean;
+    }>
+  >
+>;
+
+// Matches each behavior for the fallback auth UI to a specific provider. This
+// is screwy code, but by doing this, we ensure that if the user chooses not to
+// have a dynamic auth fallback UI, their app will have far less tracking logic,
+// meaning less performance overhead and fewer re-renders from something the
+// user isn't even using
+const fallbackProviders = {
+  hidden: ({ children }) => (
+    <AuthTrackingContext.Provider value={dummyTrackComponent}>
+      {children}
+    </AuthTrackingContext.Provider>
+  ),
+
+  assertive: ({ children, isAuthenticated }) => (
+    // Don't need the live version of the tracker function if we're always
+    // going to be showing the fallback auth input no matter what
+    <AuthTrackingContext.Provider value={dummyTrackComponent}>
+      {children}
+      {!isAuthenticated && <FallbackAuthUi />}
+    </AuthTrackingContext.Provider>
+  ),
+
+  // Have to give function a name to satisfy ES Lint (rules of hooks)
+  restrained: function Restrained({ children, isAuthenticated }) {
+    const { hasNoAuthInputs, trackComponent } = useAuthFallbackState();
+    const needFallbackUi = !isAuthenticated && hasNoAuthInputs;
+
+    return (
+      <>
+        <AuthTrackingContext.Provider value={trackComponent}>
+          {children}
+        </AuthTrackingContext.Provider>
+
+        {needFallbackUi && (
+          <AuthTrackingContext.Provider value={dummyTrackComponent}>
+            <FallbackAuthUi />
+          </AuthTrackingContext.Provider>
+        )}
+      </>
+    );
+  },
+} as const satisfies Record<FallbackAuthInputBehavior, AuthFallbackProvider>;
+
+export type CoderAuthProviderProps = Readonly<
+  PropsWithChildren<{
+    fallbackAuthUiMode?: FallbackAuthInputBehavior;
+  }>
+>;
+
 export function CoderAuthProvider({
   children,
-}: Readonly<PropsWithChildren<unknown>>) {
+  fallbackAuthUiMode = 'restrained',
+}: CoderAuthProviderProps) {
   const authState = useAuthState();
-  const { hasNoAuthInputs, trackComponent } = useAuthFallbackState();
-  const needFallbackUi = !authState.isAuthenticated && hasNoAuthInputs;
+  const AuthFallbackProvider = fallbackProviders[fallbackAuthUiMode];
 
   return (
     <AuthStateContext.Provider value={authState}>
-      <AuthTrackingContext.Provider value={trackComponent}>
+      <AuthFallbackProvider isAuthenticated={authState.isAuthenticated}>
         {children}
-      </AuthTrackingContext.Provider>
-
-      {needFallbackUi && (
-        <AuthTrackingContext.Provider value={dummyTrackComponent}>
-          <FallbackAuthUi />
-        </AuthTrackingContext.Provider>
-      )}
+      </AuthFallbackProvider>
     </AuthStateContext.Provider>
   );
 }
diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.test.tsx
@@ -86,6 +86,7 @@ describe(`${CoderProvider.name}`, () => {
             <CoderProvider
               appConfig={mockAppConfig}
               queryClient={getMockQueryClient()}
+              fallbackAuthUiMode="restrained"
             >
               {children}
             </CoderProvider>

diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.tsx
@@ -46,12 +46,15 @@ export const CoderProvider = ({
   children,
   appConfig,
   queryClient = defaultClient,
+  fallbackAuthUiMode = 'restrained',
 }: CoderProviderProps) => {
   return (
     <CoderErrorBoundary>
       <QueryClientProvider client={queryClient}>
         <CoderAppConfigProvider appConfig={appConfig}>
-          <CoderAuthProvider>{children}</CoderAuthProvider>
+          <CoderAuthProvider fallbackAuthUiMode={fallbackAuthUiMode}>
+            {children}
+          </CoderAuthProvider>
         </CoderAppConfigProvider>
       </QueryClientProvider>
     </CoderErrorBoundary>

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
@@ -16,7 +16,7 @@ import {
   type CoderWorkspacesConfig,
 } from '../../hooks/useCoderWorkspacesConfig';
 import type { Workspace } from '../../api/vendoredSdk';
-import { useCoderWorkspacesQuery } from '../../hooks/useCoderWorkspacesQuery';
+import { useCoderWorkspacesQuery } from './useCoderWorkspacesQuery';
 import { CoderAuthFormCardWrapper } from '../CoderAuthFormCardWrapper';
 
 export type WorkspacesQuery = UseQueryResult<readonly Workspace[]>;

diff --git a/...src/hooks/useCoderWorkspacesQuery.test.ts → ...pacesCard/useCoderWorkspacesQuery.test.ts b/...src/hooks/useCoderWorkspacesQuery.test.ts → ...pacesCard/useCoderWorkspacesQuery.test.ts
@@ -1,12 +1,11 @@
 import { waitFor } from '@testing-library/react';
 import { useCoderWorkspacesQuery } from './useCoderWorkspacesQuery';
-
-import { renderHookAsCoderEntity } from '../testHelpers/setup';
-import { mockCoderWorkspacesConfig } from '../testHelpers/mockBackstageData';
+import { renderHookAsCoderEntity } from '../../testHelpers/setup';
+import { mockCoderWorkspacesConfig } from '../../testHelpers/mockBackstageData';
 import {
   mockWorkspaceNoParameters,
   mockWorkspacesList,
-} from '../testHelpers/mockCoderPluginData';
+} from '../../testHelpers/mockCoderPluginData';
 
 beforeAll(() => {
   jest.useFakeTimers();

diff --git a/...oder/src/hooks/useCoderWorkspacesQuery.ts → ...WorkspacesCard/useCoderWorkspacesQuery.ts b/...oder/src/hooks/useCoderWorkspacesQuery.ts → ...WorkspacesCard/useCoderWorkspacesQuery.ts
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { workspaces, workspacesByRepo } from '../api/queryOptions';
-import type { CoderWorkspacesConfig } from './useCoderWorkspacesConfig';
-import { useCoderSdk } from './useCoderSdk';
-import { useInternalCoderAuth } from '../components/CoderProvider';
+import { workspaces, workspacesByRepo } from '../../api/queryOptions';
+import type { CoderWorkspacesConfig } from '../../hooks/useCoderWorkspacesConfig';
+import { useCoderSdk } from '../../hooks/useCoderSdk';
+import { useInternalCoderAuth } from '../../components/CoderProvider';
 
 type QueryInput = Readonly<{
   coderQuery: string;