From 17fd4d33e0fdc6a9862d42b137b289a4fa01d171 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 13:44:01 +0000
Subject: [PATCH 01/42] wip: update type definitions and parsing logic for
 config values

---
 .../backstage-plugin-coder/dev/DevPage.tsx    |  4 +-
 .../CoderProvider/CoderAppConfigProvider.tsx  | 21 ++++----
 .../src/hooks/useCoderWorkspacesConfig.ts     | 51 +++++++++++--------
 .../src/testHelpers/mockBackstageData.ts      |  4 +-
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/plugins/backstage-plugin-coder/dev/DevPage.tsx b/plugins/backstage-plugin-coder/dev/DevPage.tsx
index 2d82cc6d..abc24008 100644
--- a/plugins/backstage-plugin-coder/dev/DevPage.tsx
+++ b/plugins/backstage-plugin-coder/dev/DevPage.tsx
@@ -24,8 +24,8 @@ const appConfig: CoderAppConfig = {
   },
 
   workspaces: {
-    templateName: 'devcontainers',
-    mode: 'manual',
+    defaultTemplateName: 'devcontainers',
+    defaultMode: 'manual',
     repoUrlParamKeys: ['custom_repo', 'repo_url'],
     params: {
       repo: 'custom',
diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx
index 5d383be6..e3422292 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx
@@ -3,23 +3,24 @@ import React, {
   createContext,
   useContext,
 } from 'react';
-
-import type { YamlConfig } from '../../hooks/useCoderWorkspacesConfig';
+import type { WorkspaceCreationMode } from '../../hooks/useCoderWorkspacesConfig';
 
 export type CoderAppConfig = Readonly<{
   deployment: Readonly<{
     accessUrl: string;
   }>;
 
-  workspaces: Readonly<
-    Exclude<YamlConfig, undefined> & {
-      // Only specified explicitly to make templateName required
-      templateName: string;
+  // Type is meant to be used with YamlConfig from useCoderWorkspacesConfig;
+  // not using a mapped type because there's just enough differences that
+  // maintaining a relationship that way would be a nightmare of ternaries
+  workspaces: Readonly<{
+    defaultMode?: WorkspaceCreationMode;
+    defaultTemplateName?: string;
+    params?: Record<string, string | undefined>;
 
-      // Defined like this to ensure array always has at least one element
-      repoUrlParamKeys: readonly [string, ...string[]];
-    }
-  >;
+    // Defined like this to ensure array always has at least one element
+    repoUrlParamKeys: readonly [string, ...string[]];
+  }>;
 }>;
 
 const AppConfigContext = createContext<CoderAppConfig | null>(null);
diff --git a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
index 999a60b7..a3b61870 100644
--- a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
+++ b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
@@ -23,19 +23,22 @@ import {
   useCoderAppConfig,
 } from '../components/CoderProvider';
 
+const workspaceCreationModeSchema = optional(
+  union(
+    [literal('manual'), literal('auto')],
+    "If defined, createMode must be 'manual' or 'auto'",
+  ),
+);
+
+export type WorkspaceCreationMode = Output<typeof workspaceCreationModeSchema>;
+
 // Very loose parsing requirements to make interfacing with various kinds of
 // YAML files as easy as possible
 const yamlConfigSchema = union([
   undefined_(),
   object({
     templateName: optional(string()),
-    mode: optional(
-      union(
-        [literal('manual'), literal('auto')],
-        "If defined, createMode must be 'manual' or 'auto'",
-      ),
-    ),
-
+    mode: workspaceCreationModeSchema,
     params: optional(
       record(
         string(),
@@ -49,6 +52,11 @@ const yamlConfigSchema = union([
   }),
 ]);
 
+/**
+ * The set of properties that the Coder plugin is configured to parse from a
+ * repo's catalog-info.yaml file. The entire value will be undefined if a repo
+ * does not have the file
+ */
 export type YamlConfig = Output<typeof yamlConfigSchema>;
 
 /**
@@ -56,11 +64,11 @@ export type YamlConfig = Output<typeof yamlConfigSchema>;
  * sourced from CoderAppConfig and any entity data.
  */
 export type CoderWorkspacesConfig =
-  // Was originally defined in terms of fancy mapped types; ended up being a bad
-  // idea, because it increased coupling in a bad way
+  // Was originally defined in terms of fancy mapped types based on YamlConfig;
+  // ended up being a bad idea, because it increased coupling in a bad way
   Readonly<{
-    creationUrl: string;
-    templateName: string;
+    creationUrl?: string;
+    templateName?: string;
     repoUrlParamKeys: readonly string[];
     mode: 'manual' | 'auto';
     params: Record<string, string | undefined>;
@@ -76,7 +84,9 @@ export function compileCoderConfig(
 ): CoderWorkspacesConfig {
   const { workspaces, deployment } = appConfig;
   const yamlConfig = parse(yamlConfigSchema, rawYamlConfig);
-  const mode = yamlConfig?.mode ?? workspaces.mode ?? 'manual';
+  const mode = yamlConfig?.mode ?? workspaces.defaultMode ?? 'manual';
+  const templateName =
+    yamlConfig?.templateName ?? workspaces.defaultTemplateName;
 
   const urlParams = new URLSearchParams({ mode });
   const compiledParams: Record<string, string | undefined> = {};
@@ -112,21 +122,22 @@ export function compileCoderConfig(
     }
   }
 
-  const safeTemplate = encodeURIComponent(
-    yamlConfig?.templateName ?? workspaces.templateName,
-  );
+  let creationUrl: string | undefined = undefined;
+  if (templateName) {
+    const safeTemplate = encodeURIComponent(templateName);
 
-  const creationUrl = `${
-    deployment.accessUrl
-  }/templates/${safeTemplate}/workspace?${urlParams.toString()}`;
+    creationUrl = `${
+      deployment.accessUrl
+    }/templates/${safeTemplate}/workspace?${urlParams.toString()}`;
+  }
 
   return {
+    mode,
     creationUrl,
+    templateName,
     repoUrl: cleanedRepoUrl,
     repoUrlParamKeys: workspaces.repoUrlParamKeys,
     params: compiledParams,
-    templateName: yamlConfig?.templateName ?? workspaces.templateName,
-    mode: yamlConfig?.mode ?? workspaces.mode ?? 'manual',
   };
 }
 
diff --git a/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts b/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
index 10b8723e..875d6ce5 100644
--- a/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
+++ b/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
@@ -89,8 +89,8 @@ export const mockAppConfig = {
   },
 
   workspaces: {
-    templateName: 'devcontainers',
-    mode: 'manual',
+    defaultTemplateName: 'devcontainers',
+    defaultMode: 'manual',
     repoUrlParamKeys: ['custom_repo', 'repo_url'],
     params: {
       repo: 'custom',

From a95a44bafbafdcbae4ec921845fdf53144d27983 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 13:54:52 +0000
Subject: [PATCH 02/42] refactor: update some code for clarity

---
 .../src/hooks/useCoderWorkspacesConfig.ts                    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
index a3b61870..e084ab9e 100644
--- a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
+++ b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
@@ -79,7 +79,7 @@ export type CoderWorkspacesConfig =
 
 export function compileCoderConfig(
   appConfig: CoderAppConfig,
-  rawYamlConfig: unknown,
+  rawYamlConfig: unknown, // Function parses this into more specific type
   repoUrl: string | undefined,
 ): CoderWorkspacesConfig {
   const { workspaces, deployment } = appConfig;
@@ -91,7 +91,7 @@ export function compileCoderConfig(
   const urlParams = new URLSearchParams({ mode });
   const compiledParams: Record<string, string | undefined> = {};
 
-  // Can't replace this with destructuring, because that is all-or-nothing;
+  // Can't replace section with destructuring, because that's all-or-nothing;
   // there's no easy way to granularly check each property without a loop
   const paramsPrecedence = [workspaces.params, yamlConfig?.params ?? {}];
   for (const params of paramsPrecedence) {
@@ -125,7 +125,6 @@ export function compileCoderConfig(
   let creationUrl: string | undefined = undefined;
   if (templateName) {
     const safeTemplate = encodeURIComponent(templateName);
-
     creationUrl = `${
       deployment.accessUrl
     }/templates/${safeTemplate}/workspace?${urlParams.toString()}`;

From 18e80f016dc8475b7f139f4c0dfa6d111eb81634 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 15:05:05 +0000
Subject: [PATCH 03/42] fix: update property names  in top-level config

---
 packages/app/src/components/catalog/EntityPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 84f1e68a..6c4f9df1 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -137,8 +137,8 @@ const coderAppConfig: CoderAppConfig = {
   },
 
   workspaces: {
-    templateName: 'devcontainers',
-    mode: 'manual',
+    defaultTemplateName: 'devcontainers',
+    defaultMode: 'manual',
     repoUrlParamKeys: ['custom_repo', 'repo_url'],
     params: {
       repo: 'custom',

From 3cfc7c5bfbd02e0dee426ad8940b5baaac64dea6 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 15:33:53 +0000
Subject: [PATCH 04/42] wip: commit progress on link update

---
 .../CreateWorkspaceLink.tsx                   | 54 +++++++++++++++----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
index 10c8fb86..4acb1adf 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
@@ -1,16 +1,22 @@
 import React, { type AnchorHTMLAttributes, type ForwardedRef } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { type Theme, makeStyles } from '@material-ui/core';
 import { useWorkspacesCardContext } from './Root';
 
 import { VisuallyHidden } from '../VisuallyHidden';
 import AddIcon from '@material-ui/icons/AddCircleOutline';
 import Tooltip, { type TooltipProps } from '@material-ui/core/Tooltip';
 
-const useStyles = makeStyles(theme => {
+type StyleInput = Readonly<{
+  canCreateWorkspace: boolean;
+}>;
+
+type StyleKeys = 'root' | 'icon';
+
+const useStyles = makeStyles<Theme, StyleInput, StyleKeys>(theme => {
   const padding = theme.spacing(0.5);
 
   return {
-    root: {
+    root: ({ canCreateWorkspace }) => ({
       padding,
       width: theme.spacing(4) + padding,
       height: theme.spacing(4) + padding,
@@ -24,12 +30,14 @@ const useStyles = makeStyles(theme => {
       '&:hover': {
         backgroundColor: theme.palette.action.hover,
       },
-    },
+    }),
+
+    icon: {},
   };
 });
 
 type CreateButtonLinkProps = Readonly<
-  AnchorHTMLAttributes<HTMLAnchorElement> & {
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-disabled'> & {
     tooltipText?: string;
     tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
     tooltipRef?: ForwardedRef<unknown>;
@@ -45,22 +53,50 @@ export const CreateWorkspaceLink = ({
   tooltipProps = {},
   ...delegatedProps
 }: CreateButtonLinkProps) => {
-  const styles = useStyles();
   const { workspacesConfig } = useWorkspacesCardContext();
+  const canCreateWorkspace = Boolean(workspacesConfig.creationUrl);
+  const styles = useStyles({ canCreateWorkspace });
 
   return (
-    <Tooltip ref={tooltipRef} title={tooltipText} {...tooltipProps}>
+    <Tooltip
+      ref={tooltipRef}
+      title={
+        canCreateWorkspace ? tooltipText : 'Please add a template name value'
+      }
+      {...tooltipProps}
+    >
+      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles --
+          Some browsers will render out <a> elements as having no role when the
+          href value is undefined. Need to make sure that the link role is
+          always defined, no matter what. The ESLint rule is wrong here. */}
       <a
+        role="link"
         target={target}
         className={`${styles.root} ${className ?? ''}`}
+        /**
+         * Also need to make sure that the link is correctly disabled when there
+         * is no href available.
+         * @see {@link https://www.scottohara.me/blog/2021/05/28/disabled-links.html}
+         */
         href={workspacesConfig.creationUrl}
+        aria-disabled={!canCreateWorkspace}
         {...delegatedProps}
       >
         {children ?? <AddIcon />}
 
         <VisuallyHidden>
-          {tooltipText}
-          {target === '_blank' && <> (Link opens in new tab)</>}
+          {canCreateWorkspace ? (
+            <>
+              {tooltipText}
+              {target === '_blank' && <> (Link opens in new tab)</>}
+            </>
+          ) : (
+            <>
+              This component does not have a usable template name. Please see
+              the disclosure section in this widget for steps on adding this
+              information.
+            </>
+          )}
         </VisuallyHidden>
       </a>
     </Tooltip>

From ec1e7942eef27020e3ea356241958dee81c3ae5b Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 15:42:18 +0000
Subject: [PATCH 05/42] chore: finish updates for CreateWorkspaceLink

---
 .../CoderWorkspacesCard/CreateWorkspaceLink.tsx     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
index 4acb1adf..92b35296 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
@@ -10,8 +10,7 @@ type StyleInput = Readonly<{
   canCreateWorkspace: boolean;
 }>;
 
-type StyleKeys = 'root' | 'icon';
-
+type StyleKeys = 'root';
 const useStyles = makeStyles<Theme, StyleInput, StyleKeys>(theme => {
   const padding = theme.spacing(0.5);
 
@@ -20,19 +19,23 @@ const useStyles = makeStyles<Theme, StyleInput, StyleKeys>(theme => {
       padding,
       width: theme.spacing(4) + padding,
       height: theme.spacing(4) + padding,
+      cursor: 'pointer',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: 'inherit',
       borderRadius: '9999px',
       lineHeight: 1,
+      color: canCreateWorkspace
+        ? theme.palette.text.primary
+        : theme.palette.text.disabled,
 
       '&:hover': {
-        backgroundColor: theme.palette.action.hover,
+        backgroundColor: canCreateWorkspace
+          ? theme.palette.action.hover
+          : 'inherit',
       },
     }),
-
-    icon: {},
   };
 });
 

From 50ad128d57d1457e288e4f40d27069b782c3642c Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 16:16:23 +0000
Subject: [PATCH 06/42] chore: add new test case for disabled state

---
 .../CreateWorkspaceLink.test.tsx              | 57 +++++++++++++++++--
 .../CreateWorkspaceLink.tsx                   |  5 +-
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
index b26c86f1..334837b4 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
@@ -1,17 +1,43 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockAppConfig } from '../../testHelpers/mockBackstageData';
+import {
+  mockAppConfig,
+  mockCoderWorkspacesConfig,
+} from '../../testHelpers/mockBackstageData';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
-import { Root } from './Root';
+import { CardContext, WorkspacesCardContext } from './Root';
 import { CreateWorkspaceLink } from './CreateWorkspaceLink';
+import type { CoderWorkspacesConfig } from '../../hooks/useCoderWorkspacesConfig';
+
+type RenderInputs = Readonly<{
+  hasTemplateName?: boolean;
+}>;
+
+function render(inputs?: RenderInputs) {
+  const { hasTemplateName = true } = inputs ?? {};
+
+  const mockWorkspacesConfig: CoderWorkspacesConfig = {
+    ...mockCoderWorkspacesConfig,
+    creationUrl: hasTemplateName
+      ? mockCoderWorkspacesConfig.creationUrl
+      : undefined,
+  };
+
+  const mockContextValue: WorkspacesCardContext = {
+    workspacesConfig: mockWorkspacesConfig,
+    headerId: "Doesn't matter",
+    queryFilter: "Also doesn't matter",
+    onFilterChange: jest.fn(),
+    workspacesQuery:
+      null as unknown as WorkspacesCardContext['workspacesQuery'],
+  };
 
-function render() {
   return renderInCoderEnvironment({
     children: (
-      <Root>
+      <CardContext.Provider value={mockContextValue}>
         <CreateWorkspaceLink />
-      </Root>
+      </CardContext.Provider>
     ),
   });
 }
@@ -37,4 +63,25 @@ describe(`${CreateWorkspaceLink.name}`, () => {
     const tooltip = await screen.findByText('Add a new workspace');
     expect(tooltip).toBeInTheDocument();
   });
+
+  it('Will be disabled and will indicate to the user when there is no usable templateName value', async () => {
+    await render({ hasTemplateName: false });
+    const link = screen.getByRole<HTMLAnchorElement>('link');
+
+    // Check that the link is "disabled" properly (see main component file for
+    // a link to resource explaining edge cases). Can't assert toBeDisabled,
+    // because links don't support the disabled attribute; also can't check
+    // the .role and .ariaDisabled properties on the link variable, because even
+    // though they exist in the output, RTL doesn't correctly pass them through.
+    // This is a niche edge case - have to check properties on the raw HTML node
+    expect(link.href).toBe('');
+    expect(link.getAttribute('role')).toBe('link');
+    expect(link.getAttribute('aria-disabled')).toBe('true');
+
+    // Make sure tooltip is also updated
+    const user = userEvent.setup();
+    await user.hover(link);
+    const tooltip = await screen.findByText('Please add a template name value');
+    expect(tooltip).toBeInTheDocument();
+  });
 });
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
index 92b35296..8e509bd8 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
@@ -70,8 +70,9 @@ export const CreateWorkspaceLink = ({
     >
       {/* eslint-disable-next-line jsx-a11y/no-redundant-roles --
           Some browsers will render out <a> elements as having no role when the
-          href value is undefined. Need to make sure that the link role is
-          always defined, no matter what. The ESLint rule is wrong here. */}
+          href value is undefined or an empty string. Need to make sure that the
+          link role is always defined, no matter what. The ESLint rule is wrong
+          here. */}
       <a
         role="link"
         target={target}

From bbcdaf7147c1fba29c8ed77dfb97920cffe94cc6 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 19:27:06 +0000
Subject: [PATCH 07/42] fix: cleanup markup and text for EntityDataReminder

---
 .../EntityDataReminder.tsx                    | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx
index c6335d85..decbf825 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx
@@ -13,7 +13,8 @@ type UseStyleKeys =
   | 'button'
   | 'disclosureTriangle'
   | 'disclosureBody'
-  | 'snippet';
+  | 'snippet'
+  | 'link';
 
 const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
   root: ({ hasData }) => ({
@@ -21,6 +22,14 @@ const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
     borderTop: hasData ? 'none' : `1px solid ${theme.palette.divider}`,
   }),
 
+  link: {
+    color: theme.palette.link,
+
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+  },
+
   button: {
     width: '100%',
     textAlign: 'left',
@@ -41,12 +50,13 @@ const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
     display: 'inline-block',
     textAlign: 'right',
     width: theme.spacing(2.25),
+    fontSize: '0.7rem',
   },
 
   disclosureBody: {
     margin: 0,
     padding: `${theme.spacing(0.5)}px ${theme.spacing(3.5)}px 0 ${theme.spacing(
-      3.75,
+      4,
     )}px`,
   },
 
@@ -89,24 +99,24 @@ export const EntityDataReminder = () => {
         <span aria-hidden className={styles.disclosureTriangle}>
           {isExpanded ? '▼' : '►'}
         </span>{' '}
-        {isExpanded ? 'Hide text' : 'Why am I seeing all workspaces?'}
+        Why am I not seeing any workspaces?
       </button>
 
       {isExpanded && (
         <p id={disclosureBodyId} className={styles.disclosureBody}>
-          This component displays all workspaces when the entity has no repo URL
-          to filter by. Consider disabling{' '}
-          <code className={styles.snippet}>readEntityData</code> (details in our{' '}
+          This component displays only displays all workspaces when the value of
+          the <code className={styles.snippet}>readEntityData</code> prop is{' '}
+          <code className={styles.snippet}>false</code>. See{' '}
           <a
             href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
             rel="noopener noreferrer"
             target="_blank"
-            style={{ textDecoration: 'underline', color: 'inherit' }}
+            className={styles.link}
           >
-            documentation
+            our documentation
             <VisuallyHidden> (link opens in new tab)</VisuallyHidden>
-          </a>
-          ).
+          </a>{' '}
+          for more info.
         </p>
       )}
     </div>

From 730e979ef14e9594bed4f7834333dac6ce20f208 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 20:01:21 +0000
Subject: [PATCH 08/42] chore: add readEntityData as context value

---
 .../CoderWorkspacesCard/CoderWorkspacesCard.tsx        |  8 +++++---
 .../CoderWorkspacesCard/CreateWorkspaceLink.test.tsx   |  3 +++
 .../src/components/CoderWorkspacesCard/Root.tsx        | 10 +++-------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.tsx
index 64bff808..ac53b0f0 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.tsx
@@ -7,6 +7,7 @@ import { SearchBox } from './SearchBox';
 import { WorkspacesList } from './WorkspacesList';
 import { CreateWorkspaceLink } from './CreateWorkspaceLink';
 import { ExtraActionsButton } from './ExtraActionsButton';
+import { ReminderAccordion } from './ReminderAccordion';
 
 const useStyles = makeStyles(theme => ({
   searchWrapper: {
@@ -15,9 +16,9 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const CoderWorkspacesCard = (
-  props: Omit<WorkspacesCardProps, 'children'>,
-) => {
+type Props = Omit<WorkspacesCardProps, 'children' | 'footerContent'>;
+
+export const CoderWorkspacesCard = (props: Props) => {
   const styles = useStyles();
 
   return (
@@ -37,6 +38,7 @@ export const CoderWorkspacesCard = (
       </div>
 
       <WorkspacesList />
+      <ReminderAccordion />
     </Root>
   );
 };
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
index 334837b4..e9fd6a49 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
@@ -26,6 +26,9 @@ function render(inputs?: RenderInputs) {
 
   const mockContextValue: WorkspacesCardContext = {
     workspacesConfig: mockWorkspacesConfig,
+
+    // Everything below this comment doesn't matter for the test logic
+    readEntityData: false,
     headerId: "Doesn't matter",
     queryFilter: "Also doesn't matter",
     onFilterChange: jest.fn(),
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
index 6829753a..e8fd6042 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
@@ -22,11 +22,11 @@ import type { Workspace } from '../../typesConstants';
 import { useCoderWorkspacesQuery } from '../../hooks/useCoderWorkspacesQuery';
 import { Card } from '../Card';
 import { CoderAuthWrapper } from '../CoderAuthWrapper';
-import { EntityDataReminder } from './EntityDataReminder';
 
 export type WorkspacesQuery = UseQueryResult<readonly Workspace[]>;
 
 export type WorkspacesCardContext = Readonly<{
+  readEntityData: boolean;
   queryFilter: string;
   onFilterChange: (newFilter: string) => void;
   workspacesQuery: WorkspacesQuery;
@@ -56,7 +56,6 @@ export const Root = ({
   readEntityData = false,
   ...delegatedProps
 }: WorkspacesCardProps) => {
-  const hookId = useId();
   const [innerFilter, setInnerFilter] = useState(defaultQueryFilter);
   const activeFilter = outerFilter ?? innerFilter;
 
@@ -66,17 +65,15 @@ export const Root = ({
     coderQuery: activeFilter,
   });
 
+  const hookId = useId();
   const headerId = `${hookId}-header`;
-  const showEntityDataReminder =
-    readEntityData &&
-    !workspacesConfig.repoUrl &&
-    workspacesQuery.data !== undefined;
 
   return (
     <CoderAuthWrapper type="card">
       <CardContext.Provider
         value={{
           headerId,
+          readEntityData,
           workspacesQuery,
           workspacesConfig,
           queryFilter: activeFilter,
@@ -99,7 +96,6 @@ export const Root = ({
               cases around keyboard input and button children that native <form>
               elements automatically introduce */}
           <div role="form">{children}</div>
-          {showEntityDataReminder && <EntityDataReminder />}
         </Card>
       </CardContext.Provider>
     </CoderAuthWrapper>

From cd804f607a852a350de39e6c91b0af115255c477 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 20:01:49 +0000
Subject: [PATCH 09/42] refactor: rename DataEntityReminder to
 ReminderAcoordionItem

---
 ...DataReminder.test.tsx => ReminderAccordionItem.test.tsx} | 6 +++---
 .../{EntityDataReminder.tsx => ReminderAccordionItem.tsx}   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/{EntityDataReminder.test.tsx => ReminderAccordionItem.test.tsx} (85%)
 rename plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/{EntityDataReminder.tsx => ReminderAccordionItem.tsx} (98%)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.test.tsx
similarity index 85%
rename from plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.test.tsx
rename to plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.test.tsx
index 61536c72..5758fb37 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.test.tsx
@@ -3,19 +3,19 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
 import { Root } from './Root';
-import { EntityDataReminder } from './EntityDataReminder';
+import { ReminderAccordionItem } from './ReminderAccordionItem';
 
 function render() {
   return renderInCoderEnvironment({
     children: (
       <Root>
-        <EntityDataReminder />
+        <ReminderAccordionItem />
       </Root>
     ),
   });
 }
 
-describe(`${EntityDataReminder.name}`, () => {
+describe(`${ReminderAccordionItem.name}`, () => {
   it('Will toggle between showing/hiding the disclosure info when the user clicks it', async () => {
     await render();
     const user = userEvent.setup();
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
similarity index 98%
rename from plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx
rename to plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
index decbf825..7c3c3fe1 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/EntityDataReminder.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
@@ -76,7 +76,7 @@ const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
   },
 }));
 
-export const EntityDataReminder = () => {
+export const ReminderAccordionItem = () => {
   const [isExpanded, setIsExpanded] = useState(false);
   const { workspacesQuery } = useWorkspacesCardContext();
   const styles = useStyles({ hasData: workspacesQuery.data !== undefined });

From 9e541c2d66afe129b5417adceba22834571cd4ee Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 20:26:12 +0000
Subject: [PATCH 10/42] chore: extract core accordion item logic to parent

---
 .../CoderWorkspacesCard/ReminderAccordion.tsx | 124 ++++++++++++++++++
 .../ReminderAccordionItem.tsx                 | 109 +++++----------
 2 files changed, 157 insertions(+), 76 deletions(-)
 create mode 100644 plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
new file mode 100644
index 00000000..c0ca6345
--- /dev/null
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -0,0 +1,124 @@
+import React, { Fragment, ReactNode, useState } from 'react';
+import { useWorkspacesCardContext } from './Root';
+import { ReminderAccordionItem } from './ReminderAccordionItem';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { Theme, makeStyles } from '@material-ui/core';
+
+type AccordionItemInfo = Readonly<{
+  id: string;
+  canDisplay: boolean;
+  headerText: ReactNode;
+  bodyText: ReactNode;
+}>;
+
+type UseStyleProps = Readonly<{
+  hasData: boolean;
+}>;
+
+type UseStyleKeys = 'root' | 'snippet' | 'link';
+
+const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
+  root: ({ hasData }) => ({
+    paddingTop: theme.spacing(1),
+    borderTop: hasData ? 'none' : `1px solid ${theme.palette.divider}`,
+  }),
+
+  link: {
+    color: theme.palette.link,
+
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+  },
+
+  snippet: {
+    color: theme.palette.text.primary,
+    borderRadius: theme.spacing(0.5),
+    padding: `${theme.spacing(0.2)}px ${theme.spacing(1)}px`,
+    backgroundColor: () => {
+      const defaultBackgroundColor = theme.palette.background.default;
+      const isDefaultSpotifyLightTheme =
+        defaultBackgroundColor.toUpperCase() === '#F8F8F8';
+
+      return isDefaultSpotifyLightTheme
+        ? 'hsl(0deg,0%,93%)'
+        : defaultBackgroundColor;
+    },
+  },
+}));
+
+type Props = Readonly<{
+  showEntityReminder?: boolean;
+  showTemplateNameReminder?: boolean;
+}>;
+
+export function ReminderAccordion({
+  showEntityReminder = true,
+  showTemplateNameReminder = true,
+}: Props) {
+  const [activeItemId, setActiveItemId] = useState<string>();
+  const { readEntityData, workspacesConfig, workspacesQuery } =
+    useWorkspacesCardContext();
+  const styles = useStyles({ hasData: workspacesQuery.data !== undefined });
+
+  const toggleAccordionGroup = (newItemId: string) => {
+    if (newItemId === activeItemId) {
+      setActiveItemId(undefined);
+    } else {
+      setActiveItemId(newItemId);
+    }
+  };
+
+  const accordionData: readonly AccordionItemInfo[] = [
+    {
+      id: 'entity',
+      canDisplay:
+        showEntityReminder &&
+        readEntityData &&
+        !workspacesConfig.repoUrl &&
+        workspacesQuery.data !== undefined,
+      headerText: 'Why am I not seeing any workspaces?',
+      bodyText: (
+        <>
+          This component displays only displays all workspaces when the value of
+          the <code className={styles.snippet}>readEntityData</code> prop is{' '}
+          <code className={styles.snippet}>false</code>. See{' '}
+          <a
+            href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
+            rel="noopener noreferrer"
+            target="_blank"
+            className={styles.link}
+          >
+            our documentation
+            <VisuallyHidden> (link opens in new tab)</VisuallyHidden>
+          </a>{' '}
+          for more info.
+        </>
+      ),
+    },
+    {
+      id: 'templateName',
+      canDisplay: showTemplateNameReminder && !workspacesConfig.creationUrl,
+      headerText: '',
+      bodyText: 'Blah',
+    },
+  ];
+
+  return (
+    <>
+      {accordionData.map(({ id, canDisplay, headerText, bodyText }) => (
+        <Fragment key={id}>
+          {canDisplay && (
+            <ReminderAccordionItem
+              headerText={headerText}
+              isExpanded={id === activeItemId}
+              onExpansion={() => toggleAccordionGroup(id)}
+            >
+              {bodyText}
+            </ReminderAccordionItem>
+          )}
+        </Fragment>
+      ))}
+    </>
+  );
+}
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
index 7c3c3fe1..cbe46775 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
@@ -1,51 +1,8 @@
-import React, { useState } from 'react';
+import React, { type PropsWithChildren, type ReactNode } from 'react';
 import { useId } from '../../hooks/hookPolyfills';
-import { Theme, makeStyles } from '@material-ui/core';
-import { VisuallyHidden } from '../VisuallyHidden';
-import { useWorkspacesCardContext } from './Root';
-
-type UseStyleProps = Readonly<{
-  hasData: boolean;
-}>;
-
-type UseStyleKeys =
-  | 'root'
-  | 'button'
-  | 'disclosureTriangle'
-  | 'disclosureBody'
-  | 'snippet'
-  | 'link';
-
-const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
-  root: ({ hasData }) => ({
-    paddingTop: theme.spacing(1),
-    borderTop: hasData ? 'none' : `1px solid ${theme.palette.divider}`,
-  }),
-
-  link: {
-    color: theme.palette.link,
-
-    '&:hover': {
-      textDecoration: 'underline',
-    },
-  },
-
-  button: {
-    width: '100%',
-    textAlign: 'left',
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(1),
-    border: 'none',
-    borderRadius: theme.shape.borderRadius,
-    fontSize: theme.typography.body2.fontSize,
-    cursor: 'pointer',
-
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover,
-    },
-  },
+import { makeStyles } from '@material-ui/core';
 
+const useStyles = makeStyles(theme => ({
   disclosureTriangle: {
     display: 'inline-block',
     textAlign: 'right',
@@ -60,26 +17,38 @@ const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
     )}px`,
   },
 
-  snippet: {
+  button: {
+    width: '100%',
+    textAlign: 'left',
     color: theme.palette.text.primary,
-    borderRadius: theme.spacing(0.5),
-    padding: `${theme.spacing(0.2)}px ${theme.spacing(1)}px`,
-    backgroundColor: () => {
-      const defaultBackgroundColor = theme.palette.background.default;
-      const isDefaultSpotifyLightTheme =
-        defaultBackgroundColor.toUpperCase() === '#F8F8F8';
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(1),
+    border: 'none',
+    borderRadius: theme.shape.borderRadius,
+    fontSize: theme.typography.body2.fontSize,
+    cursor: 'pointer',
 
-      return isDefaultSpotifyLightTheme
-        ? 'hsl(0deg,0%,93%)'
-        : defaultBackgroundColor;
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
     },
   },
 }));
 
-export const ReminderAccordionItem = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const { workspacesQuery } = useWorkspacesCardContext();
-  const styles = useStyles({ hasData: workspacesQuery.data !== undefined });
+type AccordionItemProps = Readonly<
+  PropsWithChildren<{
+    isExpanded: boolean;
+    onExpansion: () => void;
+    headerText: ReactNode;
+  }>
+>;
+
+export const ReminderAccordionItem = ({
+  isExpanded,
+  onExpansion,
+  headerText,
+  children,
+}: AccordionItemProps) => {
+  const styles = useStyles();
 
   const hookId = useId();
   const disclosureBodyId = `${hookId}-disclosure-body`;
@@ -88,35 +57,23 @@ export const ReminderAccordionItem = () => {
   // functionality with <detail> and <summary> elements. Would likely clean up
   // the component code a ton but might reduce control over screen reader output
   return (
-    <div className={styles.root}>
+    <div>
       <button
         type="button"
         aria-expanded={isExpanded}
         aria-controls={disclosureBodyId}
-        onClick={() => setIsExpanded(!isExpanded)}
+        onClick={onExpansion}
         className={styles.button}
       >
         <span aria-hidden className={styles.disclosureTriangle}>
           {isExpanded ? '▼' : '►'}
         </span>{' '}
-        Why am I not seeing any workspaces?
+        {headerText}
       </button>
 
       {isExpanded && (
         <p id={disclosureBodyId} className={styles.disclosureBody}>
-          This component displays only displays all workspaces when the value of
-          the <code className={styles.snippet}>readEntityData</code> prop is{' '}
-          <code className={styles.snippet}>false</code>. See{' '}
-          <a
-            href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
-            rel="noopener noreferrer"
-            target="_blank"
-            className={styles.link}
-          >
-            our documentation
-            <VisuallyHidden> (link opens in new tab)</VisuallyHidden>
-          </a>{' '}
-          for more info.
+          {children}
         </p>
       )}
     </div>

From f445df4271e86df4c965e91ddf95268029eb606f Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 20:52:23 +0000
Subject: [PATCH 11/42] chore: finish initial version of ReminderAccordion

---
 .../AccordionItem.test.tsx}                   |  8 +-
 .../AccordionItem.tsx}                        |  3 +-
 .../CoderWorkspacesCard/ReminderAccordion.tsx | 74 +++++++++----------
 .../InlineCodeSnippet/InlineCodeSnippet.tsx   | 32 ++++++++
 4 files changed, 71 insertions(+), 46 deletions(-)
 rename plugins/backstage-plugin-coder/src/components/{CoderWorkspacesCard/ReminderAccordionItem.test.tsx => AccordionItem/AccordionItem.test.tsx} (83%)
 rename plugins/backstage-plugin-coder/src/components/{CoderWorkspacesCard/ReminderAccordionItem.tsx => AccordionItem/AccordionItem.tsx} (97%)
 create mode 100644 plugins/backstage-plugin-coder/src/components/InlineCodeSnippet/InlineCodeSnippet.tsx

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.test.tsx b/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.test.tsx
similarity index 83%
rename from plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.test.tsx
rename to plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.test.tsx
index 5758fb37..e8dbc5d8 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.test.tsx
@@ -2,20 +2,20 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
-import { Root } from './Root';
-import { ReminderAccordionItem } from './ReminderAccordionItem';
+import { Root } from '../CoderWorkspacesCard/Root';
+import { AccordionItem } from './AccordionItem';
 
 function render() {
   return renderInCoderEnvironment({
     children: (
       <Root>
-        <ReminderAccordionItem />
+        <AccordionItem />
       </Root>
     ),
   });
 }
 
-describe(`${ReminderAccordionItem.name}`, () => {
+describe(`${AccordionItem.name}`, () => {
   it('Will toggle between showing/hiding the disclosure info when the user clicks it', async () => {
     await render();
     const user = userEvent.setup();
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx b/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.tsx
similarity index 97%
rename from plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
rename to plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.tsx
index cbe46775..f5906d59 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordionItem.tsx
+++ b/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.tsx
@@ -42,14 +42,13 @@ type AccordionItemProps = Readonly<
   }>
 >;
 
-export const ReminderAccordionItem = ({
+export const AccordionItem = ({
   isExpanded,
   onExpansion,
   headerText,
   children,
 }: AccordionItemProps) => {
   const styles = useStyles();
-
   const hookId = useId();
   const disclosureBodyId = `${hookId}-disclosure-body`;
 
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index c0ca6345..811a637f 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -1,8 +1,9 @@
-import React, { Fragment, ReactNode, useState } from 'react';
-import { useWorkspacesCardContext } from './Root';
-import { ReminderAccordionItem } from './ReminderAccordionItem';
+import React, { type ReactNode, Fragment, useState } from 'react';
+import { type Theme, makeStyles } from '@material-ui/core';
 import { VisuallyHidden } from '../VisuallyHidden';
-import { Theme, makeStyles } from '@material-ui/core';
+import { useWorkspacesCardContext } from './Root';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
+import { InlineCodeSnippet } from '../InlineCodeSnippet/InlineCodeSnippet';
 
 type AccordionItemInfo = Readonly<{
   id: string;
@@ -11,13 +12,12 @@ type AccordionItemInfo = Readonly<{
   bodyText: ReactNode;
 }>;
 
-type UseStyleProps = Readonly<{
+type StyleKeys = 'root' | 'link';
+type StyleInputs = Readonly<{
   hasData: boolean;
 }>;
 
-type UseStyleKeys = 'root' | 'snippet' | 'link';
-
-const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
+const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
   root: ({ hasData }) => ({
     paddingTop: theme.spacing(1),
     borderTop: hasData ? 'none' : `1px solid ${theme.palette.divider}`,
@@ -25,26 +25,10 @@ const useStyles = makeStyles<Theme, UseStyleProps, UseStyleKeys>(theme => ({
 
   link: {
     color: theme.palette.link,
-
     '&:hover': {
       textDecoration: 'underline',
     },
   },
-
-  snippet: {
-    color: theme.palette.text.primary,
-    borderRadius: theme.spacing(0.5),
-    padding: `${theme.spacing(0.2)}px ${theme.spacing(1)}px`,
-    backgroundColor: () => {
-      const defaultBackgroundColor = theme.palette.background.default;
-      const isDefaultSpotifyLightTheme =
-        defaultBackgroundColor.toUpperCase() === '#F8F8F8';
-
-      return isDefaultSpotifyLightTheme
-        ? 'hsl(0deg,0%,93%)'
-        : defaultBackgroundColor;
-    },
-  },
 }));
 
 type Props = Readonly<{
@@ -61,14 +45,6 @@ export function ReminderAccordion({
     useWorkspacesCardContext();
   const styles = useStyles({ hasData: workspacesQuery.data !== undefined });
 
-  const toggleAccordionGroup = (newItemId: string) => {
-    if (newItemId === activeItemId) {
-      setActiveItemId(undefined);
-    } else {
-      setActiveItemId(newItemId);
-    }
-  };
-
   const accordionData: readonly AccordionItemInfo[] = [
     {
       id: 'entity',
@@ -81,8 +57,8 @@ export function ReminderAccordion({
       bodyText: (
         <>
           This component displays only displays all workspaces when the value of
-          the <code className={styles.snippet}>readEntityData</code> prop is{' '}
-          <code className={styles.snippet}>false</code>. See{' '}
+          the <InlineCodeSnippet>readEntityData</InlineCodeSnippet> prop is{' '}
+          <InlineCodeSnippet>false</InlineCodeSnippet>. See{' '}
           <a
             href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
             rel="noopener noreferrer"
@@ -99,26 +75,44 @@ export function ReminderAccordion({
     {
       id: 'templateName',
       canDisplay: showTemplateNameReminder && !workspacesConfig.creationUrl,
-      headerText: '',
-      bodyText: 'Blah',
+      headerText: <>Why can&apos;t I make a new workspace?</>,
+      bodyText: (
+        <>
+          This component cannot make a new workspace without a template name
+          value. Values can be provided via{' '}
+          <InlineCodeSnippet>defaultTemplateName</InlineCodeSnippet> in{' '}
+          <InlineCodeSnippet>CoderAppConfig</InlineCodeSnippet> or the{' '}
+          <InlineCodeSnippet>templateName</InlineCodeSnippet> property in a
+          repo's <InlineCodeSnippet>catalog-info.yaml</InlineCodeSnippet> file.
+          See our documentation for more information.
+        </>
+      ),
     },
   ];
 
+  const toggleAccordionGroup = (newItemId: string) => {
+    if (newItemId === activeItemId) {
+      setActiveItemId(undefined);
+    } else {
+      setActiveItemId(newItemId);
+    }
+  };
+
   return (
-    <>
+    <div className={styles.root}>
       {accordionData.map(({ id, canDisplay, headerText, bodyText }) => (
         <Fragment key={id}>
           {canDisplay && (
-            <ReminderAccordionItem
+            <AccordionItem
               headerText={headerText}
               isExpanded={id === activeItemId}
               onExpansion={() => toggleAccordionGroup(id)}
             >
               {bodyText}
-            </ReminderAccordionItem>
+            </AccordionItem>
           )}
         </Fragment>
       ))}
-    </>
+    </div>
   );
 }
diff --git a/plugins/backstage-plugin-coder/src/components/InlineCodeSnippet/InlineCodeSnippet.tsx b/plugins/backstage-plugin-coder/src/components/InlineCodeSnippet/InlineCodeSnippet.tsx
new file mode 100644
index 00000000..7743bdc8
--- /dev/null
+++ b/plugins/backstage-plugin-coder/src/components/InlineCodeSnippet/InlineCodeSnippet.tsx
@@ -0,0 +1,32 @@
+import React, { HTMLAttributes } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.primary,
+    borderRadius: theme.spacing(0.5),
+    padding: `${theme.spacing(0.2)}px ${theme.spacing(1)}px`,
+    backgroundColor: () => {
+      const isLightTheme = theme.palette.type === 'light';
+      return isLightTheme
+        ? 'hsl(0deg,0%,93%)'
+        : theme.palette.background.default;
+    },
+  },
+}));
+
+type Props = Readonly<
+  Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    children: string;
+  }
+>;
+
+export function InlineCodeSnippet({ children, ...delegatedProps }: Props) {
+  const styles = useStyles();
+  return (
+    <code className={styles.root} {...delegatedProps}>
+      {children}
+    </code>
+  );
+}

From f841d1a929ae3dd32104d58edf9fa9cc9d6450e1 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 21:03:06 +0000
Subject: [PATCH 12/42] wip: commit test stubs for ReminderAccordion

---
 .../ReminderAccordion.test.tsx                | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
new file mode 100644
index 00000000..6fc4bc0d
--- /dev/null
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -0,0 +1,19 @@
+import { ReminderAccordion } from './ReminderAccordion';
+
+describe(`${ReminderAccordion.name}`, () => {
+  it('Lets the user open a single accordion item', async () => {
+    expect.hasAssertions();
+  });
+
+  it('Will close an open accordion item when that item is clicked', async () => {
+    expect.hasAssertions();
+  });
+
+  it('Will close any other open accordion items when a new item is clicked', async () => {
+    expect.hasAssertions();
+  });
+
+  it('Lets the user conditionally hide accordion items based on props', async () => {
+    expect.hasAssertions();
+  });
+});

From 98a94c830bd0f9d57c51b535dfff3cb166460e55 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 21:03:40 +0000
Subject: [PATCH 13/42] chore: rename isReadingEntityData prop

---
 .../src/components/CoderWorkspacesCard/ReminderAccordion.tsx  | 4 ++--
 .../src/components/CoderWorkspacesCard/Root.tsx               | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index 811a637f..1312988b 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -41,7 +41,7 @@ export function ReminderAccordion({
   showTemplateNameReminder = true,
 }: Props) {
   const [activeItemId, setActiveItemId] = useState<string>();
-  const { readEntityData, workspacesConfig, workspacesQuery } =
+  const { isReadingEntityData, workspacesConfig, workspacesQuery } =
     useWorkspacesCardContext();
   const styles = useStyles({ hasData: workspacesQuery.data !== undefined });
 
@@ -50,7 +50,7 @@ export function ReminderAccordion({
       id: 'entity',
       canDisplay:
         showEntityReminder &&
-        readEntityData &&
+        isReadingEntityData &&
         !workspacesConfig.repoUrl &&
         workspacesQuery.data !== undefined,
       headerText: 'Why am I not seeing any workspaces?',
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
index e8fd6042..70a64df3 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
@@ -26,7 +26,7 @@ import { CoderAuthWrapper } from '../CoderAuthWrapper';
 export type WorkspacesQuery = UseQueryResult<readonly Workspace[]>;
 
 export type WorkspacesCardContext = Readonly<{
-  readEntityData: boolean;
+  isReadingEntityData: boolean;
   queryFilter: string;
   onFilterChange: (newFilter: string) => void;
   workspacesQuery: WorkspacesQuery;
@@ -73,9 +73,9 @@ export const Root = ({
       <CardContext.Provider
         value={{
           headerId,
-          readEntityData,
           workspacesQuery,
           workspacesConfig,
+          isReadingEntityData: readEntityData,
           queryFilter: activeFilter,
           onFilterChange: newFilter => {
             setInnerFilter(newFilter);

From d2ac1ac8185eaed50c170456b39457a492602104 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 21:04:24 +0000
Subject: [PATCH 14/42] chore: update mock context values in tests

---
 .../components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx | 2 +-
 .../components/CoderWorkspacesCard/ExtraActionsButton.test.tsx  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
index e9fd6a49..23e1659d 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
@@ -28,7 +28,7 @@ function render(inputs?: RenderInputs) {
     workspacesConfig: mockWorkspacesConfig,
 
     // Everything below this comment doesn't matter for the test logic
-    readEntityData: false,
+    isReadingEntityData: false,
     headerId: "Doesn't matter",
     queryFilter: "Also doesn't matter",
     onFilterChange: jest.fn(),
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx
index 732a859d..96ded1d6 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx
@@ -43,6 +43,7 @@ async function renderButton({ buttonText }: RenderInputs) {
     refetch,
   } as unknown as WorkspacesCardContext['workspacesQuery'];
   const mockContext: WorkspacesCardContext = {
+    isReadingEntityData: true,
     headerId: "Doesn't matter",
     queryFilter: "Doesn't matter",
     onFilterChange: jest.fn(),

From b415ce588342a9c9923f643051dcdf7c88ec11fd Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 21:04:46 +0000
Subject: [PATCH 15/42] wip: commit test stub for hiding cta button when there
 is no repo URL

---
 .../components/CoderWorkspacesCard/WorkspacesList.test.tsx   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
index f2033a82..92ab025b 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
@@ -16,6 +16,7 @@ function renderWorkspacesList(inputs?: RenderInputs) {
   const { renderListItem, workspacesQuery } = inputs ?? {};
 
   const mockContext: WorkspacesCardContext = {
+    isReadingEntityData: true,
     headerId: "Doesn't matter",
     queryFilter: "Also doesn't matter",
     onFilterChange: jest.fn(),
@@ -63,4 +64,8 @@ describe(`${WorkspacesList.name}`, () => {
       expect(listItem).toBeInstanceOf(HTMLLIElement);
     }
   });
+
+  it('Does not display the call-to-action button for making new workspaces when there is no workspace creation URL', async () => {
+    expect.hasAssertions();
+  });
 });

From 604c7a4ec432bf3ef1dbe353f97c9d16cbeb350c Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Mon, 1 Apr 2024 21:06:13 +0000
Subject: [PATCH 16/42] chore: hide CTA button when there is no repo URL

---
 .../src/components/CoderWorkspacesCard/WorkspacesList.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx
index 03860201..a9293dab 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx
@@ -97,7 +97,7 @@ export const WorkspacesList = ({
       {workspacesQuery.data?.length === 0 && (
         <>
           {emptyState ?? (
-            <Placeholder displayCta>
+            <Placeholder displayCta={Boolean(repoUrl)}>
               {repoUrl ? (
                 <div style={{ textAlign: 'center' }}>
                   No workspaces found for repo

From 86356638d3a23b4cb8f9ceef0c735cdd07c9f865 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 12:20:50 +0000
Subject: [PATCH 17/42] chore: rename AccordionItem to Disclosure

---
 .../CoderWorkspacesCard/ReminderAccordion.tsx         |  8 ++++----
 .../Disclosure.test.tsx}                              | 11 ++++++++---
 .../AccordionItem.tsx => Disclosure/Disclosure.tsx}   |  8 ++++----
 3 files changed, 16 insertions(+), 11 deletions(-)
 rename plugins/backstage-plugin-coder/src/components/{AccordionItem/AccordionItem.test.tsx => Disclosure/Disclosure.test.tsx} (83%)
 rename plugins/backstage-plugin-coder/src/components/{AccordionItem/AccordionItem.tsx => Disclosure/Disclosure.tsx} (92%)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index 1312988b..dfa138ac 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -2,7 +2,7 @@ import React, { type ReactNode, Fragment, useState } from 'react';
 import { type Theme, makeStyles } from '@material-ui/core';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { useWorkspacesCardContext } from './Root';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
+import { Disclosure } from '../Disclosure/Disclosure';
 import { InlineCodeSnippet } from '../InlineCodeSnippet/InlineCodeSnippet';
 
 type AccordionItemInfo = Readonly<{
@@ -99,17 +99,17 @@ export function ReminderAccordion({
   };
 
   return (
-    <div className={styles.root}>
+    <div role="group" className={styles.root}>
       {accordionData.map(({ id, canDisplay, headerText, bodyText }) => (
         <Fragment key={id}>
           {canDisplay && (
-            <AccordionItem
+            <Disclosure
               headerText={headerText}
               isExpanded={id === activeItemId}
               onExpansion={() => toggleAccordionGroup(id)}
             >
               {bodyText}
-            </AccordionItem>
+            </Disclosure>
           )}
         </Fragment>
       ))}
diff --git a/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.test.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
similarity index 83%
rename from plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.test.tsx
rename to plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
index e8dbc5d8..2a788ea6 100644
--- a/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
@@ -3,19 +3,24 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
 import { Root } from '../CoderWorkspacesCard/Root';
-import { AccordionItem } from './AccordionItem';
+import { Disclosure } from './Disclosure';
+
+type RenderInputs = Readonly<{
+  headerText: string;
+  children: string;
+}>;
 
 function render() {
   return renderInCoderEnvironment({
     children: (
       <Root>
-        <AccordionItem />
+        <Disclosure />
       </Root>
     ),
   });
 }
 
-describe(`${AccordionItem.name}`, () => {
+describe(`${Disclosure.name}`, () => {
   it('Will toggle between showing/hiding the disclosure info when the user clicks it', async () => {
     await render();
     const user = userEvent.setup();
diff --git a/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
similarity index 92%
rename from plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.tsx
rename to plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
index f5906d59..193ecda6 100644
--- a/plugins/backstage-plugin-coder/src/components/AccordionItem/AccordionItem.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-type AccordionItemProps = Readonly<
+type Props = Readonly<
   PropsWithChildren<{
     isExpanded: boolean;
     onExpansion: () => void;
@@ -42,19 +42,19 @@ type AccordionItemProps = Readonly<
   }>
 >;
 
-export const AccordionItem = ({
+export const Disclosure = ({
   isExpanded,
   onExpansion,
   headerText,
   children,
-}: AccordionItemProps) => {
+}: Props) => {
   const styles = useStyles();
   const hookId = useId();
   const disclosureBodyId = `${hookId}-disclosure-body`;
 
   // Might be worth revisiting the markup here to try implementing this
   // functionality with <detail> and <summary> elements. Would likely clean up
-  // the component code a ton but might reduce control over screen reader output
+  // the component code a bit but might reduce control over screen reader output
   return (
     <div>
       <button

From 233d255673b1a7f6f7fa96ce36fe3dc1dcc49f9a Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 12:35:28 +0000
Subject: [PATCH 18/42] chore: update tests for Disclosure

---
 .../components/Disclosure/Disclosure.test.tsx | 64 ++++++++++++++-----
 .../src/components/Disclosure/Disclosure.tsx  | 28 +++++---
 2 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
index 2a788ea6..d49706bc 100644
--- a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
@@ -2,38 +2,70 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
-import { Root } from '../CoderWorkspacesCard/Root';
-import { Disclosure } from './Disclosure';
+import { type DisclosureProps, Disclosure } from './Disclosure';
 
-type RenderInputs = Readonly<{
-  headerText: string;
-  children: string;
-}>;
+type RenderInputs = Partial<DisclosureProps>;
+
+function render(inputs?: RenderInputs) {
+  const { headerText, children, isExpanded, onExpansion } = inputs ?? {};
 
-function render() {
   return renderInCoderEnvironment({
     children: (
-      <Root>
-        <Disclosure />
-      </Root>
+      <Disclosure
+        headerText={headerText}
+        isExpanded={isExpanded}
+        onExpansion={onExpansion}
+      >
+        {children}
+      </Disclosure>
     ),
   });
 }
 
 describe(`${Disclosure.name}`, () => {
   it('Will toggle between showing/hiding the disclosure info when the user clicks it', async () => {
-    await render();
+    const headerText = 'Blah';
+    const children = 'Blah blah blah blah';
+    await render({ headerText, children });
+
     const user = userEvent.setup();
-    const disclosureButton = screen.getByRole('button', {
-      name: /Why am I seeing all workspaces\?/,
+    const disclosureButton = screen.getByRole('button', { name: headerText });
+    await user.click(disclosureButton);
+
+    const disclosureInfo = await screen.findByText(children);
+    await user.click(disclosureButton);
+    expect(disclosureInfo).not.toBeInTheDocument();
+  });
+
+  it('Can flip from an uncontrolled input to a controlled one if additional props are passed in', async () => {
+    const headerText = 'Blah';
+    const children = 'Blah blah blah blah';
+    const onExpansion = jest.fn();
+
+    const { rerender } = await render({
+      onExpansion,
+      headerText,
+      children,
+      isExpanded: true,
     });
 
+    const user = userEvent.setup();
+    const disclosureInfo = await screen.findByText(children);
+    const disclosureButton = screen.getByRole('button', { name: headerText });
+
     await user.click(disclosureButton);
-    const disclosureInfo = await screen.findByText(
-      /This component displays all workspaces when the entity has no repo URL to filter by/,
+    expect(onExpansion).toHaveBeenCalled();
+
+    rerender(
+      <Disclosure
+        headerText={headerText}
+        onExpansion={onExpansion}
+        isExpanded={false}
+      >
+        {children}
+      </Disclosure>,
     );
 
-    await user.click(disclosureButton);
     expect(disclosureInfo).not.toBeInTheDocument();
   });
 });
diff --git a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
index 193ecda6..23fb17dd 100644
--- a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, type ReactNode } from 'react';
+import React, { useState, type PropsWithChildren, type ReactNode } from 'react';
 import { useId } from '../../hooks/hookPolyfills';
 import { makeStyles } from '@material-ui/core';
 
@@ -34,10 +34,10 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-type Props = Readonly<
+export type DisclosureProps = Readonly<
   PropsWithChildren<{
-    isExpanded: boolean;
-    onExpansion: () => void;
+    isExpanded?: boolean;
+    onExpansion?: () => void;
     headerText: ReactNode;
   }>
 >;
@@ -47,9 +47,14 @@ export const Disclosure = ({
   onExpansion,
   headerText,
   children,
-}: Props) => {
-  const styles = useStyles();
+}: DisclosureProps) => {
   const hookId = useId();
+  const styles = useStyles();
+  const [internalIsExpanded, setInternalIsExpanded] = useState(
+    isExpanded ?? false,
+  );
+
+  const activeIsExpanded = isExpanded ?? internalIsExpanded;
   const disclosureBodyId = `${hookId}-disclosure-body`;
 
   // Might be worth revisiting the markup here to try implementing this
@@ -59,18 +64,21 @@ export const Disclosure = ({
     <div>
       <button
         type="button"
-        aria-expanded={isExpanded}
+        aria-expanded={activeIsExpanded}
         aria-controls={disclosureBodyId}
-        onClick={onExpansion}
         className={styles.button}
+        onClick={() => {
+          setInternalIsExpanded(!internalIsExpanded);
+          onExpansion?.();
+        }}
       >
         <span aria-hidden className={styles.disclosureTriangle}>
-          {isExpanded ? '▼' : '►'}
+          {activeIsExpanded ? '▼' : '►'}
         </span>{' '}
         {headerText}
       </button>
 
-      {isExpanded && (
+      {activeIsExpanded && (
         <p id={disclosureBodyId} className={styles.disclosureBody}>
           {children}
         </p>

From badd8ee654ee94a45ca4b5a146c0ed5f15594e75 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 12:41:52 +0000
Subject: [PATCH 19/42] chore: remove needless hasAssertions calls

---
 .../src/components/CoderAuthWrapper/CoderAuthWrapper.test.tsx | 2 --
 .../components/CoderErrorBoundary/CoderErrorBoundary.test.tsx | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.test.tsx
index bf27a634..43199c04 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.test.tsx
@@ -166,8 +166,6 @@ describe(`${CoderAuthWrapper.name}`, () => {
 
         unmount();
       }
-
-      expect.hasAssertions();
     });
 
     it('Lets the user submit a new token', async () => {
diff --git a/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.test.tsx
index 5245cc4c..734defb0 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.test.tsx
@@ -47,8 +47,8 @@ function setupBoundaryTest(component: ReactElement) {
 describe(`${CoderErrorBoundary.name}`, () => {
   it('Displays a fallback UI when a rendering error is encountered', () => {
     setupBoundaryTest(<BrokenComponent />);
-    screen.getByText(fallbackText);
-    expect.hasAssertions();
+    const fallbackUi = screen.getByText(fallbackText);
+    expect(fallbackUi).toBeInTheDocument();
   });
 
   it('Exposes rendering errors to Backstage Error API', () => {

From e87e41e716f41a179ae676eec5f222f00eeb0d2d Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 13:11:36 +0000
Subject: [PATCH 20/42] fix: update conditional logic for ReminderAccordion

---
 .../ReminderAccordion.test.tsx                | 90 ++++++++++++++++++-
 .../CoderWorkspacesCard/ReminderAccordion.tsx | 13 +--
 2 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index 6fc4bc0d..00586512 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -1,12 +1,94 @@
-import { ReminderAccordion } from './ReminderAccordion';
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderInCoderEnvironment } from '../../testHelpers/setup';
+import {
+  type WorkspacesCardContext,
+  CardContext,
+  WorkspacesQuery,
+} from './Root';
+import {
+  type ReminderAccordionProps,
+  ReminderAccordion,
+} from './ReminderAccordion';
+import { Workspace } from '../../typesConstants';
+import { mockCoderWorkspacesConfig } from '../../testHelpers/mockBackstageData';
+
+type RenderInputs = Readonly<
+  ReminderAccordionProps & {
+    isReadingEntityData?: boolean;
+    repoUrl?: undefined | string;
+    queryData?: undefined | readonly Workspace[];
+  }
+>;
+
+function renderAccordion(inputs?: RenderInputs) {
+  const {
+    queryData = [],
+    isReadingEntityData = true,
+    showEntityReminder = true,
+    showTemplateNameReminder = true,
+    repoUrl = mockCoderWorkspacesConfig.repoUrl,
+  } = inputs ?? {};
+
+  const mockContext: WorkspacesCardContext = {
+    isReadingEntityData,
+    headerId: 'blah',
+    onFilterChange: jest.fn(),
+    queryFilter: 'blah blah blah',
+    workspacesConfig: {
+      ...mockCoderWorkspacesConfig,
+      repoUrl,
+    },
+    workspacesQuery: {
+      data: queryData,
+    } as WorkspacesQuery,
+  };
+
+  return renderInCoderEnvironment({
+    children: (
+      <CardContext.Provider value={mockContext}>
+        <ReminderAccordion
+          showEntityReminder={showEntityReminder}
+          showTemplateNameReminder={showTemplateNameReminder}
+        />
+      </CardContext.Provider>
+    ),
+  });
+}
 
 describe(`${ReminderAccordion.name}`, () => {
   it('Lets the user open a single accordion item', async () => {
-    expect.hasAssertions();
+    await renderAccordion();
+    const entityToggle = await screen.findByRole('button', {
+      name: /Why am I not seeing any workspaces\?/i,
+    });
+
+    const user = userEvent.setup();
+    await user.click(entityToggle);
+
+    const entityText = await screen.findByText(
+      /^This component only displays all workspaces when/,
+    );
+
+    expect(entityText).toBeInTheDocument();
   });
 
-  it('Will close an open accordion item when that item is clicked', async () => {
-    expect.hasAssertions();
+  it.only('Will close an open accordion item when that item is clicked', async () => {
+    await renderAccordion();
+    const entityToggle = await screen.findByRole('button', {
+      name: /Why am I not seeing any workspaces\?/i,
+    });
+
+    const user = userEvent.setup();
+    await user.click(entityToggle);
+
+    const entityText = await screen.findByText(
+      /^This component only displays all workspaces when/,
+    );
+
+    await user.click(entityToggle);
+    expect(entityText).not.toBeInTheDocument();
   });
 
   it('Will close any other open accordion items when a new item is clicked', async () => {
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index dfa138ac..44d75b0a 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
   },
 }));
 
-type Props = Readonly<{
+export type ReminderAccordionProps = Readonly<{
   showEntityReminder?: boolean;
   showTemplateNameReminder?: boolean;
 }>;
@@ -39,7 +39,7 @@ type Props = Readonly<{
 export function ReminderAccordion({
   showEntityReminder = true,
   showTemplateNameReminder = true,
-}: Props) {
+}: ReminderAccordionProps) {
   const [activeItemId, setActiveItemId] = useState<string>();
   const { isReadingEntityData, workspacesConfig, workspacesQuery } =
     useWorkspacesCardContext();
@@ -51,13 +51,13 @@ export function ReminderAccordion({
       canDisplay:
         showEntityReminder &&
         isReadingEntityData &&
-        !workspacesConfig.repoUrl &&
+        Boolean(workspacesConfig.repoUrl) &&
         workspacesQuery.data !== undefined,
       headerText: 'Why am I not seeing any workspaces?',
       bodyText: (
         <>
-          This component displays only displays all workspaces when the value of
-          the <InlineCodeSnippet>readEntityData</InlineCodeSnippet> prop is{' '}
+          This component only displays all workspaces when the value of the{' '}
+          <InlineCodeSnippet>readEntityData</InlineCodeSnippet> prop is{' '}
           <InlineCodeSnippet>false</InlineCodeSnippet>. See{' '}
           <a
             href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
@@ -74,7 +74,8 @@ export function ReminderAccordion({
     },
     {
       id: 'templateName',
-      canDisplay: showTemplateNameReminder && !workspacesConfig.creationUrl,
+      canDisplay:
+        showTemplateNameReminder && Boolean(workspacesConfig.creationUrl),
       headerText: <>Why can&apos;t I make a new workspace?</>,
       bodyText: (
         <>

From 52a273148f97a8fe656f95965425e4151e349f5e Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 13:37:18 +0000
Subject: [PATCH 21/42] fix: more accordion bug fixes

---
 .../ReminderAccordion.test.tsx                | 103 +++++++++++++-----
 .../CoderWorkspacesCard/ReminderAccordion.tsx |   5 +-
 2 files changed, 76 insertions(+), 32 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index 00586512..73a5fb78 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -18,17 +18,19 @@ type RenderInputs = Readonly<
   ReminderAccordionProps & {
     isReadingEntityData?: boolean;
     repoUrl?: undefined | string;
+    creationUrl?: undefined | string;
     queryData?: undefined | readonly Workspace[];
   }
 >;
 
 function renderAccordion(inputs?: RenderInputs) {
   const {
+    repoUrl,
+    creationUrl,
     queryData = [],
     isReadingEntityData = true,
     showEntityReminder = true,
     showTemplateNameReminder = true,
-    repoUrl = mockCoderWorkspacesConfig.repoUrl,
   } = inputs ?? {};
 
   const mockContext: WorkspacesCardContext = {
@@ -39,6 +41,7 @@ function renderAccordion(inputs?: RenderInputs) {
     workspacesConfig: {
       ...mockCoderWorkspacesConfig,
       repoUrl,
+      creationUrl,
     },
     workspacesQuery: {
       data: queryData,
@@ -57,45 +60,87 @@ function renderAccordion(inputs?: RenderInputs) {
   });
 }
 
+const matchers = {
+  toggles: {
+    entity: /Why am I not seeing any workspaces\?/i,
+    templateName: /Why can't I make a new workspace\?/,
+  },
+  bodyText: {
+    entity: /^This component only displays all workspaces when/,
+    templateName:
+      /^This component cannot make a new workspace without a template name value/,
+  },
+} as const satisfies Record<string, Record<string, RegExp>>;
+
 describe(`${ReminderAccordion.name}`, () => {
-  it('Lets the user open a single accordion item', async () => {
-    await renderAccordion();
-    const entityToggle = await screen.findByRole('button', {
-      name: /Why am I not seeing any workspaces\?/i,
-    });
+  describe('General behavior', () => {
+    it('Lets the user open a single accordion item', async () => {
+      await renderAccordion({ repoUrl: undefined });
+      const entityToggle = await screen.findByRole('button', {
+        name: matchers.toggles.entity,
+      });
 
-    const user = userEvent.setup();
-    await user.click(entityToggle);
+      const user = userEvent.setup();
+      await user.click(entityToggle);
 
-    const entityText = await screen.findByText(
-      /^This component only displays all workspaces when/,
-    );
+      const entityText = await screen.findByText(matchers.bodyText.entity);
+      expect(entityText).toBeInTheDocument();
+    });
 
-    expect(entityText).toBeInTheDocument();
-  });
+    it('Will close an open accordion item when that item is clicked', async () => {
+      await renderAccordion({ repoUrl: undefined });
+      const entityToggle = await screen.findByRole('button', {
+        name: matchers.toggles.entity,
+      });
 
-  it.only('Will close an open accordion item when that item is clicked', async () => {
-    await renderAccordion();
-    const entityToggle = await screen.findByRole('button', {
-      name: /Why am I not seeing any workspaces\?/i,
+      const user = userEvent.setup();
+      await user.click(entityToggle);
+
+      const entityText = await screen.findByText(matchers.bodyText.entity);
+      await user.click(entityToggle);
+      expect(entityText).not.toBeInTheDocument();
     });
 
-    const user = userEvent.setup();
-    await user.click(entityToggle);
+    it('Only lets one accordion item be open at a time', async () => {
+      await renderAccordion({
+        repoUrl: undefined,
+        creationUrl: undefined,
+      });
 
-    const entityText = await screen.findByText(
-      /^This component only displays all workspaces when/,
-    );
+      const entityToggle = await screen.findByRole('button', {
+        name: matchers.toggles.entity,
+      });
+      const templateNameToggle = await screen.findByRole('button', {
+        name: matchers.toggles.templateName,
+      });
 
-    await user.click(entityToggle);
-    expect(entityText).not.toBeInTheDocument();
-  });
+      const user = userEvent.setup();
+      await user.click(entityToggle);
+
+      const entityText = await screen.findByText(matchers.bodyText.entity);
+      expect(entityText).toBeInTheDocument();
 
-  it('Will close any other open accordion items when a new item is clicked', async () => {
-    expect.hasAssertions();
+      await user.click(templateNameToggle);
+      expect(entityText).not.toBeInTheDocument();
+
+      const templateText = await screen.findByText(
+        matchers.bodyText.templateName,
+      );
+      expect(templateText).toBeInTheDocument();
+    });
   });
 
-  it('Lets the user conditionally hide accordion items based on props', async () => {
-    expect.hasAssertions();
+  describe('Conditionally displaying items', () => {
+    it('Lets the user conditionally hide accordion items based on props', async () => {
+      expect.hasAssertions();
+    });
+
+    it('Will only display the entity data reminder when appropriate', async () => {
+      expect.hasAssertions();
+    });
+
+    it('Will only display the template name data reminder when appropriate', async () => {
+      expect.hasAssertions();
+    });
   });
 });
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index 44d75b0a..fd5cfeab 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -51,7 +51,7 @@ export function ReminderAccordion({
       canDisplay:
         showEntityReminder &&
         isReadingEntityData &&
-        Boolean(workspacesConfig.repoUrl) &&
+        !workspacesConfig.repoUrl &&
         workspacesQuery.data !== undefined,
       headerText: 'Why am I not seeing any workspaces?',
       bodyText: (
@@ -74,8 +74,7 @@ export function ReminderAccordion({
     },
     {
       id: 'templateName',
-      canDisplay:
-        showTemplateNameReminder && Boolean(workspacesConfig.creationUrl),
+      canDisplay: showTemplateNameReminder && !workspacesConfig.creationUrl,
       headerText: <>Why can&apos;t I make a new workspace?</>,
       bodyText: (
         <>

From c45e132c0d985ad08d9b759e5179b8dadc8fa198 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 13:45:13 +0000
Subject: [PATCH 22/42] chore: finish another test case

---
 .../ReminderAccordion.test.tsx                | 40 ++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index 73a5fb78..90f85e67 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -75,7 +75,7 @@ const matchers = {
 describe(`${ReminderAccordion.name}`, () => {
   describe('General behavior', () => {
     it('Lets the user open a single accordion item', async () => {
-      await renderAccordion({ repoUrl: undefined });
+      await renderAccordion();
       const entityToggle = await screen.findByRole('button', {
         name: matchers.toggles.entity,
       });
@@ -88,7 +88,7 @@ describe(`${ReminderAccordion.name}`, () => {
     });
 
     it('Will close an open accordion item when that item is clicked', async () => {
-      await renderAccordion({ repoUrl: undefined });
+      await renderAccordion();
       const entityToggle = await screen.findByRole('button', {
         name: matchers.toggles.entity,
       });
@@ -102,11 +102,7 @@ describe(`${ReminderAccordion.name}`, () => {
     });
 
     it('Only lets one accordion item be open at a time', async () => {
-      await renderAccordion({
-        repoUrl: undefined,
-        creationUrl: undefined,
-      });
-
+      await renderAccordion();
       const entityToggle = await screen.findByRole('button', {
         name: matchers.toggles.entity,
       });
@@ -132,10 +128,36 @@ describe(`${ReminderAccordion.name}`, () => {
 
   describe('Conditionally displaying items', () => {
     it('Lets the user conditionally hide accordion items based on props', async () => {
-      expect.hasAssertions();
+      type Configuration = Readonly<{
+        props: ReminderAccordionProps;
+        expectedItemCount: number;
+      }>;
+
+      const configurations: readonly Configuration[] = [
+        {
+          expectedItemCount: 0,
+          props: { showEntityReminder: false, showTemplateNameReminder: false },
+        },
+        {
+          expectedItemCount: 1,
+          props: { showEntityReminder: false, showTemplateNameReminder: true },
+        },
+        {
+          expectedItemCount: 1,
+          props: { showEntityReminder: true, showTemplateNameReminder: false },
+        },
+      ];
+
+      for (const config of configurations) {
+        const { unmount } = await renderAccordion(config.props);
+        const accordionItems = screen.queryAllByRole('button');
+
+        expect(accordionItems.length).toBe(config.expectedItemCount);
+        unmount();
+      }
     });
 
-    it('Will only display the entity data reminder when appropriate', async () => {
+    it.only('Will only display the entity data reminder when appropriate', async () => {
       expect.hasAssertions();
     });
 

From 0680934d18348ff831779d148a585d62faa2e231 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 13:51:15 +0000
Subject: [PATCH 23/42] chore: add another accordion test case

---
 .../ReminderAccordion.test.tsx                   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index 90f85e67..08db8191 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -157,11 +157,21 @@ describe(`${ReminderAccordion.name}`, () => {
       }
     });
 
-    it.only('Will only display the entity data reminder when appropriate', async () => {
-      expect.hasAssertions();
+    it.only('Will NOT display the template name reminder if there is a creation URL', async () => {
+      await renderAccordion({
+        creationUrl: mockCoderWorkspacesConfig.creationUrl,
+        showTemplateNameReminder: true,
+      });
+
+      const templateToggle = screen.queryByRole('button', {
+        name: matchers.toggles.templateName,
+      });
+
+      console.log('Be sure to rename the show props to canShow!');
+      expect(templateToggle).not.toBeInTheDocument();
     });
 
-    it('Will only display the template name data reminder when appropriate', async () => {
+    it('Will only display the entity data reminder when appropriate', async () => {
       expect.hasAssertions();
     });
   });

From 7ba9fcedb97f6d1b160272a9ea0dfa07584a6fde Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 13:53:10 +0000
Subject: [PATCH 24/42] refactor: rename props for clarity

---
 .../ReminderAccordion.test.tsx                | 30 ++++++++++++-------
 .../CoderWorkspacesCard/ReminderAccordion.tsx | 12 ++++----
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index 08db8191..f47914bc 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -29,8 +29,8 @@ function renderAccordion(inputs?: RenderInputs) {
     creationUrl,
     queryData = [],
     isReadingEntityData = true,
-    showEntityReminder = true,
-    showTemplateNameReminder = true,
+    canShowEntityReminder = true,
+    canShowTemplateNameReminder = true,
   } = inputs ?? {};
 
   const mockContext: WorkspacesCardContext = {
@@ -52,8 +52,8 @@ function renderAccordion(inputs?: RenderInputs) {
     children: (
       <CardContext.Provider value={mockContext}>
         <ReminderAccordion
-          showEntityReminder={showEntityReminder}
-          showTemplateNameReminder={showTemplateNameReminder}
+          canShowEntityReminder={canShowEntityReminder}
+          canShowTemplateNameReminder={canShowTemplateNameReminder}
         />
       </CardContext.Provider>
     ),
@@ -136,15 +136,24 @@ describe(`${ReminderAccordion.name}`, () => {
       const configurations: readonly Configuration[] = [
         {
           expectedItemCount: 0,
-          props: { showEntityReminder: false, showTemplateNameReminder: false },
+          props: {
+            canShowEntityReminder: false,
+            canShowTemplateNameReminder: false,
+          },
         },
         {
           expectedItemCount: 1,
-          props: { showEntityReminder: false, showTemplateNameReminder: true },
+          props: {
+            canShowEntityReminder: false,
+            canShowTemplateNameReminder: true,
+          },
         },
         {
           expectedItemCount: 1,
-          props: { showEntityReminder: true, showTemplateNameReminder: false },
+          props: {
+            canShowEntityReminder: true,
+            canShowTemplateNameReminder: false,
+          },
         },
       ];
 
@@ -157,21 +166,20 @@ describe(`${ReminderAccordion.name}`, () => {
       }
     });
 
-    it.only('Will NOT display the template name reminder if there is a creation URL', async () => {
+    it('Will NOT display the template name reminder if there is a creation URL', async () => {
       await renderAccordion({
         creationUrl: mockCoderWorkspacesConfig.creationUrl,
-        showTemplateNameReminder: true,
+        canShowTemplateNameReminder: true,
       });
 
       const templateToggle = screen.queryByRole('button', {
         name: matchers.toggles.templateName,
       });
 
-      console.log('Be sure to rename the show props to canShow!');
       expect(templateToggle).not.toBeInTheDocument();
     });
 
-    it('Will only display the entity data reminder when appropriate', async () => {
+    it.only('Will only display the entity data reminder when appropriate', async () => {
       expect.hasAssertions();
     });
   });
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index fd5cfeab..bde4c4a3 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -32,13 +32,13 @@ const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
 }));
 
 export type ReminderAccordionProps = Readonly<{
-  showEntityReminder?: boolean;
-  showTemplateNameReminder?: boolean;
+  canShowEntityReminder?: boolean;
+  canShowTemplateNameReminder?: boolean;
 }>;
 
 export function ReminderAccordion({
-  showEntityReminder = true,
-  showTemplateNameReminder = true,
+  canShowEntityReminder = true,
+  canShowTemplateNameReminder = true,
 }: ReminderAccordionProps) {
   const [activeItemId, setActiveItemId] = useState<string>();
   const { isReadingEntityData, workspacesConfig, workspacesQuery } =
@@ -49,7 +49,7 @@ export function ReminderAccordion({
     {
       id: 'entity',
       canDisplay:
-        showEntityReminder &&
+        canShowEntityReminder &&
         isReadingEntityData &&
         !workspacesConfig.repoUrl &&
         workspacesQuery.data !== undefined,
@@ -74,7 +74,7 @@ export function ReminderAccordion({
     },
     {
       id: 'templateName',
-      canDisplay: showTemplateNameReminder && !workspacesConfig.creationUrl,
+      canDisplay: canShowTemplateNameReminder && !workspacesConfig.creationUrl,
       headerText: <>Why can&apos;t I make a new workspace?</>,
       bodyText: (
         <>

From 14c4d860e4b1ea78c86288161f720005ec7c1c82 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 13:56:53 +0000
Subject: [PATCH 25/42] refactor: simplify condition for entity reminder

---
 .../CoderWorkspacesCard/ReminderAccordion.test.tsx          | 6 ++++++
 .../components/CoderWorkspacesCard/ReminderAccordion.tsx    | 3 +--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index f47914bc..cb83dda4 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -179,6 +179,12 @@ describe(`${ReminderAccordion.name}`, () => {
       expect(templateToggle).not.toBeInTheDocument();
     });
 
+    /**
+     * Assuming that the user hasn't disabled showing the reminder at all, it
+     * will only appear when:
+     * 1. The component is set up to read entity data
+     * 2. There is no repo URL that could be parsed from the entity data
+     */
     it.only('Will only display the entity data reminder when appropriate', async () => {
       expect.hasAssertions();
     });
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index bde4c4a3..bb49268c 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -51,8 +51,7 @@ export function ReminderAccordion({
       canDisplay:
         canShowEntityReminder &&
         isReadingEntityData &&
-        !workspacesConfig.repoUrl &&
-        workspacesQuery.data !== undefined,
+        !workspacesConfig.repoUrl,
       headerText: 'Why am I not seeing any workspaces?',
       bodyText: (
         <>

From 8f5081e0cb54babd949dd8de3c92e868f7dd00da Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 14:56:38 +0000
Subject: [PATCH 26/42] refactor: update prop for Disclosure

---
 .../components/Disclosure/Disclosure.test.tsx | 39 +++++++++----------
 .../src/components/Disclosure/Disclosure.tsx  |  6 +--
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
index d49706bc..09894e48 100644
--- a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.test.tsx
@@ -1,32 +1,29 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderInCoderEnvironment } from '../../testHelpers/setup';
 import { type DisclosureProps, Disclosure } from './Disclosure';
 
 type RenderInputs = Partial<DisclosureProps>;
 
-function render(inputs?: RenderInputs) {
-  const { headerText, children, isExpanded, onExpansion } = inputs ?? {};
+function renderDisclosure(inputs?: RenderInputs) {
+  const { headerText, children, isExpanded, onExpansionToggle } = inputs ?? {};
 
-  return renderInCoderEnvironment({
-    children: (
-      <Disclosure
-        headerText={headerText}
-        isExpanded={isExpanded}
-        onExpansion={onExpansion}
-      >
-        {children}
-      </Disclosure>
-    ),
-  });
+  return render(
+    <Disclosure
+      headerText={headerText}
+      isExpanded={isExpanded}
+      onExpansionToggle={onExpansionToggle}
+    >
+      {children}
+    </Disclosure>,
+  );
 }
 
 describe(`${Disclosure.name}`, () => {
   it('Will toggle between showing/hiding the disclosure info when the user clicks it', async () => {
     const headerText = 'Blah';
     const children = 'Blah blah blah blah';
-    await render({ headerText, children });
+    renderDisclosure({ headerText, children });
 
     const user = userEvent.setup();
     const disclosureButton = screen.getByRole('button', { name: headerText });
@@ -40,10 +37,10 @@ describe(`${Disclosure.name}`, () => {
   it('Can flip from an uncontrolled input to a controlled one if additional props are passed in', async () => {
     const headerText = 'Blah';
     const children = 'Blah blah blah blah';
-    const onExpansion = jest.fn();
+    const onExpansionToggle = jest.fn();
 
-    const { rerender } = await render({
-      onExpansion,
+    const { rerender } = renderDisclosure({
+      onExpansionToggle,
       headerText,
       children,
       isExpanded: true,
@@ -54,12 +51,12 @@ describe(`${Disclosure.name}`, () => {
     const disclosureButton = screen.getByRole('button', { name: headerText });
 
     await user.click(disclosureButton);
-    expect(onExpansion).toHaveBeenCalled();
+    expect(onExpansionToggle).toHaveBeenCalled();
 
     rerender(
       <Disclosure
         headerText={headerText}
-        onExpansion={onExpansion}
+        onExpansionToggle={onExpansionToggle}
         isExpanded={false}
       >
         {children}
diff --git a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
index 23fb17dd..686f7656 100644
--- a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
@@ -37,14 +37,14 @@ const useStyles = makeStyles(theme => ({
 export type DisclosureProps = Readonly<
   PropsWithChildren<{
     isExpanded?: boolean;
-    onExpansion?: () => void;
+    onExpansionToggle?: () => void;
     headerText: ReactNode;
   }>
 >;
 
 export const Disclosure = ({
   isExpanded,
-  onExpansion,
+  onExpansionToggle,
   headerText,
   children,
 }: DisclosureProps) => {
@@ -69,7 +69,7 @@ export const Disclosure = ({
         className={styles.button}
         onClick={() => {
           setInternalIsExpanded(!internalIsExpanded);
-          onExpansion?.();
+          onExpansionToggle?.();
         }}
       >
         <span aria-hidden className={styles.disclosureTriangle}>

From 11b7b81acc3c61e14e5c9309d76484eba3836626 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 15:26:52 +0000
Subject: [PATCH 27/42] chore: finish all tests for accordion

---
 .../ReminderAccordion.test.tsx                | 50 +++++++++++++++++--
 .../CoderWorkspacesCard/ReminderAccordion.tsx |  2 +-
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index cb83dda4..ee2fddad 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -181,12 +181,56 @@ describe(`${ReminderAccordion.name}`, () => {
 
     /**
      * Assuming that the user hasn't disabled showing the reminder at all, it
-     * will only appear when:
+     * will only appear when both of these are true:
      * 1. The component is set up to read entity data
      * 2. There is no repo URL that could be parsed from the entity data
      */
-    it.only('Will only display the entity data reminder when appropriate', async () => {
-      expect.hasAssertions();
+    it('Will only display the entity data reminder when appropriate', async () => {
+      type Config = Readonly<{
+        isReadingEntityData: boolean;
+        repoUrl: string | undefined;
+      }>;
+
+      const doNotDisplayConfigs: readonly Config[] = [
+        {
+          isReadingEntityData: false,
+          repoUrl: mockCoderWorkspacesConfig.repoUrl,
+        },
+        {
+          isReadingEntityData: false,
+          repoUrl: undefined,
+        },
+        {
+          isReadingEntityData: true,
+          repoUrl: mockCoderWorkspacesConfig.repoUrl,
+        },
+      ];
+
+      for (const config of doNotDisplayConfigs) {
+        const { unmount } = await renderAccordion({
+          isReadingEntityData: config.isReadingEntityData,
+          repoUrl: config.repoUrl,
+        });
+
+        const entityToggle = screen.queryByRole('button', {
+          name: matchers.toggles.entity,
+        });
+
+        expect(entityToggle).not.toBeInTheDocument();
+        unmount();
+      }
+
+      // Verify that toggle appears only this one time
+      await renderAccordion({
+        isReadingEntityData: true,
+        repoUrl: undefined,
+      });
+
+      const entityToggle = await screen.findByRole('button', {
+        name: matchers.toggles.entity,
+      });
+
+      expect(entityToggle).toBeInTheDocument();
     });
   });
 });
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index bb49268c..bd2dc441 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -105,7 +105,7 @@ export function ReminderAccordion({
             <Disclosure
               headerText={headerText}
               isExpanded={id === activeItemId}
-              onExpansion={() => toggleAccordionGroup(id)}
+              onExpansionToggle={() => toggleAccordionGroup(id)}
             >
               {bodyText}
             </Disclosure>

From cb2664e57c4dfb764c8844f0ca229ce05c9ccce9 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 15:36:41 +0000
Subject: [PATCH 28/42] refactor: update type definition for mock config

---
 .../src/testHelpers/mockBackstageData.ts                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts b/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
index 875d6ce5..4235bfd8 100644
--- a/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
+++ b/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
@@ -99,7 +99,7 @@ export const mockAppConfig = {
   },
 } as const satisfies CoderAppConfig;
 
-export const mockCoderWorkspacesConfig: CoderWorkspacesConfig = (() => {
+export const mockCoderWorkspacesConfig = (() => {
   const urlParams = new URLSearchParams({
     mode: mockYamlConfig.mode,
     'param.repo': mockAppConfig.workspaces.params.repo,
@@ -124,7 +124,7 @@ export const mockCoderWorkspacesConfig: CoderWorkspacesConfig = (() => {
       custom_repo: cleanedRepoUrl,
       repo_url: cleanedRepoUrl,
     },
-  };
+  } as const satisfies CoderWorkspacesConfig;
 })();
 
 const authedState = {

From 41d6f20ab3729d6e969d610a25c9468b8421f83a Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 15:37:02 +0000
Subject: [PATCH 29/42] refactor: polish up accordion tests

---
 .../CoderWorkspacesCard/ReminderAccordion.test.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index ee2fddad..5f6cf59f 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
+import type { Workspace } from '../../typesConstants';
+import { mockCoderWorkspacesConfig } from '../../testHelpers/mockBackstageData';
 import {
   type WorkspacesCardContext,
+  type WorkspacesQuery,
   CardContext,
-  WorkspacesQuery,
 } from './Root';
 import {
   type ReminderAccordionProps,
   ReminderAccordion,
 } from './ReminderAccordion';
-import { Workspace } from '../../typesConstants';
-import { mockCoderWorkspacesConfig } from '../../testHelpers/mockBackstageData';
 
 type RenderInputs = Readonly<
   ReminderAccordionProps & {

From b3b83f05c872474c6b85812c6813bde737847ebb Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 15:45:08 +0000
Subject: [PATCH 30/42] chore: finish up all tests

---
 .../WorkspacesList.test.tsx                   | 30 +++++++++++++++----
 .../CoderWorkspacesCard/WorkspacesList.tsx    |  4 +--
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
index 92ab025b..abc298fc 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
@@ -10,18 +10,22 @@ import { screen } from '@testing-library/react';
 type RenderInputs = Readonly<{
   workspacesQuery: Partial<WorkspacesQuery>;
   renderListItem?: WorkspacesListProps['renderListItem'];
+  repoUrl?: string;
 }>;
 
 function renderWorkspacesList(inputs?: RenderInputs) {
-  const { renderListItem, workspacesQuery } = inputs ?? {};
+  const { renderListItem, workspacesQuery, repoUrl } = inputs ?? {};
 
   const mockContext: WorkspacesCardContext = {
     isReadingEntityData: true,
     headerId: "Doesn't matter",
     queryFilter: "Also doesn't matter",
     onFilterChange: jest.fn(),
-    workspacesConfig: mockCoderWorkspacesConfig,
     workspacesQuery: workspacesQuery as WorkspacesQuery,
+    workspacesConfig: {
+      ...mockCoderWorkspacesConfig,
+      repoUrl,
+    },
   };
 
   return renderInCoderEnvironment({
@@ -39,8 +43,8 @@ function renderWorkspacesList(inputs?: RenderInputs) {
 describe(`${WorkspacesList.name}`, () => {
   it('Allows the user to provide their own callback for iterating through each item', async () => {
     const workspaceNames = ['dog', 'cat', 'bird'];
-
     await renderWorkspacesList({
+      repoUrl: mockCoderWorkspacesConfig.repoUrl,
       workspacesQuery: {
         data: workspaceNames.map<Workspace>((name, index) => ({
           ...mockWorkspaceWithMatch,
@@ -65,7 +69,23 @@ describe(`${WorkspacesList.name}`, () => {
     }
   });
 
-  it('Does not display the call-to-action button for making new workspaces when there is no workspace creation URL', async () => {
-    expect.hasAssertions();
+  it('Displays the call-to-action link for making new workspaces when nothing is loading, but there is no data', async () => {
+    await renderWorkspacesList({
+      repoUrl: mockCoderWorkspacesConfig.repoUrl,
+      workspacesQuery: { data: [] },
+    });
+
+    const ctaLink = screen.getByRole('link', { name: /Create workspace/ });
+    expect(ctaLink).toBeInTheDocument();
+  });
+
+  it('Does NOT display the call-to-action link for making new workspaces when there is no workspace creation URL', async () => {
+    await renderWorkspacesList({
+      repoUrl: undefined,
+      workspacesQuery: { data: [] },
+    });
+
+    const ctaLink = screen.queryByRole('link', { name: /Create workspace/ });
+    expect(ctaLink).not.toBeInTheDocument();
   });
 });
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx
index a9293dab..1e47b08a 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.tsx
@@ -99,10 +99,10 @@ export const WorkspacesList = ({
           {emptyState ?? (
             <Placeholder displayCta={Boolean(repoUrl)}>
               {repoUrl ? (
-                <div style={{ textAlign: 'center' }}>
+                <span style={{ display: 'block', textAlign: 'center' }}>
                   No workspaces found for repo
                   <code className={styles.code}>{repoUrl}</code>
-                </div>
+                </span>
               ) : (
                 <>No workspaces returned for your query</>
               )}

From b6c8dec0844c78bebcfdc339adaaac9c12906338 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 15:49:51 +0000
Subject: [PATCH 31/42] fix: add missing property to mock setup to help
 compiler pass

---
 .../src/components/CoderWorkspacesCard/SearchBox.test.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx
index ecb31bb7..368965e8 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx
@@ -31,6 +31,7 @@ async function renderSearchBox(input?: RenderInputs) {
   const mockContext: WorkspacesCardContext = {
     onFilterChange,
     queryFilter,
+    isReadingEntityData: true,
     headerId: "Doesn't matter",
     workspacesConfig: mockCoderWorkspacesConfig,
     workspacesQuery:

From ff531b8766d51b93d27e0ba57c52265d0c23a97c Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 18:41:06 +0000
Subject: [PATCH 32/42] refactor: move isReadingEntityData property to
 workspaces config

---
 .../CreateWorkspaceLink.test.tsx                  | 12 ++----------
 .../ExtraActionsButton.test.tsx                   | 15 +++++----------
 .../ReminderAccordion.test.tsx                    |  9 +++------
 .../CoderWorkspacesCard/ReminderAccordion.tsx     |  5 ++---
 .../src/components/CoderWorkspacesCard/Root.tsx   |  5 -----
 .../CoderWorkspacesCard/SearchBox.test.tsx        | 10 ++--------
 .../CoderWorkspacesCard/WorkspacesList.test.tsx   |  9 ++-------
 .../src/hooks/useCoderWorkspacesConfig.test.ts    |  1 +
 .../src/hooks/useCoderWorkspacesConfig.ts         |  2 ++
 .../src/testHelpers/mockBackstageData.ts          |  1 +
 10 files changed, 20 insertions(+), 49 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
index 23e1659d..1ae49623 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
@@ -24,21 +24,13 @@ function render(inputs?: RenderInputs) {
       : undefined,
   };
 
-  const mockContextValue: WorkspacesCardContext = {
+  const mockContextValue: Partial<WorkspacesCardContext> = {
     workspacesConfig: mockWorkspacesConfig,
-
-    // Everything below this comment doesn't matter for the test logic
-    isReadingEntityData: false,
-    headerId: "Doesn't matter",
-    queryFilter: "Also doesn't matter",
-    onFilterChange: jest.fn(),
-    workspacesQuery:
-      null as unknown as WorkspacesCardContext['workspacesQuery'],
   };
 
   return renderInCoderEnvironment({
     children: (
-      <CardContext.Provider value={mockContextValue}>
+      <CardContext.Provider value={mockContextValue as WorkspacesCardContext}>
         <CreateWorkspaceLink />
       </CardContext.Provider>
     ),
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx
index 96ded1d6..008d931a 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx
@@ -39,22 +39,17 @@ async function renderButton({ buttonText }: RenderInputs) {
    * @todo Research how to test dependencies on useQuery
    */
   const refetch = jest.fn();
-  const mockWorkspacesQuery = {
-    refetch,
-  } as unknown as WorkspacesCardContext['workspacesQuery'];
-  const mockContext: WorkspacesCardContext = {
-    isReadingEntityData: true,
-    headerId: "Doesn't matter",
-    queryFilter: "Doesn't matter",
-    onFilterChange: jest.fn(),
+  const mockContext: Partial<WorkspacesCardContext> = {
     workspacesConfig: mockCoderWorkspacesConfig,
-    workspacesQuery: mockWorkspacesQuery,
+    workspacesQuery: {
+      refetch,
+    } as unknown as WorkspacesCardContext['workspacesQuery'],
   };
 
   const renderOutput = await renderInCoderEnvironment({
     auth,
     children: (
-      <CardContext.Provider value={mockContext}>
+      <CardContext.Provider value={mockContext as WorkspacesCardContext}>
         <ExtraActionsButton tooltipText={buttonText} />
       </CardContext.Provider>
     ),
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
index 5f6cf59f..0ae1d918 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx
@@ -33,15 +33,12 @@ function renderAccordion(inputs?: RenderInputs) {
     canShowTemplateNameReminder = true,
   } = inputs ?? {};
 
-  const mockContext: WorkspacesCardContext = {
-    isReadingEntityData,
-    headerId: 'blah',
-    onFilterChange: jest.fn(),
-    queryFilter: 'blah blah blah',
+  const mockContext: Partial<WorkspacesCardContext> = {
     workspacesConfig: {
       ...mockCoderWorkspacesConfig,
       repoUrl,
       creationUrl,
+      isReadingEntityData,
     },
     workspacesQuery: {
       data: queryData,
@@ -50,7 +47,7 @@ function renderAccordion(inputs?: RenderInputs) {
 
   return renderInCoderEnvironment({
     children: (
-      <CardContext.Provider value={mockContext}>
+      <CardContext.Provider value={mockContext as WorkspacesCardContext}>
         <ReminderAccordion
           canShowEntityReminder={canShowEntityReminder}
           canShowTemplateNameReminder={canShowTemplateNameReminder}
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index bd2dc441..ade746a8 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -41,8 +41,7 @@ export function ReminderAccordion({
   canShowTemplateNameReminder = true,
 }: ReminderAccordionProps) {
   const [activeItemId, setActiveItemId] = useState<string>();
-  const { isReadingEntityData, workspacesConfig, workspacesQuery } =
-    useWorkspacesCardContext();
+  const { workspacesConfig, workspacesQuery } = useWorkspacesCardContext();
   const styles = useStyles({ hasData: workspacesQuery.data !== undefined });
 
   const accordionData: readonly AccordionItemInfo[] = [
@@ -50,7 +49,7 @@ export function ReminderAccordion({
       id: 'entity',
       canDisplay:
         canShowEntityReminder &&
-        isReadingEntityData &&
+        workspacesConfig.isReadingEntityData &&
         !workspacesConfig.repoUrl,
       headerText: 'Why am I not seeing any workspaces?',
       bodyText: (
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
index 70a64df3..25845c7f 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
@@ -1,9 +1,6 @@
 /**
  * @file Wires up all the core logic for passing values down to the
  * sub-components in the same directory.
- *
- * Does not need any tests – test functionality covered by integration tests in
- * CoderWorkspacesCard
  */
 import React, {
   type HTMLAttributes,
@@ -26,7 +23,6 @@ import { CoderAuthWrapper } from '../CoderAuthWrapper';
 export type WorkspacesQuery = UseQueryResult<readonly Workspace[]>;
 
 export type WorkspacesCardContext = Readonly<{
-  isReadingEntityData: boolean;
   queryFilter: string;
   onFilterChange: (newFilter: string) => void;
   workspacesQuery: WorkspacesQuery;
@@ -75,7 +71,6 @@ export const Root = ({
           headerId,
           workspacesQuery,
           workspacesConfig,
-          isReadingEntityData: readEntityData,
           queryFilter: activeFilter,
           onFilterChange: newFilter => {
             setInnerFilter(newFilter);
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx
index 368965e8..a0894946 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/SearchBox.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { renderInCoderEnvironment } from '../../testHelpers/setup';
 import { CardContext, WorkspacesCardContext } from './Root';
 import { SearchBox } from './SearchBox';
-import { mockCoderWorkspacesConfig } from '../../testHelpers/mockBackstageData';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -28,19 +27,14 @@ async function renderSearchBox(input?: RenderInputs) {
   const { queryFilter = 'owner:me' } = input ?? {};
   const onFilterChange = jest.fn();
 
-  const mockContext: WorkspacesCardContext = {
+  const mockContext: Partial<WorkspacesCardContext> = {
     onFilterChange,
     queryFilter,
-    isReadingEntityData: true,
-    headerId: "Doesn't matter",
-    workspacesConfig: mockCoderWorkspacesConfig,
-    workspacesQuery:
-      null as unknown as WorkspacesCardContext['workspacesQuery'],
   };
 
   const renderOutput = await renderInCoderEnvironment({
     children: (
-      <CardContext.Provider value={mockContext}>
+      <CardContext.Provider value={mockContext as WorkspacesCardContext}>
         <SearchBox />
       </CardContext.Provider>
     ),
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
index abc298fc..50bc1de1 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/WorkspacesList.test.tsx
@@ -15,12 +15,7 @@ type RenderInputs = Readonly<{
 
 function renderWorkspacesList(inputs?: RenderInputs) {
   const { renderListItem, workspacesQuery, repoUrl } = inputs ?? {};
-
-  const mockContext: WorkspacesCardContext = {
-    isReadingEntityData: true,
-    headerId: "Doesn't matter",
-    queryFilter: "Also doesn't matter",
-    onFilterChange: jest.fn(),
+  const mockContext: Partial<WorkspacesCardContext> = {
     workspacesQuery: workspacesQuery as WorkspacesQuery,
     workspacesConfig: {
       ...mockCoderWorkspacesConfig,
@@ -30,7 +25,7 @@ function renderWorkspacesList(inputs?: RenderInputs) {
 
   return renderInCoderEnvironment({
     children: (
-      <CardContext.Provider value={mockContext}>
+      <CardContext.Provider value={mockContext as WorkspacesCardContext}>
         <WorkspacesList renderListItem={renderListItem} />
       </CardContext.Provider>
     ),
diff --git a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.test.ts b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.test.ts
index 8e189225..bfd079b5 100644
--- a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.test.ts
+++ b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.test.ts
@@ -111,6 +111,7 @@ describe(`${useCoderWorkspacesConfig.name}`, () => {
     );
 
     expect(result.current).toEqual<CoderWorkspacesConfig>({
+      isReadingEntityData: true,
       mode: mockYamlConfig.mode,
       repoUrl: cleanedRepoUrl,
       creationUrl: mockCoderWorkspacesConfig.creationUrl,
diff --git a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
index e084ab9e..67bbb556 100644
--- a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
+++ b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspacesConfig.ts
@@ -67,6 +67,7 @@ export type CoderWorkspacesConfig =
   // Was originally defined in terms of fancy mapped types based on YamlConfig;
   // ended up being a bad idea, because it increased coupling in a bad way
   Readonly<{
+    isReadingEntityData: boolean;
     creationUrl?: string;
     templateName?: string;
     repoUrlParamKeys: readonly string[];
@@ -135,6 +136,7 @@ export function compileCoderConfig(
     creationUrl,
     templateName,
     repoUrl: cleanedRepoUrl,
+    isReadingEntityData: yamlConfig !== undefined,
     repoUrlParamKeys: workspaces.repoUrlParamKeys,
     params: compiledParams,
   };
diff --git a/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts b/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
index 4235bfd8..049050cc 100644
--- a/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
+++ b/plugins/backstage-plugin-coder/src/testHelpers/mockBackstageData.ts
@@ -110,6 +110,7 @@ export const mockCoderWorkspacesConfig = (() => {
 
   return {
     mode: 'auto',
+    isReadingEntityData: true,
     templateName: mockYamlConfig.templateName,
     repoUrlParamKeys: ['custom_repo', 'repo_url'],
     repoUrl: cleanedRepoUrl,

From 352352fede4e65f26705d0a9dd3a5d80018db545 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 19:16:15 +0000
Subject: [PATCH 33/42] fix: add overflow-y and max height behavior to
 accordion

---
 .../CoderWorkspacesCard/ReminderAccordion.tsx | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index ade746a8..2fa82f66 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -12,7 +12,7 @@ type AccordionItemInfo = Readonly<{
   bodyText: ReactNode;
 }>;
 
-type StyleKeys = 'root' | 'link';
+type StyleKeys = 'root' | 'link' | 'innerPadding';
 type StyleInputs = Readonly<{
   hasData: boolean;
 }>;
@@ -20,9 +20,19 @@ type StyleInputs = Readonly<{
 const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
   root: ({ hasData }) => ({
     paddingTop: theme.spacing(1),
+    marginLeft: `-${theme.spacing(2)}px`,
+    marginRight: `-${theme.spacing(2)}px`,
     borderTop: hasData ? 'none' : `1px solid ${theme.palette.divider}`,
+    maxHeight: '240px',
+    overflowX: 'hidden',
+    overflowY: 'auto',
   }),
 
+  innerPadding: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+
   link: {
     color: theme.palette.link,
     '&:hover': {
@@ -98,19 +108,21 @@ export function ReminderAccordion({
 
   return (
     <div role="group" className={styles.root}>
-      {accordionData.map(({ id, canDisplay, headerText, bodyText }) => (
-        <Fragment key={id}>
-          {canDisplay && (
-            <Disclosure
-              headerText={headerText}
-              isExpanded={id === activeItemId}
-              onExpansionToggle={() => toggleAccordionGroup(id)}
-            >
-              {bodyText}
-            </Disclosure>
-          )}
-        </Fragment>
-      ))}
+      <div className={styles.innerPadding}>
+        {accordionData.map(({ id, canDisplay, headerText, bodyText }) => (
+          <Fragment key={id}>
+            {canDisplay && (
+              <Disclosure
+                headerText={headerText}
+                isExpanded={id === activeItemId}
+                onExpansionToggle={() => toggleAccordionGroup(id)}
+              >
+                {bodyText}
+              </Disclosure>
+            )}
+          </Fragment>
+        ))}
+      </div>
     </div>
   );
 }

From 53ba23e75569474506bacfc27392ee60ff1d58c5 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 19:29:48 +0000
Subject: [PATCH 34/42] chore: polish styling for accordion

---
 .../CoderWorkspacesCard/ReminderAccordion.tsx       | 11 ++++++++++-
 .../src/components/Disclosure/Disclosure.tsx        | 13 +++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index 2fa82f66..25e0a145 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -12,7 +12,7 @@ type AccordionItemInfo = Readonly<{
   bodyText: ReactNode;
 }>;
 
-type StyleKeys = 'root' | 'link' | 'innerPadding';
+type StyleKeys = 'root' | 'link' | 'innerPadding' | 'disclosure';
 type StyleInputs = Readonly<{
   hasData: boolean;
 }>;
@@ -22,6 +22,7 @@ const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
     paddingTop: theme.spacing(1),
     marginLeft: `-${theme.spacing(2)}px`,
     marginRight: `-${theme.spacing(2)}px`,
+    marginBottom: `-${theme.spacing(2)}px`,
     borderTop: hasData ? 'none' : `1px solid ${theme.palette.divider}`,
     maxHeight: '240px',
     overflowX: 'hidden',
@@ -31,6 +32,7 @@ const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
   innerPadding: {
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
   },
 
   link: {
@@ -39,6 +41,12 @@ const useStyles = makeStyles<Theme, StyleInputs, StyleKeys>(theme => ({
       textDecoration: 'underline',
     },
   },
+
+  disclosure: {
+    '&:not(:first-child)': {
+      paddingTop: theme.spacing(1),
+    },
+  },
 }));
 
 export type ReminderAccordionProps = Readonly<{
@@ -113,6 +121,7 @@ export function ReminderAccordion({
           <Fragment key={id}>
             {canDisplay && (
               <Disclosure
+                className={styles.disclosure}
                 headerText={headerText}
                 isExpanded={id === activeItemId}
                 onExpansionToggle={() => toggleAccordionGroup(id)}
diff --git a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
index 686f7656..c53eca54 100644
--- a/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
+++ b/plugins/backstage-plugin-coder/src/components/Disclosure/Disclosure.tsx
@@ -1,4 +1,4 @@
-import React, { useState, type PropsWithChildren, type ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode, useState } from 'react';
 import { useId } from '../../hooks/hookPolyfills';
 import { makeStyles } from '@material-ui/core';
 
@@ -31,15 +31,19 @@ const useStyles = makeStyles(theme => ({
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
     },
+
+    '&:not(:first-child)': {
+      paddingTop: theme.spacing(6),
+    },
   },
 }));
 
 export type DisclosureProps = Readonly<
-  PropsWithChildren<{
+  HTMLAttributes<HTMLDivElement> & {
     isExpanded?: boolean;
     onExpansionToggle?: () => void;
     headerText: ReactNode;
-  }>
+  }
 >;
 
 export const Disclosure = ({
@@ -47,6 +51,7 @@ export const Disclosure = ({
   onExpansionToggle,
   headerText,
   children,
+  ...delegatedProps
 }: DisclosureProps) => {
   const hookId = useId();
   const styles = useStyles();
@@ -61,7 +66,7 @@ export const Disclosure = ({
   // functionality with <detail> and <summary> elements. Would likely clean up
   // the component code a bit but might reduce control over screen reader output
   return (
-    <div>
+    <div {...delegatedProps}>
       <button
         type="button"
         aria-expanded={activeIsExpanded}

From 90d6f9d3b17ab2e6dd9683a5547c528e06f0129d Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Tue, 2 Apr 2024 19:52:37 +0000
Subject: [PATCH 35/42] fix: add reminder accordion as exported plugin
 component

---
 .../src/components/CoderWorkspacesCard/index.ts      |  1 +
 plugins/backstage-plugin-coder/src/plugin.ts         | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/index.ts b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/index.ts
index 55b94206..deff6410 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/index.ts
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/index.ts
@@ -7,3 +7,4 @@ export * from './SearchBox';
 export * from './WorkspacesList';
 export * from './WorkspacesListIcon';
 export * from './WorkspacesListItem';
+export * from './ReminderAccordion';
diff --git a/plugins/backstage-plugin-coder/src/plugin.ts b/plugins/backstage-plugin-coder/src/plugin.ts
index 85ae7178..7de9929e 100644
--- a/plugins/backstage-plugin-coder/src/plugin.ts
+++ b/plugins/backstage-plugin-coder/src/plugin.ts
@@ -149,6 +149,18 @@ export const CoderWorkspacesCardWorkspacesListItem = coderPlugin.provide(
   }),
 );
 
+export const CoderWorkspacesReminderAccordion = coderPlugin.provide(
+  createComponentExtension({
+    name: 'CoderWorkspacesCard.ReminderAccordion',
+    component: {
+      lazy: () =>
+        import('./components/CoderWorkspacesCard').then(
+          m => m.ReminderAccordion,
+        ),
+    },
+  }),
+);
+
 /**
  * All custom hooks exposed by the plugin.
  */

From 9e07fd5b2f3b063922800e518255622c5c215314 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 14:25:01 +0000
Subject: [PATCH 36/42] refactor: rename imported component to reduce visual
 noise when reading

---
 .../CoderWorkspacesCard/ReminderAccordion.tsx | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index 25e0a145..29f0cc14 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -3,7 +3,7 @@ import { type Theme, makeStyles } from '@material-ui/core';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { useWorkspacesCardContext } from './Root';
 import { Disclosure } from '../Disclosure/Disclosure';
-import { InlineCodeSnippet } from '../InlineCodeSnippet/InlineCodeSnippet';
+import { InlineCodeSnippet as Snippet } from '../InlineCodeSnippet/InlineCodeSnippet';
 
 type AccordionItemInfo = Readonly<{
   id: string;
@@ -73,8 +73,8 @@ export function ReminderAccordion({
       bodyText: (
         <>
           This component only displays all workspaces when the value of the{' '}
-          <InlineCodeSnippet>readEntityData</InlineCodeSnippet> prop is{' '}
-          <InlineCodeSnippet>false</InlineCodeSnippet>. See{' '}
+          <Snippet>readEntityData</Snippet> prop is <Snippet>false</Snippet>.
+          See{' '}
           <a
             href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
             rel="noopener noreferrer"
@@ -96,11 +96,20 @@ export function ReminderAccordion({
         <>
           This component cannot make a new workspace without a template name
           value. Values can be provided via{' '}
-          <InlineCodeSnippet>defaultTemplateName</InlineCodeSnippet> in{' '}
-          <InlineCodeSnippet>CoderAppConfig</InlineCodeSnippet> or the{' '}
-          <InlineCodeSnippet>templateName</InlineCodeSnippet> property in a
-          repo's <InlineCodeSnippet>catalog-info.yaml</InlineCodeSnippet> file.
-          See our documentation for more information.
+          <Snippet>defaultTemplateName</Snippet> in{' '}
+          <Snippet>CoderAppConfig</Snippet> or the{' '}
+          <Snippet>templateName</Snippet> property in a repo's{' '}
+          <Snippet>catalog-info.yaml</Snippet> file. See{' '}
+          <a
+            href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
+            rel="noopener noreferrer"
+            target="_blank"
+            className={styles.link}
+          >
+            our documentation
+            <VisuallyHidden> (link opens in new tab)</VisuallyHidden>
+          </a>{' '}
+          for more info.
         </>
       ),
     },

From 4389f84884dca4c8290eafbd88b964b9f92932af Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 14:36:02 +0000
Subject: [PATCH 37/42] fix: make no-link message more clear for button

---
 .../CreateWorkspaceLink.tsx                   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
index 8e509bd8..a0a1ab84 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx
@@ -1,4 +1,8 @@
-import React, { type AnchorHTMLAttributes, type ForwardedRef } from 'react';
+import React, {
+  type AnchorHTMLAttributes,
+  type ForwardedRef,
+  type ReactElement,
+} from 'react';
 import { type Theme, makeStyles } from '@material-ui/core';
 import { useWorkspacesCardContext } from './Root';
 
@@ -10,7 +14,8 @@ type StyleInput = Readonly<{
   canCreateWorkspace: boolean;
 }>;
 
-type StyleKeys = 'root';
+type StyleKeys = 'root' | 'noLinkTooltipContainer';
+
 const useStyles = makeStyles<Theme, StyleInput, StyleKeys>(theme => {
   const padding = theme.spacing(0.5);
 
@@ -36,12 +41,17 @@ const useStyles = makeStyles<Theme, StyleInput, StyleKeys>(theme => {
           : 'inherit',
       },
     }),
+
+    noLinkTooltipContainer: {
+      display: 'block',
+      maxWidth: '24em',
+    },
   };
 });
 
 type CreateButtonLinkProps = Readonly<
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-disabled'> & {
-    tooltipText?: string;
+    tooltipText?: string | ReactElement;
     tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
     tooltipRef?: ForwardedRef<unknown>;
   }
@@ -64,7 +74,14 @@ export const CreateWorkspaceLink = ({
     <Tooltip
       ref={tooltipRef}
       title={
-        canCreateWorkspace ? tooltipText : 'Please add a template name value'
+        canCreateWorkspace ? (
+          tooltipText
+        ) : (
+          <span className={styles.noLinkTooltipContainer}>
+            Please add a template name value. More info available in the
+            accordion at the bottom of this widget.
+          </span>
+        )
       }
       {...tooltipProps}
     >

From f8a4576d91d866d108602be0a05156aafc77be66 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 14:37:48 +0000
Subject: [PATCH 38/42] fix: update text to account for new tooltip

---
 .../components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
index 1ae49623..6c219531 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx
@@ -76,7 +76,7 @@ describe(`${CreateWorkspaceLink.name}`, () => {
     // Make sure tooltip is also updated
     const user = userEvent.setup();
     await user.hover(link);
-    const tooltip = await screen.findByText('Please add a template name value');
+    const tooltip = await screen.findByText(/Please add a template name value/);
     expect(tooltip).toBeInTheDocument();
   });
 });

From 5677de68e1d8ac552f1ccb434b2ba9dd9a6f8f61 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 16:14:42 +0000
Subject: [PATCH 39/42] docs: add page about catalog-info

---
 plugins/backstage-plugin-coder/README.md      | 52 ++++++++++++----
 .../docs/catalog-info.md                      | 59 +++++++++++++++++++
 2 files changed, 100 insertions(+), 11 deletions(-)
 create mode 100644 plugins/backstage-plugin-coder/docs/catalog-info.md

diff --git a/plugins/backstage-plugin-coder/README.md b/plugins/backstage-plugin-coder/README.md
index 93f3bdc2..eb53cb29 100644
--- a/plugins/backstage-plugin-coder/README.md
+++ b/plugins/backstage-plugin-coder/README.md
@@ -28,22 +28,23 @@ the Dev Container.
    yarn --cwd packages/app add @coder/backstage-plugin-coder
    ```
 
-1. Add the proxy key to your `app-config.yaml`:
+2. Add the proxy key to your `app-config.yaml`:
 
    ```yaml
    proxy:
      endpoints:
        '/coder':
-         # Replace with your Coder deployment access URL and a trailing /
+         # Replace with your Coder deployment access URL (add a trailing slash)
          target: 'https://coder.example.com/'
+
          changeOrigin: true
-         allowedMethods: ['GET']
+         allowedMethods: ['GET'] # Additional methods will be supported soon!
          allowedHeaders: ['Authorization', 'Coder-Session-Token']
          headers:
            X-Custom-Source: backstage
    ```
 
-1. Add the `CoderProvider` to the application:
+3. Add the `CoderProvider` to the application:
 
    ```tsx
    // In packages/app/src/App.tsx
@@ -58,14 +59,16 @@ the Dev Container.
      },
 
      // Set the default template (and parameters) for
-     // catalog items. This can be overridden in the
-     // catalog-info.yaml for specific items.
+     // catalog items. Individual properties can be overridden
+     // by a repo's catalog-info.yaml file
      workspaces: {
-       templateName: 'devcontainers',
-       mode: 'manual',
-       // This parameter is used to filter Coder workspaces
-       // by a repo URL parameter.
+       defaultTemplateName: 'devcontainers',
+       defaultMode: 'manual',
+
+       // This property defines which parameters in your Coder
+       // workspace templates are used to store repository links
        repoUrlParamKeys: ['custom_repo', 'repo_url'],
+
        params: {
          repo: 'custom',
          region: 'eu-helsinki',
@@ -88,7 +91,7 @@ the Dev Container.
 
    **Note:** You can also wrap a single page or component with `CoderProvider` if you only need Coder in a specific part of your app. See our [API reference](./docs/README.md) (particularly the section on [the `CoderProvider` component](./docs/components.md#coderprovider)) for more details.
 
-1. Add the `CoderWorkspacesCard` card to the entity page in your app:
+4. Add the `CoderWorkspacesCard` card to the entity page in your app:
 
    ```tsx
    // In packages/app/src/components/catalog/EntityPage.tsx
@@ -101,6 +104,33 @@ the Dev Container.
    </Grid>;
    ```
 
+### `app-config.yaml` files
+
+In addition to the above, you can define additional properties on your specific repo's `catalog-info.yaml` file.
+
+Example:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: python-project
+spec:
+  type: other
+  lifecycle: unknown
+  owner: pms
+
+  # Properties for the Coder plugin are placed here
+  coder:
+    templateName: 'devcontainers'
+    mode: 'auto'
+    params:
+      repo: 'custom'
+      region: 'us-pittsburgh'
+```
+
+You can find more information about what properties are available (and how they're applied) in our [`catalog-info.yaml` file documentation](./docs/catalog-info.md).
+
 ## Roadmap
 
 This plugin is in active development. The following features are planned:
diff --git a/plugins/backstage-plugin-coder/docs/catalog-info.md b/plugins/backstage-plugin-coder/docs/catalog-info.md
new file mode 100644
index 00000000..34fd72b3
--- /dev/null
+++ b/plugins/backstage-plugin-coder/docs/catalog-info.md
@@ -0,0 +1,59 @@
+# `catalog-info.yaml` files
+
+This file provides documentation for all properties that the Coder plugin recognizes from Backstage's [`catalog-info.yaml` files](https://backstage.io/docs/features/software-catalog/descriptor-format/).
+
+## Example file
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: python-project
+spec:
+  type: other
+  lifecycle: unknown
+  owner: pms
+
+  # Properties for the Coder plugin are placed here
+  coder:
+    templateName: 'devcontainers'
+    mode: 'auto'
+    params:
+      repo: 'custom'
+      region: 'us-pittsburgh'
+```
+
+All config properties are placed under the `spec.coder` property.
+
+## Where these properties are used
+
+At present, there are two main areas where these values are used:
+
+- [`CoderWorkspacesCard`](./components.md#coderworkspacescard) (and all sub-components)
+- [`useCoderWorkspacesConfig`](./hooks.md#usecoderworkspacesconfig)
+
+## Property listing
+
+### `templateName`
+
+**Type:** Optional `string`
+
+This defines the name of the Coder template you would like to use when creating new workspaces from Backstage.
+
+**Note:** This value has overlap with the `defaultTemplateName` property defined in [`CoderAppConfig`](types.md#coderappconfig). In the event that both values are present, the YAML file's `templateName` property will always be used instead.
+
+### `templateName`
+
+**Type:** Optional union of `manual` or `auto`
+
+This defines the workspace creation mode that will be embedded as a URL parameter in any outgoing links to make new workspaces in your Coder deployment. (e.g.,`useCoderWorkspacesConfig`'s `creationUrl` property)
+
+**Note:** This value has overlap with the `defaultMode` property defined in [`CoderAppConfig`](types.md#coderappconfig). In the event that both values are present, the YAML file's `mode` property will always be used instead.
+
+### `params`
+
+**Type:** Optional JSON object of string values (equivalent to TypeScript's `Record<string, string | undefined>`)
+
+This allows you to define additional Coder workspace parameter values that should be passed along to any outgoing URLs for making new workspaces in your Coder deployment. These values are fully dynamic, and unfortunately, cannot have much type safety.
+
+**Note:** The properties from the `params` property are automatically merged with the properties defined via `CoderAppConfig`'s `params` property. In the event of any key conflicts, the params from `catalog-info.yaml` will always win.

From b59197739f0c1dfebd109f84044787bdb1a500d1 Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 17:00:08 +0000
Subject: [PATCH 40/42] docs: finish all docs updates for coder plugin

---
 .../backstage-plugin-coder/docs/components.md | 64 +++++++++----------
 plugins/backstage-plugin-coder/docs/hooks.md  | 12 ++--
 plugins/backstage-plugin-coder/docs/types.md  | 28 ++++----
 .../components/CoderWorkspacesCard/Root.tsx   | 12 +++-
 4 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/plugins/backstage-plugin-coder/docs/components.md b/plugins/backstage-plugin-coder/docs/components.md
index 5b555915..f461d395 100644
--- a/plugins/backstage-plugin-coder/docs/components.md
+++ b/plugins/backstage-plugin-coder/docs/components.md
@@ -26,7 +26,7 @@ This component is designed to simplify authentication checks for other component
 ```tsx
 type Props = Readonly<
   PropsWithChildren<{
-    type: 'card';
+    type: 'card'; // More types to be added soon!
   }>
 >;
 
@@ -86,7 +86,7 @@ function YourComponent() {
   return <p>Will never reach this code</p>;
 }
 
-<CoderErrorBoundary>
+<CoderErrorBoundary fallbackUi={<p>Something broke. Sorry!</p>}>
   <YourComponent />
 </CoderErrorBoundary>;
 ```
@@ -133,7 +133,7 @@ function YourComponent() {
   return (
     <ul>
       {queryState.data?.map(workspace => (
-        <li key={workspace.id}>{workspace.owner_name}</li>
+        <li key={workspace.id}>{workspace.name}</li>
       ))}
     </ul>
   );
@@ -145,8 +145,8 @@ const appConfig: CoderAppConfig = {
   },
 
   workspaces: {
-    templateName: 'devcontainers',
-    mode: 'manual',
+    defaultTemplateName: 'devcontainers',
+    defaultMode: 'manual',
     repoUrlParamKeys: ['custom_repo', 'repo_url'],
     params: {
       repo: 'custom',
@@ -162,12 +162,12 @@ const appConfig: CoderAppConfig = {
 
 ### Throws
 
-- Does not throw
+- Only throws if `appConfig` is not provided (but this is also caught at the type level)
 
 ### Notes
 
 - This component was deliberately designed to be agnostic of as many Backstage APIs as possible - it can be placed as high as the top of the app, or treated as a wrapper around a specific plugin component.
-  - That said, it is recommended that only have one instance of `CoderProvider` per Backstage deployment. Multiple `CoderProvider` component instances could interfere with each other and accidentally fragment caching state
+  - That said, it is recommended that you only have one instance of `CoderProvider` per Backstage deployment. Multiple `CoderProvider` component instances could interfere with each other and accidentally fragment caching state
 - If you are already using TanStack Query in your deployment, you can provide your own `QueryClient` value via the `queryClient` prop.
   - If not specified, `CoderProvider` will use its own client
   - Even if you aren't using TanStack Query anywhere else, you could consider adding your own client to configure it with more specific settings
@@ -176,11 +176,11 @@ const appConfig: CoderAppConfig = {
 
 ## `CoderWorkspacesCard`
 
-Allows you to search for and display Coder workspaces that the currently-authenticated user has access to. The component handles all data-fetching, caching
+Allows you to search for and display Coder workspaces that the currently-authenticated user has access to. The component handles all data-fetching, caching, and displaying of workspaces.
 
 Has two "modes" – one where the component has access to all Coder workspaces for the user, and one where the component is aware of entity data and filters workspaces to those that match the currently-open repo page. See sample usage for examples.
 
-All "pieces" of the component are also available as modular sub-components that can be imported and composed together individually.
+All "pieces" of the component are also available as modular sub-components that can be imported and composed together individually. `CoderWorkspacesCard` represents a pre-configured version that is plug-and-play.
 
 ### Type signature
 
@@ -216,7 +216,7 @@ const appConfig: CoderAppConfig = {
 ```
 
 In "aware mode" – the component only displays workspaces that
-match the repo data for the currently-open entity page:
+match the repo data for the currently-open entity page, but in exchange, it must always be placed inside a Backstage component that has access to entity data (e.g., `EntityLayout`):
 
 ```tsx
 const appConfig: CoderAppConfig = {
@@ -270,13 +270,15 @@ function YourComponent() {
 
 ## `CoderWorkspacesCard.CreateWorkspacesLink`
 
-A link-button for creating new workspaces. Clicking this link will take you to "create workspace page" in your Coder deployment, with as many fields filled out as possible.
+A link-button for creating new workspaces. Clicking this link will take you to "create workspace page" in your Coder deployment, with as many fields filled out as possible (see notes for exceptions).
 
 ### Type definition
 
 ```tsx
+// All Tooltip-based props come from the type definitions for
+// the MUI `Tooltip` component
 type Props = {
-  tooltipText?: string;
+  tooltipText?: string | ReactElement;
   tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
   tooltipRef?: ForwardedRef<unknown>;
 
@@ -290,14 +292,13 @@ declare function CreateWorkspacesLink(
 ): JSX.Element;
 ```
 
-All Tooltip-based props come from the type definitions for the MUI `Tooltip` component.
-
 ### Throws
 
 - Will throw a render error if called outside of either a `CoderProvider` or `CoderWorkspacesCard.Root`
 
 ### Notes
 
+- If no workspace creation URL could be generated, this component will not let you create a new workspace. This can happen when the `CoderAppConfig` does not have a `defaultTemplateName` property, and the `catalog-info.yaml` file also does not have a `templateName`
 - If `readEntityData` is `true` in `CoderWorkspacesCard.Root`: this component will include YAML properties parsed from the current page's entity data.
 
 ## `CoderWorkspacesCard.ExtraActionsButton`
@@ -305,11 +306,13 @@ All Tooltip-based props come from the type definitions for the MUI `Tooltip` com
 A contextual menu of additional tertiary actions that can be performed for workspaces. Current actions:
 
 - Refresh workspaces list
-- Eject token
+- Unlinking the current Coder session token
 
 ### Type definition
 
 ```tsx
+// All Tooltip- and Menu-based props come from the type definitions
+// for the MUI Tooltip and Menu components.
 type ExtraActionsButtonProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'id' | 'aria-controls'
@@ -342,8 +345,6 @@ declare function ExtraActionsButton(
 ): JSX.Element;
 ```
 
-All Tooltip- and Menu-based props come from the type definitions for the MUI `Tooltip` and `Menu` components.
-
 ### Throws
 
 - Will throw a render error if called outside of either a `CoderProvider` or `CoderWorkspacesCard.Root`
@@ -351,7 +352,7 @@ All Tooltip- and Menu-based props come from the type definitions for the MUI `To
 ### Notes
 
 - When the menu opens, the first item of the list will auto-focus
-- While the menu is open, you can navigate through items with the Up and Down arrow keys on the keyboard. These instructions are available for screen readers to announce
+- While the menu is open, you can navigate through items with the Up and Down arrow keys on the keyboard. Reminder instructions are also available for screen readers to announce
 
 ## `CoderWorkspacesCard.HeaderRow`
 
@@ -389,36 +390,35 @@ declare function HeaderGroup(
 
 - If `headerLevel` is not specified, the component will default to `h2`
 - If `fullBleedLayout` is `true`, the component will exert negative horizontal margins to fill out its parent
-- If `activeRepoFilteringText` will only display if the value of `readEntityData` in `CoderWorkspacesCard.Root` is `true`
+- `activeRepoFilteringText` will only display if the value of `readEntityData` in `CoderWorkspacesCard.Root` is `true`. The component automatically uses its own text if the prop is not specified.
 
 ## `CoderWorkspacesCard.Root`
 
-Wrapper that acts as a context provider for all other sub-components in `CoderWorkspacesCard` – does not define any components that will render to HTML.
+Wrapper that acts as a context provider for all other sub-components in `CoderWorkspacesCard` – defines a very minimal set of unstyled HTML components that are necessary only for screen reader support.
 
 ### Type definition
 
 ```tsx
-type WorkspacesCardContext = {
-  queryFilter: string;
-  onFilterChange: (newFilter: string) => void;
-  workspacesQuery: UseQueryResult<readonly Workspace[]>;
-  workspacesConfig: CoderWorkspacesConfig;
-  headerId: string;
-};
+type Props = Readonly<{
+  queryFilter?: string;
+  defaultQueryFilter?: string;
+  onFilterChange?: (newFilter: string) => void;
+  readEntityData?: boolean;
+
+  // Also supports all props from the native HTMLDivElement
+  // component, except "id" and "aria-controls"
+}>;
 
 declare function Root(props: Props): JSX.Element;
 ```
 
-All props mirror those returned by [`useWorkspacesCardContext`](./hooks.md#useworkspacescardcontext)
-
 ### Throws
 
 - Will throw a render error if called outside of a `CoderProvider`
 
 ### Notes
 
-- If `entityConfig` is defined, the Root will auto-filter all workspaces down to those that match the repo for the currently-opened entity page
-- The key for `entityConfig` is not optional – even if it isn't defined, it must be explicitly passed an `undefined` value
+- The value of `readEntityData` will cause the component to flip between the two modes mentioned in the documentation for [`CoderWorkspacesCard`](#coderworkspacescard).
 
 ## `CoderWorkspacesCard.SearchBox`
 
@@ -448,7 +448,7 @@ declare function SearchBox(props: Props): JSX.Element;
 
 ### Notes
 
-- The logic for processing user input into a new workspaces query is automatically debounced to wait 400ms.
+- The logic for processing user input into a new workspaces query is automatically debounced.
 
 ## `CoderWorkspacesCard.WorkspacesList`
 
diff --git a/plugins/backstage-plugin-coder/docs/hooks.md b/plugins/backstage-plugin-coder/docs/hooks.md
index 282fba6f..c02ba4c0 100644
--- a/plugins/backstage-plugin-coder/docs/hooks.md
+++ b/plugins/backstage-plugin-coder/docs/hooks.md
@@ -30,7 +30,7 @@ declare function useCoderWorkspacesConfig(
 
 ```tsx
 function YourComponent() {
-  const config = useCoderWorkspacesConfig();
+  const config = useCoderWorkspacesConfig({ readEntityData: true });
   return <p>Your repo URL is {config.repoUrl}</p>;
 }
 
@@ -62,14 +62,14 @@ const serviceEntityPage = (
 
 ### Notes
 
-- The type definition for `CoderWorkspacesConfig` [can be found here](./types.md#coderworkspacesconfig). That section also includes info on the heuristic used for compiling the data
+- The type definition for `CoderWorkspacesConfig` [can be found here](./types.md#coderworkspacesconfig). That section also includes info on the heuristic used for compiling the data.
 - The value of `readEntityData` determines the "mode" that the workspace operates in. If the value is `false`/`undefined`, the component will act as a general list of workspaces that isn't aware of Backstage APIs. If the value is `true`, the hook will also read Backstage data during the compilation step.
 - The hook tries to ensure that the returned value maintains a stable memory reference as much as possible, if you ever need to use that value in other React hooks that use dependency arrays (e.g., `useEffect`, `useCallback`)
 
 ## `useCoderWorkspacesQuery`
 
 This hook gives you access to all workspaces that match a given query string. If
-[`workspacesConfig`](#usecoderworkspacesconfig) is defined via `options`, and that config has a defined `repoUrl`, the workspaces returned will be filtered down further to only those that match the the repo.
+[`workspacesConfig`](#usecoderworkspacesconfig) is defined via `options`, and that config has a defined `repoUrl` property, the workspaces returned will be filtered down further to only those that match the the repo.
 
 ### Type signature
 
@@ -88,9 +88,9 @@ declare function useCoderWorkspacesConfig(
 
 ```tsx
 function YourComponent() {
-  const [filter, setFilter] = useState('owner:me');
+  const [coderQuery, setCoderQuery] = useState('owner:me');
   const workspacesConfig = useCoderWorkspacesConfig({ readEntityData: true });
-  const queryState = useCoderWorkspacesQuery({ filter, workspacesConfig });
+  const queryState = useCoderWorkspacesQuery({ coderQuery, workspacesConfig });
 
   return (
     <>
@@ -130,7 +130,7 @@ const coderAppConfig: CoderAppConfig = {
   1.  The user is not currently authenticated (We recommend wrapping your component inside [`CoderAuthWrapper`](./components.md#coderauthwrapper) to make these checks easier)
   2.  If `repoConfig` is passed in via `options`: when the value of `coderQuery` is an empty string
 - The `workspacesConfig` property is the return type of [`useCoderWorkspacesConfig`](#usecoderworkspacesconfig)
-  - The only way to get automatically-filtered results is by (1) passing in a workspaces config value, and (2) ensuring that config has a `repoUrl` property of type string (it can sometimes be `undefined`, depending on built-in Backstage APIs).
+  - The only way to get workspace results that are automatically filtered by repo URL is by (1) passing in a workspaces config value, and (2) ensuring that config has a `repoUrl` property of type string (it can sometimes be `undefined`, depending on built-in Backstage APIs).
 
 ## `useWorkspacesCardContext`
 
diff --git a/plugins/backstage-plugin-coder/docs/types.md b/plugins/backstage-plugin-coder/docs/types.md
index 6caf7cd9..263f9872 100644
--- a/plugins/backstage-plugin-coder/docs/types.md
+++ b/plugins/backstage-plugin-coder/docs/types.md
@@ -2,7 +2,7 @@
 
 ## General notes
 
-- All type definitions for the Coder plugin are defined as type aliases and not interfaces, to prevent the risk of accidental interface merging. If you need to extend from one of our types, you can do it in one of two ways:
+- All exported type definitions for the Coder plugin are defined as type aliases and not interfaces, to prevent the risk of accidental interface merging. If you need to extend from one of our types, you can do it in one of two ways:
 
   ```tsx
   // Type intersection
@@ -28,15 +28,15 @@
 Defines a set of configuration options for integrating Backstage with Coder. Primarily has two main uses:
 
 1. Defining a centralized source of truth for certain Coder configuration options (such as which workspace parameters should be used for injecting repo URL values)
-2. Defining "fallback" workspace parameters when a repository entity either doesn't have a `catalog-info.yaml` file at all, or only specifies a handful of properties.
+2. Defining "fallback" workspace parameters when a repository entity either doesn't have a [`catalog-info.yaml` file](./catalog-info.md) at all, or only specifies a handful of properties.
 
 ### Type definition
 
 ```tsx
 type CoderAppConfig = Readonly<{
   workspaces: Readonly<{
-    templateName: string;
-    mode?: 'auto' | 'manual' | undefined;
+    defaultTemplateName?: string;
+    defaultMode?: 'auto' | 'manual' | undefined;
     params?: Record<string, string | undefined>;
     repoUrlParamKeys: readonly [string, ...string[]];
   }>;
@@ -54,10 +54,10 @@ See example for [`CoderProvider`](./components.md#coderprovider)
 ### Notes
 
 - `accessUrl` is the URL pointing at your specific Coder deployment
-- `templateName` refers to the name of the Coder template that you wish to use as default for creating workspaces
-- If `mode` is not specified, the plugin will default to a value of `manual`
+- `defaultTemplateName` refers to the name of the Coder template that you wish to use as default for creating workspaces. If this is not provided (and there is no `templateName` available from the `catalog-info.yaml` file, you will not be able to create new workspaces from Backstage)
+- If `defaultMode` is not specified, the plugin will default to a value of `manual`
 - `repoUrlParamKeys` is defined as a non-empty array – there must be at least one element inside it.
-- For more info on how this type is used within the plugin, see [`CoderWorkspacesConfig`](./types.md#coderworkspacesconfig) and [`useCoderWorkspacesConfig`](./hooks.md#usecoderworkspacesconfig)
+- For more info on how this type is used within the plugin, see [`CoderWorkspacesConfig`](#coderworkspacesconfig) and [`useCoderWorkspacesConfig`](./hooks.md#usecoderworkspacesconfig)
 
 ## `CoderWorkspacesConfig`
 
@@ -72,11 +72,11 @@ Represents the result of compiling Coder plugin configuration data. The main sou
 ```tsx
 type CoderWorkspacesConfig = Readonly<{
   mode: 'manual' | 'auto';
+  templateName: string | undefined;
   params: Record<string, string | undefined>;
   creationUrl: string;
   repoUrl: string | undefined;
   repoUrlParamKeys: [string, ...string[]][];
-  templateName: string;
 }>;
 ```
 
@@ -91,8 +91,8 @@ const appConfig: CoderAppConfig = {
   },
 
   workspaces: {
-    templateName: 'devcontainers-a',
-    mode: 'manual',
+    defaultTemplateName: 'devcontainers-config',
+    defaultMode: 'manual',
     repoUrlParamKeys: ['custom_repo', 'repo_url'],
     params: {
       repo: 'custom',
@@ -113,7 +113,7 @@ spec:
   lifecycle: unknown
   owner: pms
   coder:
-    templateName: 'devcontainers-b'
+    templateName: 'devcontainers-yaml'
     mode: 'auto'
     params:
       repo: 'custom'
@@ -132,13 +132,13 @@ const config: CoderWorkspacesConfig = {
     repo_url: 'https://github.com/Parkreiner/python-project/',
   },
   repoUrlParamKeys: ['custom_repo', 'repo_url'],
-  templateName: 'devcontainers',
+  templateName: 'devcontainers-yaml',
   repoUrl: 'https://github.com/Parkreiner/python-project/',
 
   // Other URL parameters will be included in real code
   // but were stripped out for this example
   creationUrl:
-    'https://dev.coder.com/templates/devcontainers-b/workspace?mode=auto',
+    'https://dev.coder.com/templates/devcontainers-yaml/workspace?mode=auto',
 };
 ```
 
@@ -148,7 +148,7 @@ const config: CoderWorkspacesConfig = {
 - The value of the `repoUrl` property is derived from [Backstage's `getEntitySourceLocation`](https://backstage.io/docs/reference/plugin-catalog-react.getentitysourcelocation/), which does not guarantee that a URL will always be defined.
 - This is the current order of operations used to reconcile param data between `CoderAppConfig`, `catalog-info.yaml`, and the entity location data:
   1. Start with an empty `Record<string, string | undefined>` value
-  2. Populate the record with the data from `CoderAppConfig`
+  2. Populate the record with the data from `CoderAppConfig`. If there are any property names that start with `default`, those will be stripped out (e.g., `defaultTemplateName` will be injected as `templateName`)
   3. Go through all properties parsed from `catalog-info.yaml` and inject those. If the properties are already defined, overwrite them
   4. Grab the repo URL from the entity's location fields.
   5. For each key in `CoderAppConfig`'s `workspaces.repoUrlParamKeys` property, take that key, and inject it as a key-value pair, using the URL as the value. If the key already exists, always override it with the URL
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
index 25845c7f..9a2d118f 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
@@ -43,7 +43,7 @@ export type WorkspacesCardProps = Readonly<
   }
 >;
 
-export const Root = ({
+const InnerRoot = ({
   children,
   className,
   queryFilter: outerFilter,
@@ -97,6 +97,16 @@ export const Root = ({
   );
 };
 
+export function Root(props: WorkspacesCardProps) {
+  // Doing this to insulate the user from needing to worry about accidentally
+  // flipping the value of readEntityData between renders. If this value
+  // changes, it will cause the component to unmount and remount, but that
+  // should be painless/maybe invisible compared to having the component throw
+  // a full error and triggering an error boundary
+  const renderKey = String(props.readEntityData ?? false);
+  return <InnerRoot key={renderKey} {...props} />;
+}
+
 export function useWorkspacesCardContext(): WorkspacesCardContext {
   const contextValue = useContext(CardContext);
   if (contextValue === null) {

From cab06c437bc1052f08a12a5cd26aa48b124469fe Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 17:06:36 +0000
Subject: [PATCH 41/42] docs: add docs section for ReminderAccordion

---
 .../backstage-plugin-coder/docs/components.md | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/plugins/backstage-plugin-coder/docs/components.md b/plugins/backstage-plugin-coder/docs/components.md
index f461d395..9241a11b 100644
--- a/plugins/backstage-plugin-coder/docs/components.md
+++ b/plugins/backstage-plugin-coder/docs/components.md
@@ -544,3 +544,26 @@ declare function WorkspaceListItem(props: Props): JSX.Element;
 ### Notes
 
 - Supports full link-like functionality (right-clicking and middle-clicking to open in a new tab, etc.)
+
+## `CoderWorkspacesCard.ReminderAccordion`
+
+An accordion that will conditionally display additional help information in the event of a likely setup error.
+
+### Type definition
+
+```tsx
+type ReminderAccordionProps = Readonly<{
+  canShowEntityReminder?: boolean;
+  canShowTemplateNameReminder?: boolean;
+}>;
+
+declare function ReminderAccordion(props: ReminderAccordionProps): JSX.Element;
+```
+
+### Throws
+
+- Will throw a render error if mounted outside of `CoderWorkspacesCard.Root` or `CoderProvider`.
+
+### Notes
+
+- All `canShow` props allow you to disable specific help messages. If any are set to `false`, their corresponding info block will **never** render. If set to `true` (and all will default to `true` if not specified), they will only appear when a likely setup error has been detected.

From a640738f0d208422e2096d9805d8ecd7b502c8dd Mon Sep 17 00:00:00 2001
From: Parkreiner <throwawayclover@gmail.com>
Date: Thu, 4 Apr 2024 17:10:58 +0000
Subject: [PATCH 42/42] fix: update link for documentation in UI

---
 .../src/components/CoderWorkspacesCard/ReminderAccordion.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
index 29f0cc14..34666194 100644
--- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
+++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx
@@ -101,7 +101,7 @@ export function ReminderAccordion({
           <Snippet>templateName</Snippet> property in a repo's{' '}
           <Snippet>catalog-info.yaml</Snippet> file. See{' '}
           <a
-            href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#notes-4"
+            href="https://github.com/coder/backstage-plugins/blob/main/plugins/backstage-plugin-coder/docs/components.md#coderappconfig"
             rel="noopener noreferrer"
             target="_blank"
             className={styles.link}