- ); -}); diff --git a/plugins/backstage-plugin-coder/src/components/Card/index.ts b/plugins/backstage-plugin-coder/src/components/Card/index.ts deleted file mode 100644 index ca0b0604..00000000 --- a/plugins/backstage-plugin-coder/src/components/Card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Card'; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthDistrustedForm.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthDistrustedForm.tsx similarity index 65% rename from plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthDistrustedForm.tsx rename to plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthDistrustedForm.tsx index 1a63a24a..3f58804d 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthDistrustedForm.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthDistrustedForm.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { CoderLogo } from '../CoderLogo'; -import { LinkButton } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core'; -import { useCoderAuth } from '../CoderProvider'; +import { UnlinkAccountButton } from './UnlinkAccountButton'; const useStyles = makeStyles(theme => ({ root: { @@ -31,30 +30,17 @@ const useStyles = makeStyles(theme => ({ export const CoderAuthDistrustedForm = () => { const styles = useStyles(); - const { ejectToken } = useCoderAuth(); - return (

Unable to verify token authenticity. Please check your internet - connection, or try ejecting the token. + connection, or try unlinking the token.

- - Eject token - +

); }; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthForm.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthForm.test.tsx new file mode 100644 index 00000000..79b263ca --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthForm.test.tsx @@ -0,0 +1,149 @@ +import React from 'react'; +import { screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { CoderProviderWithMockAuth } from '../../testHelpers/setup'; +import type { CoderAuth, CoderAuthStatus } from '../CoderProvider'; +import { + mockAppConfig, + mockAuthStates, + mockCoderAuthToken, +} from '../../testHelpers/mockBackstageData'; +import { CoderAuthForm } from './CoderAuthForm'; +import { renderInTestApp } from '@backstage/test-utils'; + +type RenderInputs = Readonly<{ + authStatus: CoderAuthStatus; +}>; + +async function renderAuthWrapper({ authStatus }: RenderInputs) { + const unlinkToken = jest.fn(); + const registerNewToken = jest.fn(); + + const auth: CoderAuth = { + ...mockAuthStates[authStatus], + unlinkToken, + registerNewToken, + }; + + /** + * @todo RTL complains about the current environment not being configured to + * support act. Luckily, it doesn't cause any of our main test cases to kick + * up false positives. + * + * This may not be an issue with our code, and might be a bug from Backstage's + * migration to React 18. Need to figure out where this issue is coming from, + * and open an issue upstream if necessary + */ + const renderOutput = await renderInTestApp( + + + , + ); + + return { ...renderOutput, unlinkToken, registerNewToken }; +} + +describe(`${CoderAuthForm.name}`, () => { + describe('Loading UI', () => { + it('Is displayed while the auth is initializing', async () => { + renderAuthWrapper({ authStatus: 'initializing' }); + const loadingIndicator = await screen.findByText(/Loading/); + expect(loadingIndicator).toBeInTheDocument(); + }); + }); + + describe('Token distrusted form', () => { + it("Is displayed when the user's auth status cannot be verified", async () => { + const distrustedTextMatcher = /Unable to verify token authenticity/; + const distrustedStatuses: readonly CoderAuthStatus[] = [ + 'distrusted', + 'noInternetConnection', + 'deploymentUnavailable', + ]; + + for (const authStatus of distrustedStatuses) { + const { unmount } = await renderAuthWrapper({ authStatus }); + const message = await screen.findByText(distrustedTextMatcher); + + expect(message).toBeInTheDocument(); + unmount(); + } + }); + + it('Lets the user unlink the current token', async () => { + const { unlinkToken } = await renderAuthWrapper({ + authStatus: 'distrusted', + }); + + const user = userEvent.setup(); + const unlinkButton = await screen.findByRole('button', { + name: /Unlink Coder account/, + }); + + await user.click(unlinkButton); + expect(unlinkToken).toHaveBeenCalled(); + }); + }); + + describe('Token submission form', () => { + it("Is displayed when the token either doesn't exist or is definitely not valid", async () => { + const statusesForInvalidUser: readonly CoderAuthStatus[] = [ + 'invalid', + 'tokenMissing', + ]; + + for (const authStatus of statusesForInvalidUser) { + const { unmount } = await renderAuthWrapper({ authStatus }); + const form = screen.getByRole('form', { + name: /Authenticate with Coder/, + }); + + expect(form).toBeInTheDocument(); + unmount(); + } + }); + + it('Lets the user submit a new token', async () => { + const { registerNewToken } = await renderAuthWrapper({ + authStatus: 'tokenMissing', + }); + + /** + * Two concerns that make the selection for inputField a little hokey: + * 1. The auth input is of type password, which does not have a role + * compatible with Testing Library; can't use getByRole to select it + * 2. MUI adds a star to its labels that are required, meaning that any + * attempts at trying to match string literal "Auth token" will fail; + * have to use a regex selector + */ + const inputField = screen.getByLabelText(/Auth token/); + const submitButton = screen.getByRole('button', { name: 'Authenticate' }); + + const user = userEvent.setup(); + await user.click(inputField); + await user.keyboard(mockCoderAuthToken); + await user.click(submitButton); + + expect(registerNewToken).toHaveBeenCalledWith(mockCoderAuthToken); + }); + + it('Lets the user dismiss any notifications for invalid/authenticating states', async () => { + const authStatuses: readonly CoderAuthStatus[] = [ + 'invalid', + 'authenticating', + ]; + + const user = userEvent.setup(); + for (const authStatus of authStatuses) { + const { unmount } = await renderAuthWrapper({ authStatus }); + const dismissButton = await screen.findByRole('button', { + name: 'Dismiss', + }); + + await user.click(dismissButton); + await waitFor(() => expect(dismissButton).not.toBeInTheDocument()); + unmount(); + } + }); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthForm.tsx similarity index 53% rename from plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.tsx rename to plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthForm.tsx index 0bfdff65..638a1a75 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthWrapper.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthForm.tsx @@ -1,52 +1,30 @@ -import React, { type FC, type PropsWithChildren } from 'react'; -import { useCoderAuth } from '../CoderProvider'; -import { InfoCard } from '@backstage/core-components'; +import React from 'react'; +import { useInternalCoderAuth } from '../CoderProvider'; import { CoderAuthDistrustedForm } from './CoderAuthDistrustedForm'; -import { makeStyles } from '@material-ui/core'; import { CoderAuthLoadingState } from './CoderAuthLoadingState'; import { CoderAuthInputForm } from './CoderAuthInputForm'; +import { CoderAuthSuccessStatus } from './CoderAuthSuccessStatus'; -const useStyles = makeStyles(theme => ({ - cardContent: { - paddingTop: theme.spacing(5), - paddingBottom: theme.spacing(5), - }, -})); +export type CoderAuthFormProps = Readonly<{ + descriptionId?: string; +}>; -function CoderAuthCard({ children }: PropsWithChildren) { - const styles = useStyles(); - return ( - -

{children}

- - ); -} - -type WrapperProps = Readonly< - PropsWithChildren<{ - type: 'card'; - }> ->; - -export const CoderAuthWrapper = ({ children, type }: WrapperProps) => { - const auth = useCoderAuth(); - if (auth.isAuthenticated) { - return <>{children}; - } - - let Wrapper: FC>; - switch (type) { - case 'card': { - Wrapper = CoderAuthCard; - break; - } - default: { - assertExhaustion(type); - } - } +export const CoderAuthForm = ({ descriptionId }: CoderAuthFormProps) => { + const auth = useInternalCoderAuth(); return ( - + <> + {/* + * By default this text will be inert, and not be exposed anywhere + * (Sighted and blind users won't be able to interact with it). To enable + * it for screen readers, a consuming component will need bind an ID to + * another component via aria-describedby and then pass the same ID down + * as props. + */} + + {/* Slightly awkward syntax with the IIFE, but need something switch-like to make sure that all status cases are handled exhaustively */} {(() => { @@ -69,9 +47,7 @@ export const CoderAuthWrapper = ({ children, type }: WrapperProps) => { case 'authenticated': case 'distrustedWithGracePeriod': { - throw new Error( - 'This code should be unreachable because of the auth check near the start of the component', - ); + return ; } default: { @@ -79,7 +55,7 @@ export const CoderAuthWrapper = ({ children, type }: WrapperProps) => { } } })()} - + ); }; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthInputForm.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthInputForm.tsx new file mode 100644 index 00000000..ae527e28 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthInputForm.tsx @@ -0,0 +1,247 @@ +import React, { type FormEvent, useState } from 'react'; +import { useId } from '../../hooks/hookPolyfills'; +import { + type CoderAuthStatus, + useCoderAppConfig, + useInternalCoderAuth, +} from '../CoderProvider'; + +import { CoderLogo } from '../CoderLogo'; +import { Link, LinkButton } from '@backstage/core-components'; +import { VisuallyHidden } from '../VisuallyHidden'; +import { makeStyles } from '@material-ui/core'; +import TextField from '@material-ui/core/TextField'; +import ErrorIcon from '@material-ui/icons/ErrorOutline'; +import SyncIcon from '@material-ui/icons/Sync'; + +const useStyles = makeStyles(theme => ({ + formContainer: { + maxWidth: '30em', + marginLeft: 'auto', + marginRight: 'auto', + }, + + authInputFieldset: { + display: 'flex', + flexFlow: 'column nowrap', + rowGap: theme.spacing(2), + margin: `${theme.spacing(-0.5)} 0 0 0`, + border: 'none', + padding: 0, + }, + + coderLogo: { + display: 'block', + width: 'fit-content', + marginLeft: 'auto', + marginRight: 'auto', + }, + + authButton: { + display: 'block', + width: 'fit-content', + marginLeft: 'auto', + marginRight: 'auto', + }, +})); + +export const CoderAuthInputForm = () => { + const hookId = useId(); + const styles = useStyles(); + const appConfig = useCoderAppConfig(); + const { status, registerNewToken } = useInternalCoderAuth(); + + const onSubmit = (event: FormEvent) => { + event.preventDefault(); + const formData = Object.fromEntries(new FormData(event.currentTarget)); + const newToken = + typeof formData.authToken === 'string' ? formData.authToken : ''; + + registerNewToken(newToken); + }; + + const formHeaderId = `${hookId}-form-header`; + const legendId = `${hookId}-legend`; + const authTokenInputId = `${hookId}-auth-token`; + const warningBannerId = `${hookId}-warning-banner`; + + return ( +

+ + +

+ +

+ Link your Coder account to create remote workspaces. Please enter a + new token from your{' '} + + Coder deployment's token page + (link opens in new tab) + + . +

+ +

+ + + + + + Authenticate + +

+ + {(status === 'invalid' || status === 'authenticating') && ( + + )} + + ); +}; + +const useInvalidStatusStyles = makeStyles(theme => ({ + warningBannerSpacer: { + paddingTop: theme.spacing(2), + }, + + warningBanner: { + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, + borderRadius: theme.shape.borderRadius, + border: `1.5px solid ${theme.palette.background.default}`, + padding: 0, + }, + + errorContent: { + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + columnGap: theme.spacing(1), + marginRight: 'auto', + + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + paddingLeft: theme.spacing(2), + paddingRight: 0, + }, + + icon: { + fontSize: '16px', + }, + + syncIcon: { + color: theme.palette.text.primary, + opacity: 0.6, + }, + + errorIcon: { + color: theme.palette.error.main, + fontSize: '16px', + }, + + dismissButton: { + border: 'none', + alignSelf: 'stretch', + padding: `0 ${theme.spacing(1.5)}px 0 ${theme.spacing(2)}px`, + color: theme.palette.text.primary, + backgroundColor: 'inherit', + lineHeight: 1, + cursor: 'pointer', + + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + }, + + '@keyframes spin': { + '100%': { + transform: 'rotate(360deg)', + }, + }, +})); + +type InvalidStatusProps = Readonly<{ + authStatus: CoderAuthStatus; + bannerId: string; +}>; + +function InvalidStatusNotifier({ authStatus, bannerId }: InvalidStatusProps) { + const [showNotification, setShowNotification] = useState(true); + const styles = useInvalidStatusStyles(); + + if (!showNotification) { + return null; + } + + return ( +

+ + {authStatus === 'authenticating' && ( + <> + + Authenticating… + + )} + + {authStatus === 'invalid' && ( + <> + + Invalid token + + )} + + + +

+ ); +} diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthLoadingState.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthLoadingState.tsx similarity index 100% rename from plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthLoadingState.tsx rename to plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthLoadingState.tsx diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthSuccessStatus.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthSuccessStatus.tsx new file mode 100644 index 00000000..d2c71513 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/CoderAuthSuccessStatus.tsx @@ -0,0 +1,61 @@ +/** + * @file In practice, this is a component that ideally shouldn't ever be seen by + * the end user. Any component rendering out CoderAuthForm should ideally be set + * up so that when a user is authenticated, the entire component will be + * unmounted before CoderAuthForm has a chance to handle successful states. + * + * But just for the sake of completion (and to remove the risk of runtime render + * errors), this component has been added to provide a form of double + * book-keeping for the auth status switch checks in the parent component. Don't + * want the entire plugin to blow up if an auth conditional in a different + * component is accidentally set up wrong. + */ +import React from 'react'; +import { makeStyles } from '@material-ui/core'; +import { CoderLogo } from '../CoderLogo'; +import { UnlinkAccountButton } from './UnlinkAccountButton'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + flexFlow: 'column nowrap', + alignItems: 'center', + rowGap: theme.spacing(1), + + maxWidth: '30em', + marginLeft: 'auto', + marginRight: 'auto', + color: theme.palette.text.primary, + fontSize: '1rem', + }, + + statusArea: { + display: 'flex', + flexFlow: 'column nowrap', + alignItems: 'center', + }, + + logo: { + // + }, + + text: { + textAlign: 'center', + lineHeight: '1rem', + }, +})); + +export function CoderAuthSuccessStatus() { + const styles = useStyles(); + + return ( +

+ +

You are fully authenticated with Coder!

+ + +

+ ); +} diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthForm/UnlinkAccountButton.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/UnlinkAccountButton.tsx new file mode 100644 index 00000000..efc23329 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/UnlinkAccountButton.tsx @@ -0,0 +1,42 @@ +import React, { type ComponentProps } from 'react'; +import { LinkButton } from '@backstage/core-components'; +import { makeStyles } from '@material-ui/core'; +import { useInternalCoderAuth } from '../CoderProvider'; + +type Props = Readonly, 'to'>>; + +const useStyles = makeStyles(() => ({ + root: { + display: 'block', + maxWidth: 'fit-content', + }, +})); + +export function UnlinkAccountButton({ + className, + onClick, + type = 'button', + ...delegatedProps +}: Props) { + const styles = useStyles(); + const { unlinkToken } = useInternalCoderAuth(); + + return ( + { + unlinkToken(); + onClick?.(event); + }} + {...delegatedProps} + > + Unlink Coder account + + ); +} diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthForm/index.ts b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/index.ts new file mode 100644 index 00000000..752873c4 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthForm/index.ts @@ -0,0 +1 @@ +export * from './CoderAuthForm'; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.test.tsx new file mode 100644 index 00000000..2a0c7cb1 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.test.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { screen } from '@testing-library/react'; +import { CoderProviderWithMockAuth } from '../../testHelpers/setup'; +import type { CoderAuthStatus } from '../CoderProvider'; +import { + mockAppConfig, + mockAuthStates, +} from '../../testHelpers/mockBackstageData'; +import { CoderAuthFormCardWrapper } from './CoderAuthFormCardWrapper'; +import { renderInTestApp } from '@backstage/test-utils'; + +type RenderInputs = Readonly<{ + authStatus: CoderAuthStatus; + childButtonText: string; +}>; + +async function renderAuthWrapper({ + authStatus, + childButtonText, +}: RenderInputs) { + return renderInTestApp( + + + + + , + ); +} + +describe(`${CoderAuthFormCardWrapper.name}`, () => { + it('Displays the main children when the user is authenticated', async () => { + const childButtonText = 'I have secret Coder content!'; + const validStatuses: readonly CoderAuthStatus[] = [ + 'authenticated', + 'distrustedWithGracePeriod', + ]; + + for (const authStatus of validStatuses) { + const { unmount } = await renderAuthWrapper({ + authStatus, + childButtonText, + }); + + const button = await screen.findByRole('button', { + name: childButtonText, + }); + + // This assertion isn't necessary because findByRole will throw an error + // if the button can't be found within the expected period of time. Doing + // this purely to make the Backstage linter happy + expect(button).toBeInTheDocument(); + unmount(); + } + }); + + it('Hides the main children for any invalid/untrustworthy auth status', async () => { + const childButtonText = 'I should never be visible on the screen!'; + const invalidStatuses: readonly CoderAuthStatus[] = [ + 'deploymentUnavailable', + 'distrusted', + 'initializing', + 'invalid', + 'noInternetConnection', + 'tokenMissing', + ]; + + for (const authStatus of invalidStatuses) { + const { unmount } = await renderAuthWrapper({ + authStatus, + childButtonText, + }); + + const button = screen.queryByRole('button', { name: childButtonText }); + expect(button).not.toBeInTheDocument(); + unmount(); + } + }); + + it('Will go back to hiding content if auth state becomes invalid after re-renders', async () => { + const buttonText = "Now you see me, now you don't"; + const { rerender } = await renderAuthWrapper({ + authStatus: 'authenticated', + childButtonText: buttonText, + }); + + // Capture button after it first appears on the screen; findBy will throw if + // the button is not actually visible + const button = await screen.findByRole('button', { name: buttonText }); + + rerender( + + + + + , + ); + + // Assert that the button is gone after the re-render flushes + expect(button).not.toBeInTheDocument(); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.tsx new file mode 100644 index 00000000..1fa0f9fc --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { A11yInfoCard, A11yInfoCardProps } from '../A11yInfoCard'; +import { useInternalCoderAuth } from '../CoderProvider'; +import { + type CoderAuthFormProps, + CoderAuthForm, +} from '../CoderAuthForm/CoderAuthForm'; +import { makeStyles } from '@material-ui/core'; + +type Props = A11yInfoCardProps & CoderAuthFormProps; + +const useStyles = makeStyles(theme => ({ + root: { + paddingTop: theme.spacing(6), + paddingBottom: theme.spacing(6), + }, +})); + +export function CoderAuthFormCardWrapper({ + children, + headerContent, + descriptionId, + ...delegatedCardProps +}: Props) { + const { isAuthenticated } = useInternalCoderAuth(); + const styles = useStyles(); + + return ( + Authenticate with Coder + } + {...delegatedCardProps} + > + {isAuthenticated ? ( + <>{children} + ) : ( +

+ +

+ )} + + ); +} diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/index.ts b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/index.ts new file mode 100644 index 00000000..e59d2626 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/index.ts @@ -0,0 +1 @@ +export * from './CoderAuthFormCardWrapper'; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/CoderAuthFormDialog.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/CoderAuthFormDialog.tsx new file mode 100644 index 00000000..7c39fc95 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/CoderAuthFormDialog.tsx @@ -0,0 +1,145 @@ +import React, { type HTMLAttributes, useState } from 'react'; +import { useId } from '../../hooks/hookPolyfills'; +import { makeStyles } from '@material-ui/core'; +import { LinkButton } from '@backstage/core-components'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogActions from '@material-ui/core/DialogActions'; +import { CoderAuthForm } from '../CoderAuthForm/CoderAuthForm'; + +const useStyles = makeStyles(theme => ({ + trigger: { + cursor: 'pointer', + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + width: 'fit-content', + border: 'none', + fontWeight: 600, + borderRadius: theme.shape.borderRadius, + transition: '10s color ease-in-out', + padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`, + boxShadow: theme.shadows[10], + + '&:hover': { + backgroundColor: theme.palette.primary.dark, + boxShadow: theme.shadows[15], + }, + }, + + dialogContainer: { + width: '100%', + height: '100%', + display: 'flex', + flexFlow: 'column nowrap', + justifyContent: 'center', + alignItems: 'center', + }, + + dialogPaper: { + width: '100%', + }, + + dialogTitle: { + fontSize: '24px', + borderBottom: `${theme.palette.divider} 1px solid`, + padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`, + }, + + contentContainer: { + padding: `${theme.spacing(6)}px ${theme.spacing(3)}px 0`, + }, + + actionsRow: { + display: 'flex', + flexFlow: 'row nowrap', + justifyContent: 'center', + padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing( + 6, + )}px`, + }, + + closeButton: { + letterSpacing: '0.05em', + padding: `${theme.spacing(0.5)}px ${theme.spacing(1)}px`, + color: theme.palette.primary.main, + + '&:hover': { + textDecoration: 'none', + }, + }, +})); + +type DialogProps = Readonly< + Omit, 'onClick' | 'className'> & { + open?: boolean; + onOpen?: () => void; + onClose?: () => void; + triggerClassName?: string; + } +>; + +export function CoderAuthFormDialog({ + children, + onOpen, + onClose, + triggerClassName, + open: outerIsOpen, +}: DialogProps) { + const hookId = useId(); + const styles = useStyles(); + const [innerIsOpen, setInnerIsOpen] = useState(false); + + const handleClose = () => { + setInnerIsOpen(false); + onClose?.(); + }; + + const isOpen = outerIsOpen ?? innerIsOpen; + const titleId = `${hookId}-dialog-title`; + const descriptionId = `${hookId}-dialog-description`; + + return ( + <> + + + + + ); +} diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/index.ts b/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/index.ts new file mode 100644 index 00000000..3b1069e3 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderAuthFormDialog/index.ts @@ -0,0 +1 @@ +export * from './CoderAuthFormDialog'; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthInputForm.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthInputForm.tsx deleted file mode 100644 index f8dff1ad..00000000 --- a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/CoderAuthInputForm.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import React, { FormEvent } from 'react'; -import { useId } from '../../hooks/hookPolyfills'; -import { - type CoderAuthStatus, - useCoderAppConfig, - useCoderAuth, -} from '../CoderProvider'; - -import { Theme, makeStyles } from '@material-ui/core'; -import TextField from '@material-ui/core/TextField'; -import { CoderLogo } from '../CoderLogo'; -import { Link, LinkButton } from '@backstage/core-components'; -import { VisuallyHidden } from '../VisuallyHidden'; - -type UseStyleInput = Readonly<{ status: CoderAuthStatus }>; -type StyleKeys = - | 'formContainer' - | 'authInputFieldset' - | 'coderLogo' - | 'authButton' - | 'warningBanner' - | 'warningBannerContainer'; - -const useStyles = makeStyles(theme => ({ - formContainer: { - maxWidth: '30em', - marginLeft: 'auto', - marginRight: 'auto', - }, - - authInputFieldset: { - display: 'flex', - flexFlow: 'column nowrap', - rowGap: theme.spacing(2), - margin: `${theme.spacing(-0.5)} 0 0 0`, - border: 'none', - padding: 0, - }, - - coderLogo: { - display: 'block', - width: 'fit-content', - marginLeft: 'auto', - marginRight: 'auto', - }, - - authButton: { - display: 'block', - width: 'fit-content', - marginLeft: 'auto', - marginRight: 'auto', - }, - - warningBannerContainer: { - paddingTop: theme.spacing(4), - paddingLeft: theme.spacing(6), - paddingRight: theme.spacing(6), - }, - - warningBanner: ({ status }) => { - let color: string; - let backgroundColor: string; - - if (status === 'invalid') { - color = theme.palette.error.contrastText; - backgroundColor = theme.palette.banner.error; - } else { - color = theme.palette.text.primary; - backgroundColor = theme.palette.background.default; - } - - return { - color, - backgroundColor, - borderRadius: theme.shape.borderRadius, - textAlign: 'center', - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }; - }, -})); - -export const CoderAuthInputForm = () => { - const hookId = useId(); - const appConfig = useCoderAppConfig(); - const { status, registerNewToken } = useCoderAuth(); - const styles = useStyles({ status }); - - const onSubmit = (event: FormEvent) => { - event.preventDefault(); - const formData = Object.fromEntries(new FormData(event.currentTarget)); - const newToken = - typeof formData.authToken === 'string' ? formData.authToken : ''; - - registerNewToken(newToken); - }; - - const legendId = `${hookId}-legend`; - const authTokenInputId = `${hookId}-auth-token`; - const warningBannerId = `${hookId}-warning-banner`; - - return ( - - ); -}; diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/index.ts b/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/index.ts deleted file mode 100644 index 3d0896b5..00000000 --- a/plugins/backstage-plugin-coder/src/components/CoderAuthWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CoderAuthWrapper'; 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(); - screen.getByText(fallbackText); - expect.hasAssertions(); + const fallbackUi = screen.getByText(fallbackText); + expect(fallbackUi).toBeInTheDocument(); }); it('Exposes rendering errors to Backstage Error API', () => { diff --git a/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.tsx b/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.tsx index c1f2bc61..5843a180 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.tsx @@ -39,7 +39,7 @@ class ErrorBoundaryCore extends Component< render() { const { children, fallbackUi } = this.props; - return this.state.hasError ? fallbackUi : children; + return <>{this.state.hasError ? fallbackUi : children}; } } diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx index 19456ea6..e3422292 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAppConfigProvider.tsx @@ -3,26 +3,24 @@ import React, { createContext, useContext, } from 'react'; +import type { WorkspaceCreationMode } from '../../hooks/useCoderWorkspacesConfig'; -import type { YamlConfig } from '../../hooks/useCoderEntityConfig'; - -export type CoderWorkspaceConfig = Readonly< - Exclude & { - // Only specified explicitly to make templateName required - templateName: string; +export type CoderAppConfig = Readonly<{ + deployment: Readonly<{ + accessUrl: 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; // Defined like this to ensure array always has at least one element repoUrlParamKeys: readonly [string, ...string[]]; - } ->; - -export type CoderDeploymentConfig = Readonly<{ - accessUrl: string; -}>; - -export type CoderAppConfig = Readonly<{ - workspaces: CoderWorkspaceConfig; - deployment: CoderDeploymentConfig; + }>; }>; const AppConfigContext = createContext(null); diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx index 3192198e..9b4eb549 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx @@ -1,25 +1,35 @@ import React, { + type FC, type PropsWithChildren, createContext, + useCallback, useContext, useEffect, + useLayoutEffect, + useRef, useState, } from 'react'; - +import { createPortal } from 'react-dom'; import { + type QueryCacheNotifyEvent, type UseQueryResult, useQuery, useQueryClient, } from '@tanstack/react-query'; - +import { useApi } from '@backstage/core-plugin-api'; +import { type Theme, makeStyles } from '@material-ui/core'; +import { useId } from '../../hooks/hookPolyfills'; +import { BackstageHttpError } from '../../api/errors'; import { - BackstageHttpError, CODER_QUERY_KEY_PREFIX, - authQueryKey, - authValidation, -} from '../../api'; -import { useBackstageEndpoints } from '../../hooks/useBackstageEndpoints'; - + sharedAuthQueryKey, +} from '../../api/queryOptions'; +import { coderClientWrapperApiRef } from '../../api/CoderClient'; +import { CoderLogo } from '../CoderLogo'; +import { CoderAuthFormDialog } from '../CoderAuthFormDialog'; + +const BACKSTAGE_APP_ROOT_ID = '#root'; +const FALLBACK_UI_OVERRIDE_CLASS_NAME = 'backstage-root-override'; const TOKEN_STORAGE_KEY = 'coder-backstage-plugin/token'; // Handles auth edge case where a previously-valid token can't be verified. Not @@ -56,59 +66,41 @@ export type CoderAuthStatus = AuthState['status']; export type CoderAuth = Readonly< AuthState & { isAuthenticated: boolean; - tokenLoadedOnMount: boolean; registerNewToken: (newToken: string) => void; - ejectToken: () => void; + unlinkToken: () => void; } >; -function isAuthValid(state: AuthState): boolean { - return ( - state.status === 'authenticated' || - state.status === 'distrustedWithGracePeriod' - ); -} +type TrackComponent = (componentInstanceId: string) => () => void; +export const AuthTrackingContext = createContext(null); +export const AuthStateContext = createContext(null); -type ValidCoderAuth = Extract< - CoderAuth, - { status: 'authenticated' | 'distrustedWithGracePeriod' } ->; +const validAuthStatuses: readonly CoderAuthStatus[] = [ + 'authenticated', + 'distrustedWithGracePeriod', +]; -export function assertValidCoderAuth( - auth: CoderAuth, -): asserts auth is ValidCoderAuth { - if (!isAuthValid(auth)) { - throw new Error('Coder auth is not valid'); - } -} - -export const AuthContext = createContext(null); - -export function useCoderAuth(): CoderAuth { - const contextValue = useContext(AuthContext); - if (contextValue === null) { - throw new Error( - `Hook ${useCoderAuth.name} is being called outside of CoderProvider`, - ); - } - - return contextValue; -} - -type CoderAuthProviderProps = Readonly>; +function useAuthState(): CoderAuth { + const [authToken, setAuthToken] = useState( + () => window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? '', + ); -export const CoderAuthProvider = ({ children }: CoderAuthProviderProps) => { - const { baseUrl } = useBackstageEndpoints(); + // Need to differentiate the current token from the token loaded on mount + // because the query object can be disabled. Only want to expose the + // initializing state if the app mounts with a token already in localStorage + const [readonlyInitialAuthToken] = useState(authToken); const [isInsideGracePeriod, setIsInsideGracePeriod] = useState(true); - // Need to split hairs, because the query object can be disabled. Only want to - // expose the initializing state if the app mounts with a token already in - // localStorage - const [authToken, setAuthToken] = useState(readAuthToken); - const [readonlyInitialAuthToken] = useState(authToken); + const coderClient = useApi(coderClientWrapperApiRef); + const queryIsEnabled = authToken !== ''; - const authValidityQuery = useQuery({ - ...authValidation({ baseUrl, authToken }), + const authValidityQuery = useQuery({ + queryKey: [...sharedAuthQueryKey, authToken], + queryFn: () => coderClient.syncToken(authToken), + enabled: queryIsEnabled, + keepPreviousData: queryIsEnabled, + + // Can't use !query.state.data because we want to refetch on undefined cases refetchOnWindowFocus: query => query.state.data !== false, }); @@ -120,8 +112,8 @@ export const CoderAuthProvider = ({ children }: CoderAuthProviderProps) => { }); // Mid-render state sync to avoid unnecessary re-renders that useEffect would - // introduce, especially since we don't know how costly re-renders could be in - // someone's arbitrarily-large Backstage deployment + // introduce. We don't know how costly re-renders could be in someone's + // arbitrarily-large Backstage deployment, so erring on the side of caution if (!isInsideGracePeriod && authState.status === 'authenticated') { setIsInsideGracePeriod(true); } @@ -145,54 +137,156 @@ export const CoderAuthProvider = ({ children }: CoderAuthProviderProps) => { return () => window.clearTimeout(distrustTimeoutId); }, [authState.status]); + const isAuthenticated = validAuthStatuses.includes(authState.status); + // Sets up subscription to spy on potentially-expired tokens. Can't do this // outside React because we let the user connect their own queryClient const queryClient = useQueryClient(); useEffect(() => { - let isRefetchingTokenQuery = false; - const queryCache = queryClient.getQueryCache(); + if (!isAuthenticated) { + return undefined; + } - const unsubscribe = queryCache.subscribe(async event => { + // Pseudo-mutex; makes sure that if we get a bunch of errors, only one + // revalidation will be processed at a time + let isRevalidating = false; + + const revalidateTokenOnError = async (event: QueryCacheNotifyEvent) => { const queryError = event.query.state.error; + const shouldRevalidate = - !isRefetchingTokenQuery && - queryError instanceof BackstageHttpError && + isAuthenticated && + !isRevalidating && + BackstageHttpError.isInstance(queryError) && queryError.status === 401; if (!shouldRevalidate) { return; } - isRefetchingTokenQuery = true; - await queryClient.refetchQueries({ queryKey: authQueryKey }); - isRefetchingTokenQuery = false; - }); + isRevalidating = true; + await queryClient.refetchQueries({ queryKey: sharedAuthQueryKey }); + isRevalidating = false; + }; + const queryCache = queryClient.getQueryCache(); + const unsubscribe = queryCache.subscribe(revalidateTokenOnError); return unsubscribe; + }, [queryClient, isAuthenticated]); + + const registerNewToken = useCallback((newToken: string) => { + if (newToken !== '') { + setAuthToken(newToken); + } + }, []); + + const unlinkToken = useCallback(() => { + setAuthToken(''); + window.localStorage.removeItem(TOKEN_STORAGE_KEY); + queryClient.removeQueries({ queryKey: [CODER_QUERY_KEY_PREFIX] }); }, [queryClient]); - return ( - { - if (newToken !== '') { - setAuthToken(newToken); - } - }, - ejectToken: () => { - window.localStorage.removeItem(TOKEN_STORAGE_KEY); - queryClient.removeQueries({ queryKey: [CODER_QUERY_KEY_PREFIX] }); - setAuthToken(''); - }, - }} - > - {children} - - ); -}; + return { + ...authState, + isAuthenticated, + registerNewToken, + unlinkToken, + }; +} + +type AuthFallbackState = Readonly<{ + trackComponent: TrackComponent; + hasNoAuthInputs: boolean; +}>; + +function useAuthFallbackState(): AuthFallbackState { + // Can't do state syncs or anything else that would normally minimize + // re-renders here because we have to wait for the entire application to + // complete its initial render before we can decide if we need a fallback UI + const [isMounted, setIsMounted] = useState(false); + useEffect(() => { + setIsMounted(true); + }, []); + + // Not the biggest fan of needing to keep the two pieces of state in sync, but + // setting the render state to a simple boolean rather than the whole Set + // means that we re-render only when we go from 0 trackers to 1+, or from 1+ + // trackers to 0. We don't care about the exact number of components being + // tracked - just whether we have any at all + const [hasTrackers, setHasTrackers] = useState(false); + const trackedComponentsRef = useRef>(null!); + if (trackedComponentsRef.current === null) { + trackedComponentsRef.current = new Set(); + } + + const trackComponent = useCallback((componentId: string) => { + // React will bail out of re-renders if you dispatch the same state value + // that it already has, and that's easier to guarantee since the UI state + // only has a primitive. Calling this function too often should cause no + // problems, and most calls should be a no-op + const syncTrackerToUi = () => { + setHasTrackers(trackedComponentsRef.current.size > 0); + }; + + trackedComponentsRef.current.add(componentId); + syncTrackerToUi(); + + return () => { + trackedComponentsRef.current.delete(componentId); + syncTrackerToUi(); + }; + }, []); + + return { + trackComponent, + hasNoAuthInputs: isMounted && !hasTrackers, + }; +} + +/** + * Exposes auth state for other components, but has additional logic for spying + * on consumers of the hook. + * + * Caveats: + * 1. This hook should *NEVER* be exposed to the end user + * 2. All official Coder plugin components should favor this hook over + * useEndUserCoderAuth when possible + * + * A fallback UI for letting the user input auth information will appear if + * there are no official Coder components that are able to give the user a way + * to do that through normal user flows. + */ +export function useInternalCoderAuth(): CoderAuth { + const trackComponent = useContext(AuthTrackingContext); + if (trackComponent === null) { + throw new Error('Unable to retrieve state for displaying fallback auth UI'); + } + + // Assuming trackComponent is set up properly, the values of it and instanceId + // should both be stable until whatever component is using this hook unmounts. + // Values only added to dependency array to satisfy ESLint + const instanceId = useId(); + useEffect(() => { + const cleanupTracking = trackComponent(instanceId); + return cleanupTracking; + }, [instanceId, trackComponent]); + + return useEndUserCoderAuth(); +} + +/** + * Exposes Coder auth state to the rest of the UI. + */ +// This hook should only be used by end users trying to use the Coder API inside +// Backstage. The hook is renamed on final export to avoid confusion +export function useEndUserCoderAuth(): CoderAuth { + const authContextValue = useContext(AuthStateContext); + if (authContextValue === null) { + throw new Error('Cannot retrieve auth information from CoderProvider'); + } + + return authContextValue; +} type GenerateAuthStateInputs = Readonly<{ authToken: string; @@ -238,7 +332,7 @@ function generateAuthState({ }; } - if (authValidityQuery.error instanceof BackstageHttpError) { + if (BackstageHttpError.isInstance(authValidityQuery.error)) { const deploymentLikelyUnavailable = authValidityQuery.error.status === 504 || (authValidityQuery.error.status === 200 && @@ -328,6 +422,269 @@ function generateAuthState({ }; } -function readAuthToken(): string { - return window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? ''; +// Have to get the root of the React application to adjust its dimensions when +// we display the fallback UI. Sadly, we can't assert that the root is always +// defined from outside a UI component, because throwing any errors here would +// blow up the entire Backstage application, and wreck all the other plugins +const mainAppRoot = document.querySelector(BACKSTAGE_APP_ROOT_ID); + +type StyleKey = 'landmarkWrapper' | 'dialogButton' | 'logo'; +type StyleProps = Readonly<{ isDialogOpen: boolean }>; + +const useFallbackStyles = makeStyles(theme => ({ + landmarkWrapper: ({ isDialogOpen }) => ({ + zIndex: isDialogOpen ? 0 : 9999, + position: 'fixed', + bottom: theme.spacing(2), + width: '100%', + maxWidth: 'fit-content', + left: '50%', + transform: 'translateX(-50%)', + }), + + dialogButton: { + display: 'flex', + flexFlow: 'row nowrap', + columnGap: theme.spacing(1), + alignItems: 'center', + }, + + logo: { + fill: theme.palette.primary.contrastText, + width: theme.spacing(3), + }, +})); + +function FallbackAuthUi() { + /** + * Add additional padding to the bottom of the main app to make sure that even + * with the fallback UI in place, it won't permanently cover up any of the + * other content as long as the user scrolls down far enough. + * + * Involves jumping through a bunch of hoops since we don't have 100% control + * over the Backstage application. Need to minimize risks of breaking existing + * Backstage styling or other plugins + */ + const fallbackRef = useRef(null); + useLayoutEffect(() => { + const fallback = fallbackRef.current; + const mainAppContainer = + mainAppRoot?.querySelector('main') ?? null; + + if (fallback === null || mainAppContainer === null) { + return undefined; + } + + // Adding a new style node lets us override the existing styles via the CSS + // cascade rather than directly modifying them, which minimizes the risks of + // breaking anything. If we were to modify the styles and try resetting them + // with the cleanup function, there's a risk the cleanup function would have + // closure over stale values and try "resetting" things to a value that is + // no longer used + const overrideStyleNode = document.createElement('style'); + overrideStyleNode.type = 'text/css'; + + // Using ComputedStyle objects because they maintain live links to computed + // properties. Plus, since most styling goes through MUI's makeStyles (which + // is based on CSS classes), trying to access properties directly off the + // nodes won't always work + const liveAppStyles = getComputedStyle(mainAppContainer); + const liveFallbackStyles = getComputedStyle(fallback); + + let prevPaddingBottom: string | undefined = undefined; + const updatePaddingForFallbackUi: MutationCallback = () => { + const prevInnerHtml = overrideStyleNode.innerHTML; + overrideStyleNode.innerHTML = ''; + const paddingBottomWithNoOverride = liveAppStyles.paddingBottom || '0px'; + + if (paddingBottomWithNoOverride === prevPaddingBottom) { + overrideStyleNode.innerHTML = prevInnerHtml; + return; + } + + // parseInt will automatically remove units from bottom property + const fallbackBottom = parseInt(liveFallbackStyles.bottom || '0', 10); + const normalized = Number.isNaN(fallbackBottom) ? 0 : fallbackBottom; + const paddingToAdd = fallback.offsetHeight + normalized; + + overrideStyleNode.innerHTML = ` + .${FALLBACK_UI_OVERRIDE_CLASS_NAME} { + padding-bottom: calc(${paddingBottomWithNoOverride} + ${paddingToAdd}px) !important; + } + `; + + // Only update prev padding after state changes have definitely succeeded + prevPaddingBottom = paddingBottomWithNoOverride; + }; + + const observer = new MutationObserver(updatePaddingForFallbackUi); + observer.observe(document.head, { childList: true }); + observer.observe(mainAppContainer, { + childList: false, + subtree: false, + attributes: true, + attributeFilter: ['class', 'style'], + }); + + // Applying mutations after we've started observing will trigger the + // callback, but as long as it's set up properly, the user shouldn't notice. + // Also serves a way to ensure the mutation callback runs at least once + document.head.append(overrideStyleNode); + mainAppContainer.classList.add(FALLBACK_UI_OVERRIDE_CLASS_NAME); + + return () => { + // Be sure to disconnect observer before applying other cleanup mutations + observer.disconnect(); + overrideStyleNode.remove(); + mainAppContainer.classList.remove(FALLBACK_UI_OVERRIDE_CLASS_NAME); + }; + }, []); + + const hookId = useId(); + const [isDialogOpen, setIsDialogOpen] = useState(false); + const styles = useFallbackStyles({ isDialogOpen }); + + // Wrapping fallback button in landmark so that screen reader users can jump + // straight to the button from a screen reader directory rotor, and don't have + // to navigate through every single other element first + const landmarkId = `${hookId}-landmark`; + const fallbackUi = ( +

+ + + setIsDialogOpen(true)} + onClose={() => setIsDialogOpen(false)} + triggerClassName={styles.dialogButton} + > + + Authenticate with Coder + +

+ ); + + return createPortal(fallbackUi, document.body); +} + +/** + * Sorry about how wacky this approach is, but this setup should simplify the + * code literally everywhere else in the plugin. + * + * The setup is that we have two versions of the tracking context: one that has + * the live trackComponent function, and one that has the dummy. The main parts + * of the UI get the live version, and the parts of the UI that deal with the + * fallback auth UI get the dummy version. + * + * By having two contexts, we can dynamically expose or hide the tracking + * state for any components that use any version of the Coder auth state. All + * other components can use the same hook without being aware of where they're + * being mounted. That means you can use the exact same components in either + * region without needing to rewrite anything outside this file. + * + * Any other component that uses useInternalCoderAuth will reach up the + * component tree until it can grab *some* kind of tracking function. The hook + * only cares about whether it got a function at all; it doesn't care about what + * it does. The hook will call the function either way, but only the components + * in the "live" region will influence whether the fallback UI should be + * displayed. + * + * Dummy function defined outside the component to prevent risk of needless + * re-renders through Context. + */ + +/** + * A dummy version of the component tracker function. + * + * In production, this is used to define a dummy version of the context + * dependency for the "fallback auth UI" portion of the app. + * + * In testing, this is used for the vast majority of component tests to provide + * the tracker dependency and make sure that the components can properly render + * without having to be wired up to the entire plugin. + */ +export const dummyTrackComponent: TrackComponent = () => { + // Deliberately perform a no-op on initial call + return () => { + // And deliberately perform a no-op on cleanup + }; +}; + +export type FallbackAuthInputBehavior = 'restrained' | 'assertive' | 'hidden'; +type AuthFallbackProvider = FC< + Readonly< + PropsWithChildren<{ + isAuthenticated: boolean; + }> + > +>; + +// Matches each behavior for the fallback auth UI to a specific provider. This +// is screwy code, but by doing this, we ensure that if the user chooses not to +// have dynamic a auth fallback UI, their app will have far less tracking logic, +// meaning less performance overhead and fewer re-renders from something the +// user isn't even using +const fallbackProviders = { + hidden: ({ children }) => ( + + {children} + + ), + + assertive: ({ children, isAuthenticated }) => ( + // Don't need the live version of the tracker function if we're always + // going to be showing the fallback auth input no matter what + + {children} + {!isAuthenticated && } + + ), + + // Have to give function a name to satisfy ES Lint (rules of hooks) + restrained: function Restrained({ children, isAuthenticated }) { + const { hasNoAuthInputs, trackComponent } = useAuthFallbackState(); + const needFallbackUi = !isAuthenticated && hasNoAuthInputs; + + return ( + <> + + {children} + + + {needFallbackUi && ( + + + + )} + + ); + }, +} as const satisfies Record; + +export type CoderAuthProviderProps = Readonly< + PropsWithChildren<{ + fallbackAuthUiMode?: FallbackAuthInputBehavior; + }> +>; + +export function CoderAuthProvider({ + children, + fallbackAuthUiMode = 'restrained', +}: CoderAuthProviderProps) { + const authState = useAuthState(); + const AuthFallbackProvider = fallbackProviders[fallbackAuthUiMode]; + + return ( + + + {children} + + + ); } diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.test.tsx index 2a240a75..b58af930 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.test.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.test.tsx @@ -1,17 +1,24 @@ -import React, { PropsWithChildren } from 'react'; +import React from 'react'; import { renderHook } from '@testing-library/react'; import { act, waitFor } from '@testing-library/react'; -import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; -import { configApiRef, errorApiRef } from '@backstage/core-plugin-api'; +import { TestApiProvider } from '@backstage/test-utils'; +import { + configApiRef, + discoveryApiRef, + errorApiRef, + identityApiRef, +} from '@backstage/core-plugin-api'; import { CoderProvider } from './CoderProvider'; import { useCoderAppConfig } from './CoderAppConfigProvider'; -import { type CoderAuth, useCoderAuth } from './CoderAuthProvider'; +import { type CoderAuth, useInternalCoderAuth } from './CoderAuthProvider'; import { getMockConfigApi, + getMockDiscoveryApi, getMockErrorApi, + getMockIdentityApi, mockAppConfig, mockCoderAuthToken, } from '../../testHelpers/mockBackstageData'; @@ -19,6 +26,11 @@ import { getMockQueryClient, renderHookAsCoderEntity, } from '../../testHelpers/setup'; +import { UrlSync, urlSyncApiRef } from '../../api/UrlSync'; +import { + CoderClientWrapper, + coderClientWrapperApiRef, +} from '../../api/CoderClient'; describe(`${CoderProvider.name}`, () => { describe('AppConfig', () => { @@ -42,57 +54,42 @@ describe(`${CoderProvider.name}`, () => { expect(result.current).toBe(mockAppConfig); } }); - - // Our documentation pushes people to define the config outside a component, - // just to stabilize the memory reference for the value, and make sure that - // memoization caches don't get invalidated too often. This test is just a - // safety net to catch what happens if someone forgets - test('Context value will change by reference on re-render if defined inline inside a parent', () => { - const ParentComponent = ({ children }: PropsWithChildren) => { - const configThatChangesEachRender = { ...mockAppConfig }; - - return wrapInTestApp( - - - {children} - - , - ); - }; - - const { result, rerender } = renderHook(useCoderAppConfig, { - wrapper: ParentComponent, - }); - - const firstResult = result.current; - rerender(); - - expect(result.current).not.toBe(firstResult); - expect(result.current).toEqual(firstResult); - }); }); describe('Auth', () => { // Can't use the render helpers because they all assume that the auth isn't // core to the functionality. In this case, you do need to bring in the full - // CoderProvider + // CoderProvider to make sure that it's working properly const renderUseCoderAuth = () => { - return renderHook(useCoderAuth, { + const discoveryApi = getMockDiscoveryApi(); + const configApi = getMockConfigApi(); + const identityApi = getMockIdentityApi(); + + const urlSync = new UrlSync({ + apis: { discoveryApi, configApi }, + }); + + const coderClientApi = new CoderClientWrapper({ + apis: { urlSync, identityApi }, + }); + + return renderHook(useInternalCoderAuth, { wrapper: ({ children }) => ( {children} @@ -101,7 +98,7 @@ describe(`${CoderProvider.name}`, () => { }); }; - it('Should let the user eject their auth token', async () => { + it('Should let the user unlink their auth token', async () => { const { result } = renderUseCoderAuth(); act(() => result.current.registerNewToken(mockCoderAuthToken)); @@ -115,7 +112,7 @@ describe(`${CoderProvider.name}`, () => { ); }); - act(() => result.current.ejectToken()); + act(() => result.current.unlinkToken()); expect(result.current).toEqual( expect.objectContaining>({ diff --git a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.tsx b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.tsx index 4c8d0898..079e1f38 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderProvider/CoderProvider.tsx @@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { CoderAuthProvider } from './CoderAuthProvider'; import { CoderAppConfigProvider } from './CoderAppConfigProvider'; import { CoderErrorBoundary } from '../CoderErrorBoundary'; -import { BackstageHttpError } from '../../api'; +import { BackstageHttpError } from '../../api/errors'; const MAX_FETCH_FAILURES = 3; @@ -15,7 +15,7 @@ export type CoderProviderProps = ComponentProps & const shouldRetryRequest = (failureCount: number, error: unknown): boolean => { const isBelowThreshold = failureCount < MAX_FETCH_FAILURES; - if (!(error instanceof BackstageHttpError)) { + if (!BackstageHttpError.isInstance(error)) { return isBelowThreshold; } @@ -45,13 +45,16 @@ const defaultClient = new QueryClient({ export const CoderProvider = ({ children, appConfig, + fallbackAuthUiMode = 'restrained', queryClient = defaultClient, }: CoderProviderProps) => { return ( - {children} + + {children} + diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.test.tsx new file mode 100644 index 00000000..8acc04a1 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.test.tsx @@ -0,0 +1,178 @@ +/** + * @file Defines integration tests for all sub-components in the + * CoderWorkspacesCard directory. + */ +import React from 'react'; +import { screen, waitFor } from '@testing-library/react'; +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +import { mockAuthStates } from '../../testHelpers/mockBackstageData'; +import { + mockWorkspaceNoParameters, + mockWorkspaceWithMatch2, + mockWorkspacesList, +} from '../../testHelpers/mockCoderPluginData'; +import { type CoderAuthStatus } from '../CoderProvider'; +import { CoderWorkspacesCard } from './CoderWorkspacesCard'; +import userEvent from '@testing-library/user-event'; + +type RenderInputs = Readonly<{ + authStatus?: CoderAuthStatus; + readEntityData?: boolean; +}>; + +function renderWorkspacesCard(input?: RenderInputs) { + const { authStatus = 'authenticated', readEntityData = false } = input ?? {}; + + return renderInCoderEnvironment({ + auth: mockAuthStates[authStatus], + children: , + }); +} + +const matchers = { + authenticationForm: /Authenticate with Coder/i, + searchTitle: /Coder Workspaces/i, + searchbox: /Search your Coder workspaces/i, + emptyState: /Use the search bar to find matching Coder workspaces/i, +} as const satisfies Record; + +describe(`${CoderWorkspacesCard.name}`, () => { + describe('General behavior', () => { + it('Shows the authentication form when the user is not authenticated', async () => { + await renderWorkspacesCard({ + authStatus: 'tokenMissing', + }); + + expect(() => { + screen.getByRole('form', { name: matchers.authenticationForm }); + }).not.toThrow(); + }); + + it('Shows the workspaces list when the user is authenticated (exposed as an accessible search landmark)', async () => { + await renderWorkspacesCard(); + + await waitFor(() => { + expect(() => { + screen.getByRole('search', { name: matchers.searchTitle }); + }).not.toThrow(); + }); + }); + + it('Shows zero workspaces when the query text matches nothing', async () => { + const entityValues = [true, false] as const; + const user = userEvent.setup(); + + for (const value of entityValues) { + const { unmount } = await renderWorkspacesCard({ + readEntityData: value, + }); + + const searchbox = await screen.findByRole('searchbox', { + name: matchers.searchbox, + }); + + await user.tripleClick(searchbox); + await user.keyboard('[Backspace]'); + await user.keyboard('I-can-do-it-I-can-do-it-nine-times'); + + await waitFor(() => { + // getAllByRole will throw if there isn't at least one node matched + const listItems = screen.queryAllByRole('listitem'); + expect(listItems.length).toBe(0); + }); + + unmount(); + } + }); + }); + + describe('With readEntityData set to false', () => { + it('Will NOT filter any workspaces by the current repo', async () => { + await renderWorkspacesCard({ readEntityData: false }); + const workspaceItems = await screen.findAllByRole('listitem'); + expect(workspaceItems.length).toEqual(mockWorkspacesList.length); + }); + + it('Lets the user filter the workspaces by their query text', async () => { + await renderWorkspacesCard({ readEntityData: false }); + const searchbox = await screen.findByRole('searchbox', { + name: matchers.searchbox, + }); + + const user = userEvent.setup(); + await user.tripleClick(searchbox); + await user.keyboard(mockWorkspaceNoParameters.name); + + // If more than one workspace matches, that throws an error + const onlyWorkspace = await screen.findByRole('listitem'); + expect(onlyWorkspace).toHaveTextContent(mockWorkspaceNoParameters.name); + }); + + it('Shows all workspaces when query text is empty', async () => { + await renderWorkspacesCard({ readEntityData: false }); + const searchbox = await screen.findByRole('searchbox', { + name: matchers.searchbox, + }); + + const user = userEvent.setup(); + await user.tripleClick(searchbox); + await user.keyboard('[Backspace]'); + + const allWorkspaces = await screen.findAllByRole('listitem'); + expect(allWorkspaces.length).toEqual(mockWorkspacesList.length); + }); + }); + + describe('With readEntityData set to true', () => { + it('Will show only the workspaces that match the current repo', async () => { + await renderWorkspacesCard({ readEntityData: true }); + const workspaceItems = await screen.findAllByRole('listitem'); + expect(workspaceItems.length).toEqual(2); + }); + + it('Lets the user filter the workspaces by their query text (on top of filtering from readEntityData)', async () => { + await renderWorkspacesCard({ readEntityData: true }); + + await waitFor(() => { + const workspaceItems = screen.getAllByRole('listitem'); + expect(workspaceItems.length).toBe(2); + }); + + const user = userEvent.setup(); + const searchbox = await screen.findByRole('searchbox', { + name: matchers.searchbox, + }); + + await user.tripleClick(searchbox); + await user.keyboard(mockWorkspaceWithMatch2.name); + + await waitFor(() => { + const newWorkspaceItems = screen.getAllByRole('listitem'); + expect(newWorkspaceItems.length).toBe(1); + }); + }); + + /** + * For performance reasons, the queries for getting workspaces by repo are + * disabled when the query string is empty. + * + * Even with the API endpoint for searching workspaces by build parameter, + * you still have to shoot off a bunch of requests just to find everything + * that could possibly match your Backstage deployment's config options. + */ + it('Will not show any workspaces at all when the query text is empty', async () => { + await renderWorkspacesCard({ readEntityData: true }); + + const user = userEvent.setup(); + const searchbox = await screen.findByRole('searchbox', { + name: matchers.searchbox, + }); + + await user.tripleClick(searchbox); + await user.keyboard('[Backspace]'); + + const emptyState = await screen.findByText(matchers.emptyState); + expect(emptyState).toBeInTheDocument(); + }); + }); +}); diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CoderWorkspacesCard.tsx index 64bff808..626b8122 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,28 +16,32 @@ const useStyles = makeStyles(theme => ({ }, })); -export const CoderWorkspacesCard = ( - props: Omit, -) => { +type Props = Omit; + +export const CoderWorkspacesCard = (props: Props) => { const styles = useStyles(); return ( - - - - - - } - /> - + + + + + } + /> + } + {...props} + >

+ ); }; diff --git a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx new file mode 100644 index 00000000..6c219531 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.test.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { + mockAppConfig, + mockCoderWorkspacesConfig, +} from '../../testHelpers/mockBackstageData'; +import { renderInCoderEnvironment } from '../../testHelpers/setup'; +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: Partial = { + workspacesConfig: mockWorkspacesConfig, + }; + + return renderInCoderEnvironment({ + children: ( + + + + ), + }); +} + +describe(`${CreateWorkspaceLink.name}`, () => { + it('Displays a link based on the current entity', async () => { + await render(); + const link = screen.getByRole('link'); + + expect(link).not.toBeDisabled(); + expect(link.target).toEqual('_blank'); + expect(link.href).toMatch( + new RegExp(`^${mockAppConfig.deployment.accessUrl}/`), + ); + }); + + it('Will display a tooltip while hovered over', async () => { + await render(); + const link = screen.getByRole('link'); + const user = userEvent.setup(); + + await user.hover(link); + 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('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 06a44f39..a0a1ab84 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/CreateWorkspaceLink.tsx @@ -1,36 +1,57 @@ -import React, { type AnchorHTMLAttributes, type ForwardedRef } from 'react'; -import { makeStyles } from '@material-ui/core'; +import React, { + type AnchorHTMLAttributes, + type ForwardedRef, + type ReactElement, +} from 'react'; +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' | 'noLinkTooltipContainer'; + +const useStyles = makeStyles(theme => { const padding = theme.spacing(0.5); return { - root: { + root: ({ canCreateWorkspace }) => ({ 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', }, + }), + + noLinkTooltipContainer: { + display: 'block', + maxWidth: '24em', }, }; }); type CreateButtonLinkProps = Readonly< - AnchorHTMLAttributes & { - tooltipText?: string; + Omit, 'aria-disabled'> & { + tooltipText?: string | ReactElement; tooltipProps?: Omit; tooltipRef?: ForwardedRef; } @@ -45,22 +66,58 @@ export const CreateWorkspaceLink = ({ tooltipProps = {}, ...delegatedProps }: CreateButtonLinkProps) => { - const styles = useStyles(); - const { workspaceCreationLink } = useWorkspacesCardContext(); + const { workspacesConfig } = useWorkspacesCardContext(); + const canCreateWorkspace = Boolean(workspacesConfig.creationUrl); + const styles = useStyles({ canCreateWorkspace }); return ( - + + Please add a template name value. More info available in the + accordion at the bottom of this widget. + + ) + } + {...tooltipProps} + > + {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- + Some browsers will render out 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..d170db36 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.test.tsx @@ -0,0 +1,180 @@ +import React from 'react'; +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..a6ccfb19 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ExtraActionsButton.tsx @@ -7,7 +7,7 @@ import React, { } 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 +102,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 +137,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..7bfd494a --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/HeaderRow.test.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +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..b96f2361 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 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..df18f7d3 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.test.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +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..ac4f44fe 100644 --- a/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.tsx +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/Placeholder.tsx @@ -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..5be7284b --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.test.tsx @@ -0,0 +1,233 @@ +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 '../../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..34666194 --- /dev/null +++ b/plugins/backstage-plugin-coder/src/components/CoderWorkspacesCard/ReminderAccordion.tsx @@ -0,0 +1,146 @@ +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 { 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..ad6c13bb --- /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 React, { 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..5814d55b 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 @@ +/** + * @file Wires up all the core logic for passing values down to the + * sub-components in the same directory. + */ import React, { 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 +