Last updated Mar 8, 2024

Taking a quick break from Backstage stuff to look into this more. Taking a note from @aslilac's post for the Storybook milestone (all table scrolls horizontally if there is any overflow):

Global reusable hooks

Done?	Hook name	Needs	Comments
✅	useDebouncedFunction	Touch up	One of the first custom hooks tests I ever wrote
✅	useDebouncedValue	Touch up	One of the first custom hooks tests I ever wrote
✅	useCustomEvent	Touch up	In a great spot; some assertions could be simplified
✅	useEffectEvent	Touch up	Not much to it, but it's become ingrained in many parts of the codebase already
	useClassName	Tests	My main worry with this hook is that it's adding CSS directly to the HTML from within the render logic (it's using Vanilla Emotion, and not the React-specific flavor that uses `useInsertionEffect`. Not sure if that also means that styles can never be cleaned up
✅	useClickable	Tests	Could probably have some TypeScript type definitions cleaned up too (sorry)
	useClickableTableRow	Redesign or deletion	This is causing more accessibility problems than it's solving. See #12248
✅	useClipboard	Tests	Especially important, since we had a regression around this
✅	usePaginatedQuery	Re-review	Might be good to go; there are a lot of tests for this already. By far the most complicated hook in this group
	usePagination	Tests	Feels like it's right at the boundary between a custom hook and a utility function; might be better to remove the hook behavior
✅	useSearchParamKey	Tests	Previously `useTab`; got beefed up and generalized
	useTime	Tests	Wondering if we could start using this hook to get rid of (or at least minimize) some of the time-based side effects we're baking directly into render logic...
	useWorkspaceBuildLogs	Tests	Uses websockets under the hood – not sure how tough that will be to deal with, considering that MSW apparently hasn't added support yet

Context-based hooks

Hook name	Filepath	Needs	Comments
useProxyLatency	`./src/contexts/useProxyLatency`	Possible touch-up?	This thing scares me. There's already a test for the overall context, though
useAuth	`./src/contexts/auth/useAuth`	Possible touch-up?	Used in several places; probably covered already via the test for the RequireAuth component
useMe	`./src/contexts/auth/useMe`	Possible touch-up?	Used in several places; probably covered already via the test for the RequireAuth component
useOrganizationId	`./src/contexts/auth/useOrganizationId`	Possible touch-up?	Used in several places; probably covered already via the test for the RequireAuth component
usePermissions	`./src/contexts/auth/usePermissions`	Possible touch-up?	Used in several places; probably covered already via the test for the RequireAuth component

Ad-hoc hooks in individual files

Done?	Hook name	Filepath	Needs	Comments
	useCoderTheme	`./src/components/SyntaxHighlighter/coderTheme`	Tests (or could be inlined)	Very small hook used in one spot
	useFilter	`./src/components/Filter/filter`	Tests	Not general enough to go in the hooks folder, but used in several spots
	useFilterMenu	`./src/components/Filter/menu`	Tests	Not general enough to go in the hooks folder, but used in several spots
	usePopover	`./src/components/Popover`	Tests	Not general enough to go in the hooks folder, but used in several spots. Might be better to test the main component and the hook together?
	useProxy	`./src/components/ProxyContainer`	Needs to double check	Not general enough to go in the hooks folder, but used in several spots. There's a test for the component, which might be enough?
	useDashboard	`./src/modules/dashboard/useDashboard`	Possible touch-up?	Used in several places; probably covered already via the component tests
	useFeatureVisibility	`./src/modules/dashboard/useFeatureVisibility`	Possible touch-up?	Used in several places; probably covered already via the component tests
	useUpdateCheck	`./src/modules/dashboard/useUpdateCheck`	Possible touch-up?	Used in several places; probably covered already via the component tests
	useUpdateCheck	`./src/modules/dashboard/useUpdateCheck`	Has tests
	useActionFilterMenu	`./src/pages/AuditPage/AuditFilter`	Possible touch-up?	Might already be covered via component tests
	useResourceTypeFilterMenu	`./src/pages/AuditPage/AuditFilter`	Possible touch-up?	Might already be covered via component tests
✅	useWorkspaceDuplication	`./src/pages/CreateWorkspacePage/useWorkspaceDuplication`	Has tests	Might be worth moving this to the hooks folder?
	useDeploySettings	`./src/pages/DeploySettingsPage/DeploySettingsLayout`	Tests	Used in several places; no major tests for hook or components
	useTemplateLayoutContext	`./src/pages/TemplatePage/useTemplateLayoutContext`	Tests	Used in several places; no major tests for hook or components
	useDeletionDialogState	`./src/pages/TemplatePage/useDeletionDialogState`	Possible touch up?	Used in several places; no major tests for hook or components
	useTemplateSettings	`./src/pages/TemplateSettingsPage/TemplateSettingsLayout`	Tests	Used in several places; might be better as an integration test
	useWorkspacesToBeDeleted	`./src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted`	Tests	Used in three spots, but only in one file. Could probably be consolidated, in which case, the functionality would be covered by TemplateSchedulePage.test.tsx
	useSingleSignOnSection	`./src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection`	Tests	Used in three spots, but only in one file. Could probably be consolidated, in which case, the functionality would be covered by TemplateSchedulePage.test.tsx
	useTokensData	`./src/pages/UserSettingsPage/TokensPage/hooks`	Tests	Only used in one file; could be consolidated. Would still need component test
	useDeleteToken	`./src/pages/UserSettingsPage/TokensPage/hooks`	Tests	Only used in one file; could be consolidated. Would still need component test
	useStatusFilterMenu	`./src/pages/UsersPage/UsersFilter`	Tests	Only used in one file; might already be covered by component test
	useResourcesNav	`./src/pages/WorkspacesPage/useResourcesNav`	Has test	Used in several parts of the codebase; has a giant TODO comment.
	useWorkspacesSettings	`./src/pages/WorkspacesSettingsPage/WorkspacesSettingsLayout`	Tests	Might already be covered by component test; used in several spots
	useBatchActions	`./src/pages/WorkspacesPage/batchActions`	Tests	Looks like a complicated hook; definitely feels like it needs a test
	useWorkspacesData	`./src/pages/WorkspacesPage/data`	Tests	Might already be covered by component test
	useWorkspacesUpdate	`./src/pages/WorkspacesPage/data`	Tests	Might already be covered by component test
	useTemplateFilterMenu	`./src/pages/WorkspacesPage/filter`	Tests	Complicated, but only used in one spot. Could be consolidated and be covered by component test
	useStatusFilterMenu	`./src/pages/WorkspacesPage/filter`	Tests	Complicated, but only used in one spot. Could be consolidated and be covered by component test
	useDeploymentOptions	`./src/pages/utils/deployOptions`	Delete	This is just a useMemo wrapper over the deploymentOptions function, but the function likely isn't doing enough or has enough data that it's needed
	useValidationSchemaForRichParameters	`./src/pages/utils/richParameters`	Tests	Very long and complicated. Its file has tests, but none are for this function

Hooks identified with the regex:

export (function|const) use(?!State|Ref|LayoutEffect|Effect|Id|Query|Callback|Memo|Router|Theme)[A-Z][a-zA-Z]+

The only thing is that this only turned up hooks that are exported for other files to use. I'm sure there are some other hooks that could probably be deleted/touched up (I'm 99% sure useExternalAuth inside CreateWorkspacePage.tsx can be replaced with mostly derived values – only the query should be state)

I've actually been trying to get better at testing lately, and these would be a really good way for me to practice

add tests for our custom hooks #11421

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions