Refactoring 461. Add additional rules to the prettier setup and a GitHub Actions workflow to warn about formatting issues

.github/workflows/lint.yml

@@ -0,0 +1,29 @@
+name: Prettier Code Check
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  prettier-check:
+    name: Prettier Code Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Prettier
+        run: npm run prettier:check || echo "::warning::Prettier found formatting issues. Please run 'npm run prettier:write' to fix them."

.prettierrc.json

@@ -1,8 +1,11 @@
 {
-    "printWidth": 80,
-    "trailingComma": "all",
-    "tabWidth": 4,
-    "semi": false,
-    "singleQuote": true,
-    "arrowParens": "avoid"
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 150,
+  "trailingComma": "all",
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
 }

package.json

@@ -9,6 +9,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "prettier:check": "prettier --check 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
+    "prettier:write": "prettier --write 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
     "test": "jest --testPathPattern test/component test/api test/gateway test/sdk --projects test/api/jest.api.config.js test/component/jest.component.config.js test/gateway/jest.gateway.config.js test/sdk/jest.sdk.config.js",
     "test:api": "jest --testPathPattern=test/api --projects test/api/jest.api.config.js",
     "test:component": "jest --testPathPattern=test/component --projects test/component/jest.component.config.js",

src/app/(rucio)/dashboard/page.tsx

@@ -1,29 +1,24 @@
-'use client'
-import {
-    fixtureOngoingrules,
-    fixtureUsedquota,
-} from 'test/fixtures/widget-fixtures'
-import { Dashboard as DashboardStory } from '@/component-library/Pages/Dashboard/Dashboard'
-import { Role } from '@/lib/core/entity/account'
-import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header'
-import { useEffect, useState } from 'react'
-import { getSiteHeader } from '../queries'
-import { Loading } from '@/component-library/Pages/Helpers/Loading'
-import { User } from '@/lib/core/entity/auth-models'
+'use client';
+import { fixtureOngoingrules, fixtureUsedquota } from 'test/fixtures/widget-fixtures';
+import { Dashboard as DashboardStory } from '@/component-library/Pages/Dashboard/Dashboard';
+import { Role } from '@/lib/core/entity/account';
+import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
+import { useEffect, useState } from 'react';
+import { getSiteHeader } from '../queries';
+import { Loading } from '@/component-library/Pages/Helpers/Loading';
+import { User } from '@/lib/core/entity/auth-models';
 export default function Page() {
-    const [siteHeader, setSiteHeader] = useState<SiteHeaderViewModel>(
-        {status: "pending"} as SiteHeaderViewModel,
-    )
+    const [siteHeader, setSiteHeader] = useState<SiteHeaderViewModel>({ status: 'pending' } as SiteHeaderViewModel);
     useEffect(() => {
-        getSiteHeader().then((vm: SiteHeaderViewModel) => setSiteHeader(vm))
-    }, [])
-    if (siteHeader.status === "pending") return <Loading title='Dashboard' />
+        getSiteHeader().then((vm: SiteHeaderViewModel) => setSiteHeader(vm));
+    }, []);
+    if (siteHeader.status === 'pending') return <Loading title="Dashboard" />;
     return (
         <DashboardStory
             accountname={(siteHeader.activeAccount as User).rucioAccount}
             accountrole={(siteHeader.activeAccount as User).role === 'admin' ? Role.ADMIN : Role.USER}
             inputOngoingrules={Array.from({ length: 20 }, (v, k) => fixtureOngoingrules())}
             inputUsedquota={Array.from({ length: 20 }, (v, k) => fixtureUsedquota())}
         />
-    )
+    );
 }

src/app/(rucio)/did/list/page.tsx

@@ -1,18 +1,18 @@
 'use client';
 
-import { ListDID as ListDIDStory } from "@/component-library/Pages/DID/ListDID";
-import { DIDType } from "@/lib/core/entity/rucio";
-import { DIDMetaViewModel, DIDViewModel } from "@/lib/infrastructure/data/view-model/did";
-import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
-import { useEffect, useState } from "react";
-import { didMetaQueryBase } from "../queries";
+import { ListDID as ListDIDStory } from '@/component-library/Pages/DID/ListDID';
+import { DIDType } from '@/lib/core/entity/rucio';
+import { DIDMetaViewModel, DIDViewModel } from '@/lib/infrastructure/data/view-model/did';
+import useComDOM from '@/lib/infrastructure/hooks/useComDOM';
+import { useEffect, useState } from 'react';
+import { didMetaQueryBase } from '../queries';
 
 export default function Page() {
-    const [didMetaQueryResponse, setDIDMetaQueryResponse] = useState<DIDMetaViewModel>({status: "pending"} as DIDMetaViewModel)
+    const [didMetaQueryResponse, setDIDMetaQueryResponse] = useState<DIDMetaViewModel>({ status: 'pending' } as DIDMetaViewModel);
 
     const didMetaQuery = async (scope: string, name: string) => {
-        setDIDMetaQueryResponse(await didMetaQueryBase(scope, name))
-    }
+        setDIDMetaQueryResponse(await didMetaQueryBase(scope, name));
+    };
     const didQuery = async (query: string, type: DIDType) => {
         const request: any = {
             url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-dids`),
@@ -21,28 +21,20 @@ export default function Page() {
                 'Content-Type': 'application/json',
             } as HeadersInit),
             params: {
-                "query": query,
-                "type": type
+                query: query,
+                type: type,
             },
+        };
+        await DIDSearchComDOM.setRequest(request);
+    };
 
-        }
-        await DIDSearchComDOM.setRequest(request)
-    }
-
-    const DIDSearchComDOM = useComDOM<DIDViewModel>(
-        'list-did-query',
-        [],
-        false,
-        Infinity,
-        200,
-        true
-    )
+    const DIDSearchComDOM = useComDOM<DIDViewModel>('list-did-query', [], false, Infinity, 200, true);
     return (
         <ListDIDStory
             comdom={DIDSearchComDOM}
             didQuery={didQuery}
-            didMetaQuery={didMetaQuery}  // TODO: implement
-            didMetaQueryResponse={didMetaQueryResponse}  // TODO: implement
+            didMetaQuery={didMetaQuery} // TODO: implement
+            didMetaQueryResponse={didMetaQueryResponse} // TODO: implement
         />
-    )
+    );
 }

src/app/(rucio)/did/page/[scope]/[name]/page.tsx

@@ -1,33 +1,41 @@
 'use client';
 import { PageDID as PageDIDStory } from '@/component-library/Pages/DID/PageDID';
-import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
-import { useEffect, useState } from "react";
-import { fixtureDIDDatasetReplicasViewModel, fixtureDIDKeyValuePairsDataViewModel, fixtureDIDMetaViewModel, fixtureDIDRulesViewModel, mockUseComDOM } from 'test/fixtures/table-fixtures';
-import { HTTPRequest } from "@/lib/sdk/http";
-import { DIDDatasetReplicasViewModel, DIDKeyValuePairsDataViewModel, DIDMetaViewModel, DIDRulesViewModel, DIDViewModel, FilereplicaStateDViewModel, FilereplicaStateViewModel } from '@/lib/infrastructure/data/view-model/did';
+import useComDOM from '@/lib/infrastructure/hooks/useComDOM';
+import { useEffect, useState } from 'react';
+import {
+    fixtureDIDDatasetReplicasViewModel,
+    fixtureDIDKeyValuePairsDataViewModel,
+    fixtureDIDMetaViewModel,
+    fixtureDIDRulesViewModel,
+    mockUseComDOM,
+} from 'test/fixtures/table-fixtures';
+import { HTTPRequest } from '@/lib/sdk/http';
+import {
+    DIDDatasetReplicasViewModel,
+    DIDKeyValuePairsDataViewModel,
+    DIDMetaViewModel,
+    DIDRulesViewModel,
+    DIDViewModel,
+    FilereplicaStateDViewModel,
+    FilereplicaStateViewModel,
+} from '@/lib/infrastructure/data/view-model/did';
 import { didKeyValuePairsDataQuery, didMetaQueryBase } from '@/app/(rucio)/did/queries';
 import { Loading } from '@/component-library/Pages/Helpers/Loading';
 
-export default function Page({ params }: { params: { scope: string, name: string } }) {
-    const [didMeta, setDIDMeta] = useState<DIDMetaViewModel>({ status: "pending" } as DIDMetaViewModel)
-    const [didKeyValuePairsData, setDIDKeyValuePairsData] = useState({ status: "pending" } as DIDKeyValuePairsDataViewModel)
-    const [fromDidList, setFromDidList] = useState<string>("yosearch")
+export default function Page({ params }: { params: { scope: string; name: string } }) {
+    const [didMeta, setDIDMeta] = useState<DIDMetaViewModel>({ status: 'pending' } as DIDMetaViewModel);
+    const [didKeyValuePairsData, setDIDKeyValuePairsData] = useState({ status: 'pending' } as DIDKeyValuePairsDataViewModel);
+    const [fromDidList, setFromDidList] = useState<string>('yosearch');
     useEffect(() => {
-        didMetaQueryBase(params.scope, params.name).then(setDIDMeta)
-    }, [])
+        didMetaQueryBase(params.scope, params.name).then(setDIDMeta);
+    }, []);
     useEffect(() => {
-        didKeyValuePairsDataQuery(params.scope, params.name).then(setDIDKeyValuePairsData)
-    }, [])
+        didKeyValuePairsDataQuery(params.scope, params.name).then(setDIDKeyValuePairsData);
+    }, []);
 
-    const didParentsComDOM = useComDOM<DIDViewModel>(
-        'page-did-parents-query', [], false, Infinity, 200, true
-    )
-    const didContentsComDOM = useComDOM<DIDViewModel>(
-        'page-did-contents-query', [], false, Infinity, 200, true
-    )
-    const didFileReplicasComDOM = useComDOM<FilereplicaStateViewModel>(
-        'page-did-filereplicas-query', [], false, Infinity, 200, true
-    )
+    const didParentsComDOM = useComDOM<DIDViewModel>('page-did-parents-query', [], false, Infinity, 200, true);
+    const didContentsComDOM = useComDOM<DIDViewModel>('page-did-contents-query', [], false, Infinity, 200, true);
+    const didFileReplicasComDOM = useComDOM<FilereplicaStateViewModel>('page-did-filereplicas-query', [], false, Infinity, 200, true);
     const didFileReplicasDOnChange = (scope: string, name: string) => {
         didFileReplicasComDOM.setRequest({
             url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-file-replicas`),
@@ -40,15 +48,11 @@ export default function Page({ params }: { params: { scope: string, name: string
                 'Content-Type': 'application/json',
             } as HeadersInit),
             body: null,
-        } as HTTPRequest)
-        didFileReplicasComDOM.start()
-    }
-    const didRulesComDOM = useComDOM<DIDRulesViewModel>(
-        'page-did-rules-query', [], false, Infinity, 200, true
-    )
-    const didDatasetReplicasComDOM = useComDOM<DIDDatasetReplicasViewModel>(
-        'page-did-datasetreplicas-query', [], false, Infinity, 200, true
-    )
+        } as HTTPRequest);
+        didFileReplicasComDOM.start();
+    };
+    const didRulesComDOM = useComDOM<DIDRulesViewModel>('page-did-rules-query', [], false, Infinity, 200, true);
+    const didDatasetReplicasComDOM = useComDOM<DIDDatasetReplicasViewModel>('page-did-datasetreplicas-query', [], false, Infinity, 200, true);
     useEffect(() => {
         const setRequests = async () => {
             await didContentsComDOM.setRequest({
@@ -62,7 +66,7 @@ export default function Page({ params }: { params: { scope: string, name: string
                     'Content-Type': 'application/json',
                 } as HeadersInit),
                 body: null,
-            } as HTTPRequest)
+            } as HTTPRequest);
             await didParentsComDOM.setRequest({
                 url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-did-parents`),
                 method: 'GET',
@@ -74,7 +78,7 @@ export default function Page({ params }: { params: { scope: string, name: string
                     'Content-Type': 'application/json',
                 } as HeadersInit),
                 body: null,
-            } as HTTPRequest)
+            } as HTTPRequest);
             await didFileReplicasComDOM.setRequest({
                 url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-file-replicas`),
                 method: 'GET',
@@ -86,7 +90,7 @@ export default function Page({ params }: { params: { scope: string, name: string
                     'Content-Type': 'application/json',
                 } as HeadersInit),
                 body: null,
-            } as HTTPRequest)
+            } as HTTPRequest);
             await didRulesComDOM.setRequest({
                 url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-did-rules`),
                 method: 'GET',
@@ -98,7 +102,7 @@ export default function Page({ params }: { params: { scope: string, name: string
                     'Content-Type': 'application/json',
                 } as HeadersInit),
                 body: null,
-            } as HTTPRequest)
+            } as HTTPRequest);
             await didDatasetReplicasComDOM.setRequest({
                 url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-dataset-replicas`),
                 method: 'GET',
@@ -110,11 +114,13 @@ export default function Page({ params }: { params: { scope: string, name: string
                     'Content-Type': 'application/json',
                 } as HeadersInit),
                 body: null,
-            } as HTTPRequest)
-        }
-        setRequests()
-    }, [])
-    if (didMeta.status === "pending") { return <Loading title="View DID" subtitle={`For DID ${params.scope}:${params.name}`} /> }
+            } as HTTPRequest);
+        };
+        setRequests();
+    }, []);
+    if (didMeta.status === 'pending') {
+        return <Loading title="View DID" subtitle={`For DID ${params.scope}:${params.name}`} />;
+    }
     return (
         <PageDIDStory
             didMeta={didMeta}
@@ -127,5 +133,5 @@ export default function Page({ params }: { params: { scope: string, name: string
             didContentsComDOM={didContentsComDOM}
             didDatasetReplicasComDOM={didDatasetReplicasComDOM}
         />
-    )
-}
+    );
+}

src/app/(rucio)/did/queries.ts

@@ -1,13 +1,13 @@
-import { DIDKeyValuePairsDataViewModel, DIDMetaViewModel } from "@/lib/infrastructure/data/view-model/did";
+import { DIDKeyValuePairsDataViewModel, DIDMetaViewModel } from '@/lib/infrastructure/data/view-model/did';
 
 export async function didMetaQueryBase(scope: string, name: string): Promise<DIDMetaViewModel> {
-    const url = `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-did-meta?` + new URLSearchParams({scope, name})
-    const res = await fetch(url)
-    return await res.json()
+    const url = `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-did-meta?` + new URLSearchParams({ scope, name });
+    const res = await fetch(url);
+    return await res.json();
 }
 
 export async function didKeyValuePairsDataQuery(scope: string, name: string): Promise<DIDKeyValuePairsDataViewModel> {
-    const url = `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-did-keyvaluepairs?` + new URLSearchParams({scope, name})
-    const res = await fetch(url)
-    return await res.json()
-}
+    const url = `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-did-keyvaluepairs?` + new URLSearchParams({ scope, name });
+    const res = await fetch(url);
+    return await res.json();
+}

src/app/(rucio)/layout.tsx

@@ -1,20 +1,15 @@
-'use client'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import '@/component-library/outputtailwind.css'
-import 'reflect-metadata'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { RucioAppLayout } from './rucio-app-layout'
+'use client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import '@/component-library/outputtailwind.css';
+import 'reflect-metadata';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RucioAppLayout } from './rucio-app-layout';
 
-
-export default function RootLayout({
-    children,
-}: {
-    children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <QueryClientProvider client={new QueryClient()}>
             <RucioAppLayout>{children}</RucioAppLayout>
             <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
-    )
+    );
 }

src/app/(rucio)/queries.ts

@@ -1,23 +1,21 @@
-import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header'
+import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
 
 export async function getSiteHeader(): Promise<SiteHeaderViewModel> {
     const req: any = {
         method: 'GET',
-        url: new URL(
-            `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-site-header`,
-        ),
+        url: new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-site-header`),
         headers: {
             'Content-Type': 'application/json',
         },
         params: {},
-    }
+    };
 
     const res = await fetch(req.url, {
         method: 'GET',
         headers: new Headers({
             'Content-Type': 'application/json',
         } as HeadersInit),
-    })
+    });
 
-    return await res.json()
+    return await res.json();
 }