Format UI code using pre-commit

[ChrisSmithCGI]

Resolves #4955

What is being addressed

Added a prettier pre-commit hook for formatting the frontend codebase

How is this addressed

• Describe the changes made, and if appropriate, why they are addressed this way
• Note any pending work (with links to the issues that will address them)
• Update documentation
• Update CHANGELOG.md if needed
• Increment template version if needed, for guidelines see Authoring templates - versioning

[github-actions]

Unit Test Results

0 tests   0 ✅  0s ⏱️
0 suites  0 💤
0 files    0 ❌

Results for commit 0fc3528.

♻️ This comment has been updated with latest results.

[Copilot]

Pull request overview

Adds a Prettier-based formatting workflow for the UI by introducing a pre-commit hook and applying formatting updates across the frontend codebase to keep UI sources consistently styled.

Changes:

• Add a Prettier hook to .pre-commit-config.yaml scoped to ui/app.
• Apply Prettier-driven formatting changes across UI source and test files.
• Update CHANGELOG.md to note the new formatting support.

Reviewed changes

Copilot reviewed 52 out of 56 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
ui/app/vite.config.ts	Formatting-only change (trailing comma).
ui/app/src/test-utils/store.test.ts	Prettier formatting (quotes/spacing).
ui/app/src/test-utils/mockData.ts	Prettier formatting (quotes/line wrapping).
ui/app/src/test-utils/index.tsx	Prettier formatting (imports, JSX wrapping, quotes).
ui/app/src/test-utils/fluentui-mocks.tsx	Prettier formatting (wrapping/commas/quotes).
ui/app/src/test-utils/fluentui-mocks.test.tsx	Prettier formatting (wrapping/quotes).
ui/app/src/test-utils/common-mocks.tsx	Prettier formatting (wrapping/quotes/commas).
ui/app/src/setupTests.ts	Prettier formatting (wrapping/spacing).
ui/app/src/models/apiEndpoints.ts	Formatting-only change (trailing comma).
ui/app/src/hooks/useComponentManager.test.tsx	Formatting-only change (trailing comma).
ui/app/src/hooks/useAuthApiCall.test.ts	Prettier formatting (quotes/line wrapping/commas).
ui/app/src/config.source.json	JSON re-indentation/formatting.
ui/app/src/components/workspaces/WorkspaceUsersAssignNew.tsx	Prettier formatting (imports/wrapping) plus reveals an incorrect error message string.
ui/app/src/components/workspaces/WorkspaceUsers.tsx	Prettier formatting (imports/wrapping/spacing).
ui/app/src/components/workspaces/WorkspaceServiceItem.tsx	Prettier formatting (commas/line wrapping).
ui/app/src/components/workspaces/WorkspaceProvider.tsx	Prettier formatting (JSX fragment wrapping).
ui/app/src/components/workspaces/WorkspaceList.tsx	Prettier formatting (wrapping/spacing).
ui/app/src/components/workspaces/WorkspaceList.logic.test.ts	Prettier formatting (wrapping/spacing).
ui/app/src/components/workspaces/WorkspaceLeftNav.tsx	Prettier formatting (object literal formatting).
ui/app/src/components/shared/UserMenu.test.tsx	Prettier formatting (quotes/commas).
ui/app/src/components/shared/TopNav.tsx	Prettier formatting (import quotes and JSX wrapping).
ui/app/src/components/shared/TopNav.test.tsx	Prettier formatting (mock formatting/wrapping).
ui/app/src/components/shared/StatusBadge.test.tsx	Prettier formatting (quotes/line wrapping).
ui/app/src/components/shared/SharedServiceItem.test.tsx	Prettier formatting (line wrapping/commas) and fixes a malformed test separation.
ui/app/src/components/shared/SecuredByRole.test.tsx	Prettier formatting (imports/commas/JSX wrapping).
ui/app/src/components/shared/ResourceOperationStepsList.tsx	Prettier formatting (type wrapping).
ui/app/src/components/shared/ResourceOperationsList.tsx	Prettier formatting (conditional wrapping).
ui/app/src/components/shared/ResourceOperationListItem.tsx	Prettier formatting (JSX wrapping).
ui/app/src/components/shared/ResourceHeader.test.tsx	Prettier formatting and large test-file reformat for readability.
ui/app/src/components/shared/ResourceCard.tsx	Prettier formatting (wrapping/JSX formatting).
ui/app/src/components/shared/ResourceCard.test.tsx	Prettier formatting (imports/wrapping).
ui/app/src/components/shared/ResourceBody.test.tsx	Prettier formatting and large test-file reformat for readability.
ui/app/src/components/shared/RequestsList.tsx	Prettier formatting (object literal indentation/wrapping).
ui/app/src/components/shared/PowerStateBadge.test.tsx	Prettier formatting (indentation).
ui/app/src/components/shared/GenericErrorBoundary.test.tsx	Prettier formatting (mock formatting/wrapping).
ui/app/src/components/shared/Footer.tsx	Prettier formatting (JSX wrapping).
ui/app/src/components/shared/Footer.test.tsx	Prettier formatting (imports/wrapping/object literals).
ui/app/src/components/shared/ExceptionLayout.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/ErrorPanel.test.tsx	Prettier formatting (imports/wrapping).
ui/app/src/components/shared/CostsTag.tsx	Prettier formatting (import and wrapping).
ui/app/src/components/shared/CostsTag.test.tsx	Prettier formatting (wrapping/spacing).
ui/app/src/components/shared/ConfirmUpgradeResource.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/ConfirmDisableEnableResource.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/ConfirmDeleteResource.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/ConfirmCopyUrlToClipboard.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/ComplexItemDisplay.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/CliCommand.tsx	Prettier formatting (JSX wrapping).
ui/app/src/components/shared/CliCommand.test.tsx	Prettier formatting (imports/wrapping/commas).
ui/app/src/components/shared/airlock/AirlockViewRequest.tsx	Prettier formatting (dependency array wrap; trailing comma).
ui/app/src/components/shared/airlock/AirlockReviewRequest.tsx	Whitespace/formatting cleanup.
ui/app/src/components/shared/airlock/Airlock.tsx	Prettier formatting (conditional expression wrapping).
ui/app/src/App.tsx	Prettier formatting (line wrapping).
ui/app/src/App.test.tsx	Prettier formatting (mocks/wrapping/commas).
ui/app/package.json	Formatting-only change (whitespace/newline).
CHANGELOG.md	Adds #4955 entries (currently duplicated across sections) and whitespace cleanup.
.pre-commit-config.yaml	Adds Prettier hook for UI formatting (currently has invalid YAML indentation for additional_dependencies).

