chore: upgrade prettier to v3 (#5424)

.prettierrc

@@ -1 +1 @@
-{}
+{"trailingComma": "es5"}

package.json

@@ -132,7 +132,7 @@
     "eslint-plugin-cypress": "2.15.2",
     "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-playwright": "1.6.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-unused-imports": "3.1.0",
     "formik-devtools-extension": "0.1.8",
@@ -145,7 +145,7 @@
     "nodemon": "3.1.0",
     "npm-package-json-lint": "7.1.0",
     "postcss-normalize": "10.0.1",
-    "prettier": "2.8.8",
+    "prettier": "3.2.5",
     "redux-mock-store": "1.5.4",
     "redux-saga-test-plan": "4.0.6",
     "sass": "1.75.0",

src/app/base/components/DhcpFormFields/DhcpFormFields.tsx

@@ -58,8 +58,8 @@ const generateOptions = (
             type === "iprange" && "start_ip" in model
               ? `${model?.start_ip} - ${model?.end_ip}`
               : type === "subnet"
-              ? ("name" in model && model.name) || ""
-              : ("fqdn" in model && model.fqdn) || "",
+                ? ("name" in model && model.name) || ""
+                : ("fqdn" in model && model.fqdn) || "",
         }))
       )
     : null;

src/app/base/components/PageContent/PageContent.tsx

@@ -55,15 +55,15 @@ const PageContent = ({
                 isSettingsPage
                   ? settingsNavItems
                   : isPreferencesPage
-                  ? preferencesNavItems
-                  : []
+                    ? preferencesNavItems
+                    : []
               }
               title={
                 isSettingsPage
                   ? "Settings"
                   : isPreferencesPage
-                  ? "My preferences"
-                  : ""
+                    ? "My preferences"
+                    : ""
               }
             />
           </div>

src/app/base/components/node/NodeLogs/hooks.test.tsx

@@ -19,8 +19,9 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 describe("machine utils", () => {
   let state: RootState;

src/app/base/components/node/OverviewCard/ControllerStatusCard/ControllerStatusCard.tsx

@@ -56,8 +56,8 @@ const getImageSyncStatus = (
           !status
             ? Labels.NoStatus
             : checkingImages
-            ? Labels.CheckingImages
-            : status
+              ? Labels.CheckingImages
+              : status
         }
       />
     );

src/app/base/hooks/base.test.tsx

@@ -64,7 +64,7 @@ describe("useScrollOnRender", () => {
       html.scrollTop = 10;
     }
     const { result } = renderHook(() => useScrollOnRender());
-    targetNode.getBoundingClientRect = () => ({ y: 10 } as DOMRect);
+    targetNode.getBoundingClientRect = () => ({ y: 10 }) as DOMRect;
     result.current(targetNode);
     expect(scrollToSpy).not.toHaveBeenCalled();
   });
@@ -74,7 +74,7 @@ describe("useScrollOnRender", () => {
       html.scrollTop = 100;
     }
     const { result } = renderHook(() => useScrollOnRender());
-    targetNode.getBoundingClientRect = () => ({ y: 1000 } as DOMRect);
+    targetNode.getBoundingClientRect = () => ({ y: 1000 }) as DOMRect;
     result.current(targetNode);
     expect(scrollToSpy).toHaveBeenCalledWith({
       top: 1000,
@@ -88,7 +88,7 @@ describe("useScrollOnRender", () => {
       html.scrollTop = 1000;
     }
     const { result } = renderHook(() => useScrollOnRender());
-    targetNode.getBoundingClientRect = () => ({ y: 10 } as DOMRect);
+    targetNode.getBoundingClientRect = () => ({ y: 10 }) as DOMRect;
     result.current(targetNode);
     expect(scrollToSpy).toHaveBeenCalledWith({
       top: 10,
@@ -103,7 +103,7 @@ describe("useScrollOnRender", () => {
     }
     const { result } = renderHook(() => useScrollOnRender());
     targetNode.getBoundingClientRect = () =>
-      ({ height: 400, y: 400 } as DOMRect);
+      ({ height: 400, y: 400 }) as DOMRect;
     result.current(targetNode);
     expect(scrollToSpy).toHaveBeenCalledWith({
       top: 400,

src/app/base/hooks/node-networking.test.tsx

@@ -16,8 +16,9 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 describe("machine hook utils", () => {
   let state: RootState;

src/app/base/hooks/node.test.tsx

@@ -24,8 +24,9 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 describe("node hooks", () => {
   describe("useIsRackControllerConnected", () => {

src/app/base/hooks/urls.test.tsx

@@ -13,16 +13,15 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (pathname: string, route: string) =>
-  ({ children }: { children: ReactNode }) =>
-    (
-      <Provider store={mockStore(factory.rootState())}>
-        <MemoryRouter initialEntries={[{ pathname }]}>
-          <Routes>
-            <Route element={<>{children}</>} path={route} />
-          </Routes>
-        </MemoryRouter>
-      </Provider>
-    );
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={mockStore(factory.rootState())}>
+      <MemoryRouter initialEntries={[{ pathname }]}>
+        <Routes>
+          <Route element={<>{children}</>} path={route} />
+        </Routes>
+      </MemoryRouter>
+    </Provider>
+  );
 
 describe("url hooks", () => {
   describe("useGetURLId", () => {

src/app/controllers/views/ControllerDetails/ControllerSummary/ServicesCard/ServiceStatus/ServiceStatus.tsx

@@ -13,10 +13,10 @@ const ServiceStatus = ({ service }: Props): JSX.Element => {
     service.status === ServiceStatusType.RUNNING
       ? "success"
       : service.status === ServiceStatusType.DEAD
-      ? "error"
-      : service.status === ServiceStatusType.DEGRADED
-      ? "warning"
-      : null;
+        ? "error"
+        : service.status === ServiceStatusType.DEGRADED
+          ? "warning"
+          : null;
 
   return (
     <span>

src/app/devices/views/DeviceDetails/DeviceNetwork/AddInterface/AddInterface.tsx

@@ -32,9 +32,8 @@ const AddInterface = ({ closeForm, systemId }: Props): JSX.Element => {
     useSelector((state: RootState) =>
       deviceSelectors.eventErrorsForDevices(state, systemId, "createInterface")
     ).length > 0;
-  const [createdInterface, resetCreatedInterface] = useCycled(
-    !creatingInterface
-  );
+  const [createdInterface, resetCreatedInterface] =
+    useCycled(!creatingInterface);
   const saved = createdInterface && !createInterfaceErrored;
   const onRenderRef = useScrollOnRender<HTMLDivElement>();
 

src/app/devices/views/DeviceDetails/DeviceNetwork/EditInterface/EditInterface.tsx

@@ -46,9 +46,8 @@ const EditInterface = ({
     useSelector((state: RootState) =>
       deviceSelectors.eventErrorsForDevices(state, systemId, "updateInterface")
     ).length > 0;
-  const [updatedInterface, resetUpdatedInterface] = useCycled(
-    !updatingInterface
-  );
+  const [updatedInterface, resetUpdatedInterface] =
+    useCycled(!updatingInterface);
   const saved = updatedInterface && !updateInterfaceErrored;
   if (!isDeviceDetails(device) || !nic) {
     return <Spinner data-testid="loading-device-details" text="Loading..." />;

src/app/intro/hooks.test.tsx

@@ -15,8 +15,9 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 describe("hooks", () => {
   let state: RootState;

src/app/kvm/components/VfResources/VfResources.tsx

@@ -23,7 +23,7 @@ const VfResources = ({
       [
         PodResource["allocated_tracked"],
         PodResource["free"],
-        PodResource["allocated_other"]
+        PodResource["allocated_other"],
       ]
     >(
       ([allocated, free, other], { virtual_functions }) => {

src/app/kvm/hooks.test.tsx

@@ -17,12 +17,11 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>, pathname = "") =>
-  ({ children }: { children: ReactNode }) =>
-    (
-      <Provider store={store}>
-        <MemoryRouter initialEntries={[{ pathname }]}>{children}</MemoryRouter>
-      </Provider>
-    );
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>
+      <MemoryRouter initialEntries={[{ pathname }]}>{children}</MemoryRouter>
+    </Provider>
+  );
 
 describe("kvm hooks", () => {
   describe("useActivePod", () => {

src/app/machines/hooks.test.tsx

@@ -19,8 +19,9 @@ vi.mock("@canonical/react-components/dist/hooks", () => ({
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 describe("machine utils", () => {
   let state: RootState;

src/app/machines/views/MachineDetails/MachineTests/MachineTests.tsx

@@ -116,7 +116,7 @@ const MachineTests = (): JSX.Element => {
             ).map(
               ([physical_blockdevice, scriptResults]: [
                 string,
-                ScriptResult[]
+                ScriptResult[],
               ]) => {
                 const { model, name, serial } =
                   scriptResults[0]?.parameters?.storage?.value || {};

src/app/machines/views/MachineList/MachineListTable/AllCheckbox/AllCheckbox.tsx

@@ -38,8 +38,8 @@ const AllCheckbox = ({ callId, filter }: Props): JSX.Element => {
           allSelected
             ? Checked.Checked
             : someSelected
-            ? Checked.Mixed
-            : Checked.Unchecked
+              ? Checked.Mixed
+              : Checked.Unchecked
         }
         onGenerateSelected={(checked) =>
           generateSelectedAll({ checked, filter })

src/app/machines/views/MachineList/MachineListTable/GroupCheckbox/GroupCheckbox.tsx

@@ -47,8 +47,8 @@ const GroupCheckbox = ({
         allSelected || groupSelected
           ? Checked.Checked
           : childrenSelected
-          ? Checked.Mixed
-          : Checked.Unchecked
+            ? Checked.Mixed
+            : Checked.Unchecked
       }
       isDisabled={group?.count === 0 || allSelected}
       onGenerateSelected={(checked) => {

src/app/machines/views/MachineList/hooks.ts

@@ -76,7 +76,7 @@ export const useResponsiveColumns = () => {
 
 export const useGrouping = (): [
   FetchGroupKey,
-  (group: FetchGroupKey | null) => void
+  (group: FetchGroupKey | null) => void,
 ] => {
   const dispatch = useDispatch();
   const [storedGrouping, setStoredGrouping] =

src/app/settings/hooks.test.tsx

@@ -15,8 +15,9 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 let state: RootState;
 

src/app/store/general/types/base.ts

@@ -31,20 +31,20 @@ export type BondModeOptions = [
   [BondMode.BROADCAST, BondMode.BROADCAST],
   [BondMode.LINK_AGGREGATION, BondMode.LINK_AGGREGATION],
   [BondMode.BALANCE_TLB, BondMode.BALANCE_TLB],
-  [BondMode.BALANCE_ALB, BondMode.BALANCE_ALB]
+  [BondMode.BALANCE_ALB, BondMode.BALANCE_ALB],
 ];
 
 export type BondLacpRateOptions = [
   [BondLacpRate.FAST, BondLacpRate.FAST],
-  [BondLacpRate.SLOW, BondLacpRate.SLOW]
+  [BondLacpRate.SLOW, BondLacpRate.SLOW],
 ];
 
 export type BondXmitHashPolicyOptions = [
   [BondXmitHashPolicy.LAYER2, BondXmitHashPolicy.LAYER2],
   [BondXmitHashPolicy.LAYER2_3, BondXmitHashPolicy.LAYER2_3],
   [BondXmitHashPolicy.LAYER3_4, BondXmitHashPolicy.LAYER3_4],
   [BondXmitHashPolicy.ENCAP2_3, BondXmitHashPolicy.ENCAP2_3],
-  [BondXmitHashPolicy.ENCAP3_4, BondXmitHashPolicy.ENCAP3_4]
+  [BondXmitHashPolicy.ENCAP3_4, BondXmitHashPolicy.ENCAP3_4],
 ];
 
 export type BondOptions = {
@@ -224,8 +224,8 @@ export type PowerTypesState = {
   loading: boolean;
 };
 
-export type TLSCertificate =
-  | Omit<CertificateData, "private_key"> & CertificateMetadata;
+export type TLSCertificate = Omit<CertificateData, "private_key"> &
+  CertificateMetadata;
 
 export type TLSCertificateState = {
   errors: APIError;

src/app/store/general/utils/hooks.test.tsx

@@ -14,8 +14,9 @@ const mockStore = configureStore();
 
 const generateWrapper =
   (store: MockStoreEnhanced<unknown>) =>
-  ({ children }: { children: ReactNode }) =>
-    <Provider store={store}>{children}</Provider>;
+  ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
 
 describe("general hook utils", () => {
   let state: RootState;