feat: add auth fallback logic for when official Coder components are not mounted (#128)

* wip: commit progress on fallback UI

* chore: move dep to peer dependencies

* wip: commit more progress

* wip: more progress

* refactor: consolidate card logic

* fix: update component tracking hooks

* fix: add a11y landmark to auth fallback

* wip: commit more style progress

* wip: commit more progress

* wip: more progress

* wip: cleanup current approach

* wip: commit progress on observer approach

* wip: fix infinite loop for mutation logic

* fix: prevent padding patches from firing too often

* fix: improve scoping of style overrides

* chore: finish intial version of fallback stylling

* fix: tidy up types

* wip: create initial version of dialog form

* wip: commit progress on modal

* chore: finish styling for modal wrapper

* fix: update padding for FormDialog

* wip: start extracting out auth form

* fix: add missing barrel export file

* fix: make sure that auth form isn't dismissed early

* fix: update auth imports

* fix: update spacing for auth modal

* refactor: clean up auth provider for clarity

* docs: rewrite comment for clarity

* fix: improve granularity between official Coder components and user components

* fix: update all internal consumers of useCoderAuth

* wip: commit initial version of useCoderQuery helper hook

* refactor: rename hooks to avoid confusion

* fix: update exports for plugin

* docs: fill in incomplete sentence

* wip: commit initial version of useMutation wrapper

* refactor: extract retry factor into global constant

* fix: add explicit return type to useCoderMutation

* wip: start extracting auth logic into better reusable components

* fix: update card to have better styling for body

* wip: commit progress on style refactoring

* fix: update vertical padding for card wrapper

* chore: delete CoderAuthWrapper component

* fix: update styling for auth fallback

* chore: shrink size of PR

* fix: update imports

* docs: add comment about description setup

* fix: remove risk of runtime render errors in auth form

* fix: update imports

* fix: update font sizes to use relative units

* fix: update peer dependencies for react-dom

* refactor: clean up auth revalidation logic

* wip: start updating tests for new code changes

* fix: adding missing test case for auth card

* wip: commit progress on auth form test updates

* fix: removal vetigal properties

* fix: get all CoderAuthForm tests passing

* fix: update import for auth hook in test

Author: Parkreiner

plugins/backstage-plugin-coder/package.json

@@ -46,7 +46,8 @@
     "valibot": "^0.28.1"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.25.1",

plugins/backstage-plugin-coder/src/components/A11yInfoCard/A11yInfoCard.tsx

@@ -0,0 +1,63 @@
+/**
+ * @file A slightly different take on Backstage's official InfoCard component,
+ * with better support for accessibility.
+ *
+ * Does not support all of InfoCard's properties just yet.
+ */
+import React, { type HTMLAttributes, type ReactNode, forwardRef } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+export type A11yInfoCardProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    headerContent?: ReactNode;
+  }
+>;
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    color: theme.palette.type,
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[1],
+  },
+
+  headerContent: {
+    // Ideally wouldn't be using hard-coded font sizes, but couldn't figure out
+    // how to use the theme.typography property, especially since not all
+    // sub-properties have font sizes defined
+    fontSize: '1.5rem',
+    color: theme.palette.text.primary,
+    fontWeight: 700,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+
+    // Margins and padding are a bit wonky to support full-bleed layouts
+    marginLeft: `-${theme.spacing(2)}px`,
+    marginRight: `-${theme.spacing(2)}px`,
+    padding: `0 ${theme.spacing(2)}px ${theme.spacing(2)}px`,
+  },
+}));
+
+// Card should be treated as equivalent to Backstage's official InfoCard
+// component; had to make custom version so that it could forward properties for
+// accessibility/screen reader support
+export const A11yInfoCard = forwardRef<HTMLDivElement, A11yInfoCardProps>(
+  (props, ref) => {
+    const { className, children, headerContent, ...delegatedProps } = props;
+    const styles = useStyles();
+
+    return (
+      <div
+        ref={ref}
+        className={`${styles.root} ${className ?? ''}`}
+        {...delegatedProps}
+      >
+        {headerContent !== undefined && (
+          <div className={styles.headerContent}>{headerContent}</div>
+        )}
+
+        {children}
+      </div>
+    );
+  },
+);

plugins/backstage-plugin-coder/src/components/A11yInfoCard/index.ts

@@ -0,0 +1 @@
+export * from './A11yInfoCard';

plugins/backstage-plugin-coder/src/components/Card/Card.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { CoderLogo } from '../CoderLogo';
-import { LinkButton } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core';
-import { useCoderAuth } from '../CoderProvider';
+import { UnlinkAccountButton } from './UnlinkAccountButton';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -31,8 +30,6 @@ const useStyles = makeStyles(theme => ({
 
 export const CoderAuthDistrustedForm = () => {
   const styles = useStyles();
-  const { ejectToken } = useCoderAuth();
-
   return (
     <div className={styles.root}>
       <div>
@@ -43,18 +40,7 @@ export const CoderAuthDistrustedForm = () => {
         </p>
       </div>
 
-      <LinkButton
-        disableRipple
-        to=""
-        component="button"
-        type="submit"
-        color="primary"
-        variant="contained"
-        className={styles.button}
-        onClick={ejectToken}
-      >
-        Eject token
-      </LinkButton>
+      <UnlinkAccountButton className={styles.button} />
     </div>
   );
 };

plugins/backstage-plugin-coder/src/components/Card/index.ts

@@ -8,18 +8,14 @@ import {
   mockAuthStates,
   mockCoderAuthToken,
 } from '../../testHelpers/mockBackstageData';
-import { CoderAuthWrapper } from './CoderAuthWrapper';
+import { CoderAuthForm } from './CoderAuthForm';
 import { renderInTestApp } from '@backstage/test-utils';
 
 type RenderInputs = Readonly<{
   authStatus: CoderAuthStatus;
-  childButtonText?: string;
 }>;
 
-async function renderAuthWrapper({
-  authStatus,
-  childButtonText = 'Default button text',
-}: RenderInputs) {
+async function renderAuthWrapper({ authStatus }: RenderInputs) {
   const ejectToken = jest.fn();
   const registerNewToken = jest.fn();
 
@@ -40,67 +36,36 @@ async function renderAuthWrapper({
    */
   const renderOutput = await renderInTestApp(
     <CoderProviderWithMockAuth appConfig={mockAppConfig} auth={auth}>
-      <CoderAuthWrapper type="card">
-        <button>{childButtonText}</button>
-      </CoderAuthWrapper>
+      <CoderAuthForm />
     </CoderProviderWithMockAuth>,
   );
 
   return { ...renderOutput, ejectToken, registerNewToken };
 }
 
-describe(`${CoderAuthWrapper.name}`, () => {
-  describe('Displaying main content', () => {
-    it('Displays the main children when the user is authenticated', async () => {
-      const buttonText = 'I have secret Coder content!';
-      renderAuthWrapper({
-        authStatus: 'authenticated',
-        childButtonText: buttonText,
-      });
-
-      const button = await screen.findByRole('button', { name: buttonText });
-
-      // This assertion isn't necessary because findByRole will throw an error
-      // if the button can't be found within the expected period of time. Doing
-      // this purely to make the Backstage linter happy
-      expect(button).toBeInTheDocument();
-    });
-  });
-
+describe(`${CoderAuthForm.name}`, () => {
   describe('Loading UI', () => {
     it('Is displayed while the auth is initializing', async () => {
-      const buttonText = "You shouldn't be able to see me!";
-      renderAuthWrapper({
-        authStatus: 'initializing',
-        childButtonText: buttonText,
-      });
-
-      await screen.findByText(/Loading/);
-      const button = screen.queryByRole('button', { name: buttonText });
-      expect(button).not.toBeInTheDocument();
+      renderAuthWrapper({ authStatus: 'initializing' });
+      const loadingIndicator = await screen.findByText(/Loading/);
+      expect(loadingIndicator).toBeInTheDocument();
     });
   });
 
   describe('Token distrusted form', () => {
     it("Is displayed when the user's auth status cannot be verified", async () => {
-      const buttonText = 'Not sure if you should be able to see me';
       const distrustedTextMatcher = /Unable to verify token authenticity/;
       const distrustedStatuses: readonly CoderAuthStatus[] = [
         'distrusted',
         'noInternetConnection',
         'deploymentUnavailable',
       ];
 
-      for (const status of distrustedStatuses) {
-        const { unmount } = await renderAuthWrapper({
-          authStatus: status,
-          childButtonText: buttonText,
-        });
-
-        await screen.findByText(distrustedTextMatcher);
-        const button = screen.queryByRole('button', { name: buttonText });
-        expect(button).not.toBeInTheDocument();
+      for (const authStatus of distrustedStatuses) {
+        const { unmount } = await renderAuthWrapper({ authStatus });
+        const message = await screen.findByText(distrustedTextMatcher);
 
+        expect(message).toBeInTheDocument();
         unmount();
       }
     });
@@ -112,58 +77,28 @@ describe(`${CoderAuthWrapper.name}`, () => {
 
       const user = userEvent.setup();
       const ejectButton = await screen.findByRole('button', {
-        name: 'Eject token',
+        name: /Unlink Coder account/,
       });
 
       await user.click(ejectButton);
       expect(ejectToken).toHaveBeenCalled();
     });
-
-    it('Will appear if auth status changes during re-renders', async () => {
-      const buttonText = "Now you see me, now you don't";
-      const { rerender } = await renderAuthWrapper({
-        authStatus: 'authenticated',
-        childButtonText: buttonText,
-      });
-
-      // Capture button after it first appears on the screen
-      const button = await screen.findByRole('button', { name: buttonText });
-
-      rerender(
-        <CoderProviderWithMockAuth
-          appConfig={mockAppConfig}
-          authStatus="distrusted"
-        >
-          <CoderAuthWrapper type="card">
-            <button>{buttonText}</button>
-          </CoderAuthWrapper>
-        </CoderProviderWithMockAuth>,
-      );
-
-      // Assert that the button is now gone
-      expect(button).not.toBeInTheDocument();
-    });
   });
 
   describe('Token submission form', () => {
     it("Is displayed when the token either doesn't exist or is definitely not valid", async () => {
-      const buttonText = "You're not allowed to gaze upon my visage";
-      const tokenFormMatcher = /Please enter a new token/;
       const statusesForInvalidUser: readonly CoderAuthStatus[] = [
         'invalid',
         'tokenMissing',
       ];
 
-      for (const status of statusesForInvalidUser) {
-        const { unmount } = await renderAuthWrapper({
-          authStatus: status,
-          childButtonText: buttonText,
+      for (const authStatus of statusesForInvalidUser) {
+        const { unmount } = await renderAuthWrapper({ authStatus });
+        const form = screen.getByRole('form', {
+          name: /Authenticate with Coder/,
         });
 
-        await screen.findByText(tokenFormMatcher);
-        const button = screen.queryByRole('button', { name: buttonText });
-        expect(button).not.toBeInTheDocument();
-
+        expect(form).toBeInTheDocument();
         unmount();
       }
     });
@@ -178,7 +113,8 @@ describe(`${CoderAuthWrapper.name}`, () => {
        * 1. The auth input is of type password, which does not have a role
        *    compatible with Testing Library; can't use getByRole to select it
        * 2. MUI adds a star to its labels that are required, meaning that any
-       *    attempts at trying to match the string "Auth token" will fail
+       *    attempts at trying to match string literal "Auth token" will fail;
+       *    have to use a regex selector
        */
       const inputField = screen.getByLabelText(/Auth token/);
       const submitButton = screen.getByRole('button', { name: 'Authenticate' });