elements as having no role when the + 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. */} {children ?? } - {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. + + )} diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx new file mode 100644 index 00000000..821fd13d --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx @@ -0,0 +1,179 @@ +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +import { + mockAuthStates, + mockCoderWorkspacesConfig, +} from '../../testHelpers/mockBackstageData'; +import type { CoderAuth } from '../CoderProvider'; +import { CardContext, WorkspacesCardContext } from './Root'; +import { ExtraActionsButton } from './ExtraActionsButton'; + +beforeAll(() => { + jest.useFakeTimers(); +}); + +afterAll(() => { + jest.useRealTimers(); +}); + +function getUser() { + return userEvent.setup({ + advanceTimers: jest.advanceTimersByTime, + }); +} + +type RenderInputs = Readonly<{ + buttonText: string; +}>; + +async function renderButton({ buttonText }: RenderInputs) { + const unlinkToken = jest.fn(); + const auth: CoderAuth = { + ...mockAuthStates.authenticated, + unlinkToken: unlinkToken, + }; + + /** + * Pretty sure there has to be a more elegant and fault-tolerant way of + * testing the useQuery functionality, but this does the trick for now + * + * @todo Research how to test dependencies on useQuery + */ + const refetch = jest.fn(); + const mockContext: Partial = { + workspacesConfig: mockCoderWorkspacesConfig, + workspacesQuery: { + refetch, + } as unknown as WorkspacesCardContext['workspacesQuery'], + }; + + const renderOutput = await renderInCoderEnvironment({ + auth, + children: ( + + + + ), + }); + + return { + ...renderOutput, + button: screen.getByRole('button', { name: new RegExp(buttonText) }), + unlinkCoderAccount: unlinkToken, + refreshWorkspaces: refetch, + }; +} + +describe(`${ExtraActionsButton.name}`, () => { + // Can include onClick prop test in this test case, too + it('Will open a menu of actions when the main button is clicked', async () => { + const { button } = await renderButton({ buttonText: 'Button' }); + const user = getUser(); + + await user.click(button); + expect(() => { + screen.getByRole('menuitem', { + name: /Unlink Coder account/i, + }); + + screen.getByRole('menuitem', { + name: /Refresh/i, + }); + }).not.toThrow(); + }); + + it('Displays a tooltip when the user hovers over it', async () => { + const tooltipText = 'Hover test'; + const user = getUser(); + const { button } = await renderButton({ + buttonText: 'Hover test', + }); + + await user.hover(button); + const tooltip = await screen.findByText(tooltipText); + expect(tooltip).toBeInTheDocument(); + }); + + it('Can unlink the current Coder session token', async () => { + const user = getUser(); + const { button, unlinkCoderAccount } = await renderButton({ + buttonText: 'Unlink test', + }); + + await user.click(button); + const unlinkMenuItem = await screen.findByRole('menuitem', { + name: /Unlink Coder account/i, + }); + + await user.click(unlinkMenuItem); + expect(unlinkCoderAccount).toHaveBeenCalled(); + }); + + it('Lets users trigger actions entirely through the keyboard', async () => { + const tooltipText = 'Keyboard test'; + const { button, unlinkCoderAccount } = await renderButton({ + buttonText: tooltipText, + }); + + const user = getUser(); + await user.keyboard('[Tab]'); + expect(button).toHaveFocus(); + + await user.keyboard('[Enter]'); + const menuItems = await screen.findAllByRole('menuitem'); + expect(menuItems[0]).toHaveFocus(); + + const unlinkItem = screen.getByRole('menuitem', { + name: /Unlink Coder account/i, + }); + + while (document.activeElement !== unlinkItem) { + await user.keyboard('[ArrowDown]'); + } + + await user.keyboard('[Enter]'); + expect(unlinkCoderAccount).toHaveBeenCalled(); + }); + + it('Can refresh the workspaces data', async () => { + const user = getUser(); + const { button, refreshWorkspaces } = await renderButton({ + buttonText: 'Refresh test', + }); + + await user.click(button); + const refreshItem = await screen.findByRole('menuitem', { + name: /Refresh/i, + }); + + await user.click(refreshItem); + expect(refreshWorkspaces).toHaveBeenCalled(); + }); + + it('Will throttle repeated clicks on the Refresh menu item', async () => { + const user = getUser(); + const refreshMatcher = /Refresh/i; + const { button, refreshWorkspaces } = await renderButton({ + buttonText: 'Throttle test', + }); + + // The menu is programmed to auto-close every time you choose an option; + // have to do a lot of clicks to verify that things are throttled + for (let i = 0; i < 10; i++) { + await user.click(button); + + // Can't store this in a variable outside the loop, because the item will + // keep mounting/unmounting every time the menu opens/closes. The memory + // reference will keep changing + const refreshItem = screen.getByRole('menuitem', { + name: refreshMatcher, + }); + + await user.click(refreshItem); + } + + await jest.advanceTimersByTimeAsync(10_000); + expect(refreshWorkspaces).toHaveBeenCalledTimes(1); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx index 38b63b95..3e6d0a89 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx @@ -1,13 +1,12 @@ -import React, { +import { type ButtonHTMLAttributes, type ForwardedRef, useEffect, useRef, useState, } from 'react'; - import { useId } from '../../hooks/hookPolyfills'; -import { useCoderAuth } from '../CoderProvider'; +import { useInternalCoderAuth } from '../CoderProvider'; import { useWorkspacesCardContext } from './Root'; import { VisuallyHidden } from '../VisuallyHidden'; @@ -102,7 +101,7 @@ export const ExtraActionsButton = ({ const hookId = useId(); const [loadedAnchor, setLoadedAnchor] = useState(); const refreshWorkspaces = useRefreshWorkspaces(); - const { ejectToken } = useCoderAuth(); + const { unlinkToken } = useInternalCoderAuth(); const styles = useStyles(); const closeMenu = () => setLoadedAnchor(undefined); @@ -137,11 +136,11 @@ export const ExtraActionsButton = ({

{/* Warning: all direct children of Menu must be MenuItem components, or - else the auto-focus behavior will break. Even a custom component that - returns out nothing but a MenuItem will break it. (Guessing that MUI - uses something like cloneElement under the hood, and that they're - interacting with the raw JSX metadata objects before they're turned - into new UI.) */} + else the auto-focus behavior will break. Even a custom component that + returns out nothing but a MenuItem will break it. (Guessing that MUI + uses something like cloneElement under the hood, and that they're + interacting with the raw JSX metadata objects before they're turned + into new UI.) */} { - ejectToken(); + unlinkToken(); closeMenu(); }} > diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.test.tsx new file mode 100644 index 00000000..cb47de4d --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.test.tsx @@ -0,0 +1,80 @@ +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +import { HeaderRow } from './HeaderRow'; +import { Root } from './Root'; +import { screen } from '@testing-library/react'; +import { + ANNOTATION_SOURCE_LOCATION_KEY, + BackstageEntity, + mockEntity, + mockRepoName, +} from '../../testHelpers/mockBackstageData'; + +type RenderInputs = Readonly<{ + readEntityData?: boolean; + repoUrl?: string; +}>; + +function renderHeaderRow(input?: RenderInputs) { + const { repoUrl, readEntityData = false } = input ?? {}; + + let entity: BackstageEntity = mockEntity; + if (repoUrl) { + entity = { + ...mockEntity, + metadata: { + ...mockEntity.metadata, + annotations: { + ...(mockEntity.metadata?.annotations ?? {}), + [ANNOTATION_SOURCE_LOCATION_KEY]: `url:${repoUrl}`, + }, + }, + }; + } + + return renderInCoderEnvironment({ + entity, + children: ( + + + + ), + }); +} + +describe(`${HeaderRow.name}`, () => { + const subheaderTextMatcher = /Results filtered by/i; + + it('Has a header with an ID that matches the ID of the parent root container (needed for a11y landmark behavior)', async () => { + await renderHeaderRow(); + const searchContainer = screen.getByRole('search'); + const header = screen.getByRole('heading'); + + const labelledByBinding = searchContainer.getAttribute('aria-labelledby'); + expect(header.id).toBe(labelledByBinding); + }); + + it('Will hide text about filtering active repos if the Root is not configured to read entity data', async () => { + await renderHeaderRow({ readEntityData: false }); + const subheader = screen.queryByText(subheaderTextMatcher); + expect(subheader).not.toBeInTheDocument(); + }); + + it('Will dynamically show the name of the current repo (when it can be parsed)', async () => { + await renderHeaderRow({ readEntityData: true }); + const subheader = screen.getByText(subheaderTextMatcher); + + expect(subheader.textContent).toEqual( + `Results filtered by repo: ${mockRepoName}`, + ); + }); + + it("Will show fallback indicator for the repo name if it can't be parsed", async () => { + await renderHeaderRow({ + readEntityData: true, + repoUrl: 'https://www.blah.com/unknown/repo/format', + }); + + const subheader = screen.getByText(subheaderTextMatcher); + expect(subheader.textContent).toEqual('Results filtered by repo URL'); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx index 745dbd75..cfde07ad 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.tsx @@ -1,50 +1,37 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; -import { Theme, makeStyles } from '@material-ui/core'; +import type { HTMLAttributes, ReactNode } from 'react'; +import { type Theme, makeStyles } from '@material-ui/core'; import { useWorkspacesCardContext } from './Root'; +import type { HtmlHeader } from '../../typesConstants'; type StyleKey = 'root' | 'header' | 'hgroup' | 'subheader'; - -type MakeStylesInputs = Readonly<{ - fullBleedLayout: boolean; -}>; - -const useStyles = makeStyles(theme => ({ - root: ({ fullBleedLayout }) => ({ +const useStyles = makeStyles(theme => ({ + root: { color: theme.palette.text.primary, display: 'flex', flexFlow: 'row nowrap', alignItems: 'center', gap: theme.spacing(1), - - // Have to jump through some hoops for the border; have to extend out the - // root to make sure that the border stretches all the way across the - // parent, and then add padding back to just the main content - borderBottom: `1px solid ${theme.palette.divider}`, - marginLeft: fullBleedLayout ? `-${theme.spacing(2)}px` : 0, - marginRight: fullBleedLayout ? `-${theme.spacing(2)}px` : 0, - padding: `0 ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing( - 2.5, - )}px`, - }), + }, hgroup: { marginRight: 'auto', }, header: { - fontSize: '24px', + fontSize: '1.5rem', lineHeight: 1, margin: 0, }, subheader: { margin: '0', + fontSize: '0.875rem', + fontWeight: 400, color: theme.palette.text.secondary, paddingTop: theme.spacing(0.5), }, })); -type HtmlHeader = `h${1 | 2 | 3 | 4 | 5 | 6}`; type ClassName = `${Exclude}ClassName`; type HeaderProps = Readonly< @@ -67,14 +54,13 @@ export const HeaderRow = ({ subheaderClassName, activeRepoFilteringText, headerText = 'Coder Workspaces', - fullBleedLayout = true, ...delegatedProps }: HeaderProps) => { - const { headerId, entityConfig } = useWorkspacesCardContext(); - const styles = useStyles({ fullBleedLayout }); + const { headerId, workspacesConfig } = useWorkspacesCardContext(); + const styles = useStyles(); const HeadingComponent = headerLevel ?? 'h2'; - const repoUrl = entityConfig?.repoUrl; + const { repoUrl } = workspacesConfig; return (

@@ -100,9 +86,13 @@ export const HeaderRow = ({ ); }; -// Temporary stopgap until we can figure out how to grab the repo name via one -// of the Backstage APIs -const repoNameRe = /^(?:https?:\/\/)?github\.com\/.*?\/(.+?)(?:\/.*)?$/i; +/** + * Parses the repo name from GitHub/GitLab/Bitbucket, which should be the last + * segment of the URL after it's been cleaned by the CoderConfig + */ +const repoNameRe = + /^(?:https?:\/\/)?(?:www\.)?(?:github|gitlab|bitbucket)\.com\/.*?\/(.+)?$/i; + function extractRepoName(repoUrl: string): string { const [, repoName] = repoNameRe.exec(repoUrl) ?? []; return repoName ? `repo: ${repoName}` : 'repo URL'; diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.test.tsx new file mode 100644 index 00000000..ea64f29f --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.test.tsx @@ -0,0 +1,27 @@ +import { screen } from '@testing-library/react'; +import { Root } from './Root'; +import { Placeholder } from './Placeholder'; +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +import { mockAppConfig } from '../../testHelpers/mockBackstageData'; + +describe(`${Placeholder.name}`, () => { + it('Lets the user create a new workspace when call-to-action behavior is enabled', async () => { + await renderInCoderEnvironment({ + children: ( + + + + ), + }); + + const link = screen.getByRole('link', { + name: /Create workspace/i, + }); + + expect(link).not.toBeDisabled(); + expect(link.target).toBe('_blank'); + expect(link.href).toMatch( + new RegExp(`^${mockAppConfig.deployment.accessUrl}/`), + ); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.tsx index 3fa948d0..34845e6c 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.tsx @@ -6,7 +6,7 @@ * This does not need to be exported as a plugin component yet, but that may * change in the future. */ -import React, { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; import { useWorkspacesCardContext } from './Root'; import { makeStyles } from '@material-ui/core'; import { CoderLogo } from '../CoderLogo'; @@ -61,7 +61,7 @@ export const Placeholder = ({ displayCta = false, }: PlaceholderProps) => { const styles = usePlaceholderStyles(); - const { workspaceCreationLink } = useWorkspacesCardContext(); + const { workspacesConfig } = useWorkspacesCardContext(); return (

@@ -71,11 +71,11 @@ export const Placeholder = ({ {displayCta && (

- Create a workspace now! + Create workspace (Link opens in new tab)

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..3959af11 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx @@ -0,0 +1,232 @@ +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +import type { Workspace } from '../../api/vendoredSdk'; +import { mockCoderWorkspacesConfig } from '../../testHelpers/mockBackstageData'; +import { + type WorkspacesCardContext, + type WorkspacesQuery, + CardContext, +} from './Root'; +import { + type ReminderAccordionProps, + ReminderAccordion, +} from './ReminderAccordion'; + +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, + canShowEntityReminder = true, + canShowTemplateNameReminder = true, + } = inputs ?? {}; + + const mockContext: Partial = { + workspacesConfig: { + ...mockCoderWorkspacesConfig, + repoUrl, + creationUrl, + isReadingEntityData, + }, + workspacesQuery: { + data: queryData, + } as WorkspacesQuery, + }; + + return renderInCoderEnvironment({ + children: ( + + + + ), + }); +} + +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>; + +describe(`${ReminderAccordion.name}`, () => { + describe('General behavior', () => { + it('Lets the user open a single accordion item', async () => { + await renderAccordion(); + const entityToggle = await screen.findByRole('button', { + name: matchers.toggles.entity, + }); + + const user = userEvent.setup(); + await user.click(entityToggle); + + const entityText = await screen.findByText(matchers.bodyText.entity); + expect(entityText).toBeInTheDocument(); + }); + + it('Will close an open accordion item when that item is clicked', async () => { + await renderAccordion(); + const entityToggle = await screen.findByRole('button', { + name: matchers.toggles.entity, + }); + + const user = userEvent.setup(); + await user.click(entityToggle); + + const entityText = await screen.findByText(matchers.bodyText.entity); + await user.click(entityToggle); + expect(entityText).not.toBeInTheDocument(); + }); + + it('Only lets one accordion item be open at a time', async () => { + await renderAccordion(); + const entityToggle = await screen.findByRole('button', { + name: matchers.toggles.entity, + }); + const templateNameToggle = await screen.findByRole('button', { + name: matchers.toggles.templateName, + }); + + const user = userEvent.setup(); + await user.click(entityToggle); + + const entityText = await screen.findByText(matchers.bodyText.entity); + expect(entityText).toBeInTheDocument(); + + await user.click(templateNameToggle); + expect(entityText).not.toBeInTheDocument(); + + const templateText = await screen.findByText( + matchers.bodyText.templateName, + ); + expect(templateText).toBeInTheDocument(); + }); + }); + + describe('Conditionally displaying items', () => { + it('Lets the user conditionally hide accordion items based on props', async () => { + type Configuration = Readonly<{ + props: ReminderAccordionProps; + expectedItemCount: number; + }>; + + const configurations: readonly Configuration[] = [ + { + expectedItemCount: 0, + props: { + canShowEntityReminder: false, + canShowTemplateNameReminder: false, + }, + }, + { + expectedItemCount: 1, + props: { + canShowEntityReminder: false, + canShowTemplateNameReminder: true, + }, + }, + { + expectedItemCount: 1, + props: { + canShowEntityReminder: true, + canShowTemplateNameReminder: 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 NOT display the template name reminder if there is a creation URL', async () => { + await renderAccordion({ + creationUrl: mockCoderWorkspacesConfig.creationUrl, + canShowTemplateNameReminder: true, + }); + + const templateToggle = screen.queryByRole('button', { + name: matchers.toggles.templateName, + }); + + expect(templateToggle).not.toBeInTheDocument(); + }); + + /** + * Assuming that the user hasn't disabled showing the reminder at all, it + * 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('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 new file mode 100644 index 00000000..0da8a528 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx @@ -0,0 +1,146 @@ +import { type ReactNode, Fragment, useState } from 'react'; +import { type Theme, makeStyles } from '@material-ui/core'; +import { VisuallyHidden } from '../VisuallyHidden'; +import { useWorkspacesCardContext } from './Root'; +import { Disclosure } from '../Disclosure/Disclosure'; +import { InlineCodeSnippet as Snippet } from '../InlineCodeSnippet/InlineCodeSnippet'; + +type AccordionItemInfo = Readonly<{ + id: string; + canDisplay: boolean; + headerText: ReactNode; + bodyText: ReactNode; +}>; + +type StyleKeys = 'root' | 'link' | 'innerPadding' | 'disclosure'; +type StyleInputs = Readonly<{ + hasData: boolean; +}>; + +const useStyles = makeStyles(theme => ({ + root: ({ hasData }) => ({ + 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', + overflowY: 'auto', + }), + + innerPadding: { + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + paddingBottom: theme.spacing(2), + }, + + link: { + color: theme.palette.link, + '&:hover': { + textDecoration: 'underline', + }, + }, + + disclosure: { + '&:not(:first-child)': { + paddingTop: theme.spacing(1), + }, + }, +})); + +export type ReminderAccordionProps = Readonly<{ + canShowEntityReminder?: boolean; + canShowTemplateNameReminder?: boolean; +}>; + +export function ReminderAccordion({ + canShowEntityReminder = true, + canShowTemplateNameReminder = true, +}: ReminderAccordionProps) { + const [activeItemId, setActiveItemId] = useState(); + const { workspacesConfig, workspacesQuery } = useWorkspacesCardContext(); + const styles = useStyles({ hasData: workspacesQuery.data !== undefined }); + + const accordionData: readonly AccordionItemInfo[] = [ + { + id: 'entity', + canDisplay: + canShowEntityReminder && + workspacesConfig.isReadingEntityData && + !workspacesConfig.repoUrl, + headerText: 'Why am I not seeing any workspaces?', + bodyText: ( + <> + This component only displays all workspaces when the value of the{' '} + readEntityData prop is false. + See{' '} + + our documentation + (link opens in new tab) + {' '} + for more info. + + ), + }, + { + id: 'templateName', + canDisplay: canShowTemplateNameReminder && !workspacesConfig.creationUrl, + headerText: <>Why can't I make a new workspace?, + bodyText: ( + <> + This component cannot make a new workspace without a template name + value. Values can be provided via{' '} + defaultTemplateName in{' '} + CoderAppConfig or the{' '} + templateName property in a repo's{' '} + catalog-info.yaml file. See{' '} + + our documentation + (link opens in new tab) + {' '} + for more info. + + ), + }, + ]; + + const toggleAccordionGroup = (newItemId: string) => { + if (newItemId === activeItemId) { + setActiveItemId(undefined); + } else { + setActiveItemId(newItemId); + } + }; + + return ( +

+ {accordionData.map(({ id, canDisplay, headerText, bodyText }) => ( + + {canDisplay && ( + toggleAccordionGroup(id)} + > + {bodyText} + + )} + + ))} +

+ ); +} diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.test.tsx new file mode 100644 index 00000000..a992a15f --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.test.tsx @@ -0,0 +1,78 @@ +/** + * @file This file covers functionality that is specific to the Root component + * when used by itself. + * + * For full integration tests (and test cases for the vast majority of + * meaningful functionality), see CoderWorkspacesCard.test.tsx + */ +import type { ReactNode } from 'react'; +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +import { Root } from './Root'; +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +type RenderInputs = Readonly<{ + children: ReactNode; +}>; + +async function renderRoot(inputs?: RenderInputs) { + const { children } = inputs ?? {}; + + // The onSubmit handler is designed not to be the direct recipient of submit + // events, but passively receive them as they're triggered in the form, and + // then bubble up towards the root of the DOM + const onSubmit = jest.fn(); + const renderOutput = await renderInCoderEnvironment({ + children: ( +

+ {children} +

+ ), + }); + + return { ...renderOutput, onSubmit }; +} + +describe(`${Root.name}`, () => { + it("Is exposed to the accessibility tree as a 'search' element", async () => { + await renderRoot(); + expect(() => screen.getByRole('search')).not.toThrow(); + }); + + it("Does not cause any button children of type 'submit' to trigger submit events when they are clicked", async () => { + const buttonText = "Don't trigger reloads please"; + const { onSubmit } = await renderRoot({ + // All buttons have type "submit" when the type isn't specified + children: , + }); + + const user = userEvent.setup(); + const button = screen.getByRole('button', { + name: buttonText, + }); + + await user.click(button); + expect(onSubmit).not.toHaveBeenCalled(); + }); + + it('Does not make focused input children trigger submit events when the Enter key is pressed', async () => { + const inputLabel = "Don't reload on Enter, please"; + const { onSubmit } = await renderRoot({ + children: ( + + {inputLabel} + + + ), + }); + + const user = userEvent.setup(); + const input = screen.getByRole('textbox', { + name: inputLabel, + }); + + await user.click(input); + await user.keyboard('[Enter]'); + expect(onSubmit).not.toHaveBeenCalled(); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx index 6b681d73..dc9dd668 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Root.tsx @@ -1,50 +1,37 @@ -import React, { +/** + * @file Wires up all the core logic for passing values down to the + * sub-components in the same directory. + */ +import { type HTMLAttributes, + type ReactNode, createContext, useContext, useState, } from 'react'; -import { makeStyles } from '@material-ui/core'; import { useId } from '../../hooks/hookPolyfills'; import { UseQueryResult } from '@tanstack/react-query'; import { - useCoderEntityConfig, - type CoderEntityConfig, -} from '../../hooks/useCoderEntityConfig'; + useCoderWorkspacesConfig, + type CoderWorkspacesConfig, +} from '../../hooks/useCoderWorkspacesConfig'; +import type { Workspace } from '../../api/vendoredSdk'; +import { useCoderWorkspacesQuery } from './useCoderWorkspacesQuery'; +import { CoderAuthFormCardWrapper } from '../CoderAuthFormCardWrapper'; -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'; +export type WorkspacesQuery = UseQueryResult; -type WorkspacesCardContext = Readonly<{ +export type WorkspacesCardContext = Readonly<{ queryFilter: string; onFilterChange: (newFilter: string) => void; - workspacesQuery: UseQueryResult; + workspacesQuery: WorkspacesQuery; + workspacesConfig: CoderWorkspacesConfig; headerId: string; - entityConfig: CoderEntityConfig | undefined; - workspaceCreationLink: string; }>; -const CardContext = createContext(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', - }, -})); +// Only exported to simplify setting up dependency injection for tests. Should +// not be consumed directly in application code +export const CardContext = createContext(null); export type WorkspacesCardProps = Readonly< Omit, 'role' | 'aria-labelledby'> & { @@ -52,112 +39,82 @@ export type WorkspacesCardProps = Readonly< defaultQueryFilter?: string; onFilterChange?: (newFilter: string) => void; readEntityData?: boolean; + headerContent?: ReactNode; } >; -export const Root = ({ +const InnerRoot = ({ children, className, + headerContent, queryFilter: outerFilter, onFilterChange: onOuterFilterChange, defaultQueryFilter = 'owner:me', 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 workspacesConfig = useCoderWorkspacesConfig({ readEntityData }); + const workspacesQuery = useCoderWorkspacesQuery({ + workspacesConfig, + coderQuery: activeFilter, }); - const showEntityDataReminder = - workspacesQuery.data && dynamicConfig && !dynamicConfig.repoUrl; + const hookId = useId(); const headerId = `${hookId}-header`; - const activeConfig = { - ...appConfig.workspaces, - ...(dynamicConfig ?? {}), - }; return ( - - { - setInnerFilter(newFilter); - onOuterFilterChange?.(newFilter); - }, - workspaceCreationLink: serializeWorkspaceUrl( - activeConfig, - appConfig.deployment.accessUrl, - ), - }} + { + setInnerFilter(newFilter); + onOuterFilterChange?.(newFilter); + }, + }} + > +

+ Authenticate with Coder +

+ Authenticate with Coder to enable Coder plugin features +