[Copilot]

Pull request overview

Copilot reviewed 52 out of 56 changed files in this pull request and generated 3 comments.

[marrobi]

Too much to review. Trust its been tested interactively.

[ChrisSmithCGI]

setting ui/app/.prettierrc to the below would result in fewer changes, my personal preference is splitting the PR into two where possible, e.g config changes in one and formatting changes as a separate PR.

{                                                                                                     
      "singleQuote": false,                                                                               
      "semi": true,                                                                                       
      "trailingComma": "all",                                                                             
      "printWidth": 100                                                                                   
    }           

It actually yielded more changes. Either way, I concur with splitting the PRs. That would be my preference too.

[JC-wk]

setting ui/app/.prettierrc to the below would result in fewer changes, my personal preference is splitting the PR into two where possible, e.g config changes in one and formatting changes as a separate PR.

{                                                                                                     
      "singleQuote": false,                                                                               
      "semi": true,                                                                                       
      "trailingComma": "all",                                                                             
      "printWidth": 100                                                                                   
    }           

It actually yielded more changes. Either way, I concur with splitting the PRs. That would be my preference too.

hmm, I think it's mostly down to the line lengths, I suppose the volume of changes is not really a problem if it's all formatting.
Maybe longer like 120

Prettier defaults are

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

[ChrisSmithCGI]

• Updated printWidth to 120
• Rebase against main
• Reset all changes other than those pertinent to the config changes
  • Formatting fixes to follow in separate PR

[ChrisSmithCGI]

Getting false-positives from paths-filter action due to rebasing-shenanigans so I'm going to raise a fresh PR