feat: add requested copy changes (#26)

* non-repo helper * copy changes * pr feedback
coder · Mar 14, 2024 · 0748359 · 0748359
1 parent 422d1dc
commit 0748359
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 24 deletions.
diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthInputForm.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthInputForm.tsx
@@ -104,8 +104,8 @@ export const CoderAuthInputForm = () => {
       <div>
         <CoderLogo className={styles.coderLogo} />
         <p>
-          Your Coder session token is {mapAuthStatusToText(status)}. Please
-          enter a new token from your{' '}
+          Link your Coder account to create remote workspaces. Please enter a
+          new token from your{' '}
           <Link
             to={`${appConfig.deployment.accessUrl}/cli-auth`}
             target="_blank"
@@ -162,20 +162,3 @@ export const CoderAuthInputForm = () => {
     </form>
   );
 };
-
-function mapAuthStatusToText(status: CoderAuthStatus): string {
-  switch (status) {
-    case 'tokenMissing': {
-      return 'missing';
-    }
-
-    case 'initializing':
-    case 'authenticating': {
-      return status;
-    }
-
-    default: {
-      return 'invalid';
-    }
-  }
-}
diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx
@@ -173,7 +173,7 @@ export const ExtraActionsButton = ({
             closeMenu();
           }}
         >
-          Refresh workspaces list
+          Refresh
         </MenuItem>
 
         <MenuItem
@@ -182,7 +182,7 @@ export const ExtraActionsButton = ({
             closeMenu();
           }}
         >
-          Eject token
+          Unlink Coder account
         </MenuItem>
       </Menu>
     </>

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx
@@ -66,7 +66,7 @@ export const HeaderRow = ({
   hgroupClassName,
   subheaderClassName,
   activeRepoFilteringText,
-  headerText = 'Coder workspaces',
+  headerText = 'Coder Workspaces',
   fullBleedLayout = true,
   ...delegatedProps
 }: HeaderProps) => {

diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx
@@ -4,7 +4,7 @@ import React, {
   useContext,
   useState,
 } from 'react';
-
+import { makeStyles } from '@material-ui/core';
 import { useId } from '../../hooks/hookPolyfills';
 import { UseQueryResult } from '@tanstack/react-query';
 import {
@@ -16,6 +16,7 @@ import type { Workspace } from '../../typesConstants';
 import { useCoderWorkspaces } from '../../hooks/useCoderWorkspaces';
 import { Card } from '../Card';
 import { CoderAuthWrapper } from '../CoderAuthWrapper';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { type CoderWorkspaceConfig, useCoderAppConfig } from '../CoderProvider';
 
 type WorkspacesCardContext = Readonly<{
@@ -29,6 +30,22 @@ type WorkspacesCardContext = Readonly<{
 
 const CardContext = createContext<WorkspacesCardContext | null>(null);
 
+const useStyles = makeStyles(theme => ({
+  button: {
+    color: theme.palette.type,
+    backgroundColor: theme.palette.background.paper,
+    border: 'none',
+    paddingTop: theme.spacing(2),
+    fontSize: theme.typography.body2.fontSize,
+    cursor: 'pointer',
+  },
+
+  snippet: {
+    backgroundColor: theme.palette.grey[100],
+    borderRadius: '0.4em',
+  },
+}));
+
 export type WorkspacesCardProps = Readonly<
   Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'> & {
     queryFilter?: string;
@@ -47,15 +64,23 @@ export const Root = ({
   readEntityData = false,
   ...delegatedProps
 }: WorkspacesCardProps) => {
+  const styles = useStyles();
   const hookId = useId();
   const appConfig = useCoderAppConfig();
   const [innerFilter, setInnerFilter] = useState(defaultQueryFilter);
   const activeFilter = outerFilter ?? innerFilter;
 
+  const [isExpanded, setIsExpanded] = useState(false);
+  const toggleExpansion = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   const dynamicConfig = useDynamicEntityConfig(readEntityData);
   const workspacesQuery = useCoderWorkspaces(activeFilter, {
     repoConfig: dynamicConfig,
   });
+  const showEntityDataReminder =
+    workspacesQuery.data && dynamicConfig && !dynamicConfig.repoUrl;
 
   const headerId = `${hookId}-header`;
   const activeConfig = {
@@ -94,6 +119,36 @@ export const Root = ({
               cases around keyboard input and button children that native <form>
               elements automatically introduce */}
           <div role="form">{children}</div>
+          {showEntityDataReminder && (
+            <div>
+              <button
+                onClick={toggleExpansion}
+                type="button"
+                className={styles.button}
+              >
+                {isExpanded ? '▼' : '►'}{' '}
+                {isExpanded ? 'Hide text' : 'Why am I seeing all workspaces?'}
+              </button>
+              {isExpanded && (
+                <p>
+                  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{' '}
+                  <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' }}
+                  >
+                    docs
+                    <VisuallyHidden> (link opens in new tab)</VisuallyHidden>
+                  </a>
+                  .
+                </p>
+              )}
+            </div>
+          )}
         </Card>
       </CardContext.Provider>
     </CoderAuthWrapper>

diff --git a/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspaces.ts b/plugins/backstage-plugin-coder/src/hooks/useCoderWorkspaces.ts
@@ -18,8 +18,9 @@ export function useCoderWorkspaces(
   const auth = useCoderAuth();
   const { baseUrl } = useBackstageEndpoints();
   const { repoConfig } = options ?? {};
+  const hasRepoData = repoConfig && repoConfig.repoUrl;
 
-  const queryOptions = repoConfig
+  const queryOptions = hasRepoData
     ? workspacesByRepo({ coderQuery, auth, baseUrl, repoConfig })
     : workspaces({ coderQuery, auth, baseUrl });