From 73247c1ec58f9ca785589d3c15dfa3e8035cc70b Mon Sep 17 00:00:00 2001 From: gearnode Date: Wed, 26 Feb 2025 12:44:34 +0100 Subject: [PATCH] Style Signed-off-by: gearnode --- apps/console/eslint.config.js | 32 +- apps/console/public/index.html | 27 +- apps/console/src/App.tsx | 6 +- apps/console/src/components/NavMain.tsx | 4 +- apps/console/src/components/TeamSwitcher.tsx | 11 +- apps/console/src/layouts/ConsoleLayout.tsx | 10 +- .../src/pages/CreateOrganizationPage.tsx | 6 +- apps/console/src/pages/CreatePeoplePage.tsx | 12 +- apps/console/src/pages/FrameworkListPage.tsx | 4 +- .../src/pages/FrameworkOverviewPage.tsx | 29 +- .../src/pages/OrganizationSelectionPage.tsx | 4 +- apps/console/src/pages/PeopleListPage.tsx | 8 +- apps/console/src/pages/PeopleOverviewPage.tsx | 10 +- apps/console/src/pages/VendorListPage.tsx | 4 +- apps/console/src/pages/VendorOverviewPage.tsx | 16 +- package-lock.json | 2085 ++++++++++++++++- 16 files changed, 2183 insertions(+), 85 deletions(-) diff --git a/apps/console/eslint.config.js b/apps/console/eslint.config.js index ebf7302eb..131ea07a1 100644 --- a/apps/console/eslint.config.js +++ b/apps/console/eslint.config.js @@ -3,30 +3,30 @@ import pluginJs from "@eslint/js"; import tseslint from "typescript-eslint"; import pluginReact from "eslint-plugin-react"; - /** @type {import('eslint').Linter.Config[]} */ export default [ - {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]}, - {languageOptions: { - globals: globals.browser, - parserOptions: { - ecmaFeatures: { - jsx: true - } - } - }}, + { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] }, + { + languageOptions: { + globals: globals.browser, + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + }, + }, pluginJs.configs.recommended, ...tseslint.configs.recommended, pluginReact.configs.flat.recommended, { settings: { react: { - version: "detect" - } + version: "detect", + }, }, rules: { "react/react-in-jsx-scope": "off", - "react/prop-types": "off", - } - } -]; \ No newline at end of file + }, + }, +]; diff --git a/apps/console/public/index.html b/apps/console/public/index.html index 4f39ab776..8adeabff5 100644 --- a/apps/console/public/index.html +++ b/apps/console/public/index.html @@ -7,10 +7,29 @@ - - - - + + + + diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx index fb5e37fe4..1bbb0aeb7 100644 --- a/apps/console/src/App.tsx +++ b/apps/console/src/App.tsx @@ -24,7 +24,7 @@ posthog.init(process.env.POSTHOG_KEY!, { }); const OrganizationSelectionPage = lazy( - () => import("./pages/OrganizationSelectionPage") + () => import("./pages/OrganizationSelectionPage"), ); const HomePage = lazy(() => import("./pages/HomePage")); const NotFoundPage = lazy(() => import("./pages/NotFoundPage")); @@ -35,14 +35,14 @@ const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage")); const SettingsPage = lazy(() => import("./pages/SettingsPage")); const CreatePeoplePage = lazy(() => import("./pages/CreatePeoplePage")); const FrameworkOverviewPage = lazy( - () => import("./pages/FrameworkOverviewPage") + () => import("./pages/FrameworkOverviewPage"), ); const ControlOverviewPage = lazy(() => import("./pages/ControlOverviewPage")); const PeopleOverviewPage = lazy(() => import("./pages/PeopleOverviewPage")); const LoginPage = lazy(() => import("./pages/LoginPage")); const RegisterPage = lazy(() => import("./pages/RegisterPage")); const CreateOrganizationPage = lazy( - () => import("./pages/CreateOrganizationPage") + () => import("./pages/CreateOrganizationPage"), ); function App() { diff --git a/apps/console/src/components/NavMain.tsx b/apps/console/src/components/NavMain.tsx index b57d024a1..4a1af936e 100644 --- a/apps/console/src/components/NavMain.tsx +++ b/apps/console/src/components/NavMain.tsx @@ -46,7 +46,7 @@ export function NavMain({ // If the item has sub-items, check if any of them match the current path if (item.items?.length) { return item.items.some((subItem) => - location.pathname.startsWith(subItem.url) + location.pathname.startsWith(subItem.url), ); } @@ -86,7 +86,7 @@ export function NavMain({ {item.items?.map((subItem) => { const subItemActive = location.pathname.startsWith( - subItem.url + subItem.url, ); return ( diff --git a/apps/console/src/components/TeamSwitcher.tsx b/apps/console/src/components/TeamSwitcher.tsx index 3e2384a3f..c1b0b7c60 100644 --- a/apps/console/src/components/TeamSwitcher.tsx +++ b/apps/console/src/components/TeamSwitcher.tsx @@ -40,11 +40,8 @@ export const teamSwitcherFragment = graphql` } `; -// Extended type to include plan field until Relay compiler generates the types type Organization = - TeamSwitcher_organizations$data["organizations"]["edges"][0]["node"] & { - plan?: string; - }; + TeamSwitcher_organizations$data["organizations"]["edges"][0]["node"]; export function TeamSwitcher({ organizations, @@ -60,9 +57,8 @@ export function TeamSwitcher({ useEffect(() => { if (data.organizations && data.organizations.edges.length > 0) { - // Find the current organization based on the URL parameter const org = data.organizations.edges.find( - (edge) => edge.node.id === organizationId + (edge) => edge.node.id === organizationId, ); if (org) { setCurrentOrganization(org.node); @@ -70,12 +66,10 @@ export function TeamSwitcher({ } }, [data.organizations, organizationId]); - // If no organizations or data is still loading if (!currentOrganization) { return null; } - // Convert logoUrl to a React component const LogoComponent = ({ org, className, @@ -90,7 +84,6 @@ export function TeamSwitcher({ }; const handleOrganizationSwitch = (org: Organization) => { - // Navigate to the selected organization navigate(`/organizations/${org.id}`); }; diff --git a/apps/console/src/layouts/ConsoleLayout.tsx b/apps/console/src/layouts/ConsoleLayout.tsx index 1ebc80068..522f0e660 100644 --- a/apps/console/src/layouts/ConsoleLayout.tsx +++ b/apps/console/src/layouts/ConsoleLayout.tsx @@ -57,7 +57,7 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) { } `, { organizationId: organizationId! }, - { fetchPolicy: "store-or-network" } + { fetchPolicy: "store-or-network" }, ); return ( @@ -107,7 +107,7 @@ function BreadcrumbFrameworkOverview() { } `, { frameworkId: frameworkId! }, - { fetchPolicy: "store-or-network" } + { fetchPolicy: "store-or-network" }, ); return ( @@ -156,7 +156,7 @@ function BreadcrumbVendorOverview() { } `, { vendorId: vendorId! }, - { fetchPolicy: "store-or-network" } + { fetchPolicy: "store-or-network" }, ); return ( @@ -216,7 +216,7 @@ function BreadcrumbPeopleOverview() { } `, { peopleId: peopleId! }, - { fetchPolicy: "store-or-network" } + { fetchPolicy: "store-or-network" }, ); return ( @@ -259,7 +259,7 @@ function BreadcrumbControlOverview() { } `, { frameworkId: frameworkId!, controlId: controlId! }, - { fetchPolicy: "store-or-network" } + { fetchPolicy: "store-or-network" }, ); return ( diff --git a/apps/console/src/pages/CreateOrganizationPage.tsx b/apps/console/src/pages/CreateOrganizationPage.tsx index 881c7c084..ce87122bf 100644 --- a/apps/console/src/pages/CreateOrganizationPage.tsx +++ b/apps/console/src/pages/CreateOrganizationPage.tsx @@ -86,11 +86,11 @@ export default function CreateOrganizationPage() { const { toast } = useToast(); const data = useLazyLoadQuery( viewerQuery, - {} + {}, ); const [createOrganization] = useMutation( - createOrganizationMutation + createOrganizationMutation, ); const [formData, setFormData] = useState({ name: "", @@ -114,7 +114,7 @@ export default function CreateOrganizationPage() { connections: [ ConnectionHandler.getConnectionID( data.viewer.id, - "TeamSwitcher_organizations" + "TeamSwitcher_organizations", ), ], }, diff --git a/apps/console/src/pages/CreatePeoplePage.tsx b/apps/console/src/pages/CreatePeoplePage.tsx index cfb74e3ca..45b2ace11 100644 --- a/apps/console/src/pages/CreatePeoplePage.tsx +++ b/apps/console/src/pages/CreatePeoplePage.tsx @@ -89,7 +89,7 @@ function CreatePeoplePageContent() { e.preventDefault(); const peopleConnectionId = ConnectionHandler.getConnectionID( organizationId!, - "PeopleListPage_peoples" + "PeopleListPage_peoples", ); createPeople({ @@ -165,7 +165,7 @@ function CreatePeoplePageContent() { newEmails[index] = e.target.value; handleFieldChange( "additionalEmailAddresses", - newEmails + newEmails, ); }} /> @@ -175,11 +175,11 @@ function CreatePeoplePageContent() { onClick={() => { const newEmails = formData.additionalEmailAddresses.filter( - (_, i) => i !== index + (_, i) => i !== index, ); handleFieldChange( "additionalEmailAddresses", - newEmails + newEmails, ); }} > @@ -227,7 +227,7 @@ function CreatePeoplePageContent() { "rounded-full px-4 py-1 text-sm transition-colors", formData.kind === "EMPLOYEE" ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200" + : "bg-gray-100 text-gray-900 hover:bg-gray-200", )} > Employee @@ -239,7 +239,7 @@ function CreatePeoplePageContent() { "rounded-full px-4 py-1 text-sm transition-colors", formData.kind === "CONTRACTOR" ? "bg-purple-100 text-purple-900 ring-2 ring-purple-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200" + : "bg-gray-100 text-gray-900 hover:bg-gray-200", )} > Contractor diff --git a/apps/console/src/pages/FrameworkListPage.tsx b/apps/console/src/pages/FrameworkListPage.tsx index 34d260351..040eac06f 100644 --- a/apps/console/src/pages/FrameworkListPage.tsx +++ b/apps/console/src/pages/FrameworkListPage.tsx @@ -101,7 +101,7 @@ function FrameworkListPageContent({
{frameworks.map((framework) => { const validatedControls = framework.controls.edges.filter( - (edge) => edge?.node?.state === "IMPLEMENTED" + (edge) => edge?.node?.state === "IMPLEMENTED", ).length; const totalControls = framework.controls.edges.length; @@ -164,7 +164,7 @@ function FrameworkListPageFallback() { export default function FrameworkListPage() { const [queryRef, loadQuery] = useQueryLoader( - FrameworkListPageQuery + FrameworkListPageQuery, ); const { organizationId } = useParams(); diff --git a/apps/console/src/pages/FrameworkOverviewPage.tsx b/apps/console/src/pages/FrameworkOverviewPage.tsx index eb5f9608c..e515f01fa 100644 --- a/apps/console/src/pages/FrameworkOverviewPage.tsx +++ b/apps/console/src/pages/FrameworkOverviewPage.tsx @@ -56,14 +56,17 @@ function FrameworkOverviewPageContent({ const { organizationId } = useParams(); // Group controls by their category - const controlsByCategory = controls.reduce((acc, control) => { - if (!control?.category) return acc; - if (!acc[control.category]) { - acc[control.category] = []; - } - acc[control.category].push(control); - return acc; - }, {} as Record); + const controlsByCategory = controls.reduce( + (acc, control) => { + if (!control?.category) return acc; + if (!acc[control.category]) { + acc[control.category] = []; + } + acc[control.category].push(control); + return acc; + }, + {} as Record, + ); const controlCards = Object.entries(controlsByCategory).map( ([category, controls]) => ({ @@ -71,11 +74,11 @@ function FrameworkOverviewPageContent({ controls, completed: controls.filter((c) => c?.state === "IMPLEMENTED").length, total: controls.length, - }) + }), ); const totalImplemented = controls.filter( - (c) => c?.state === "IMPLEMENTED" + (c) => c?.state === "IMPLEMENTED", ).length; return ( @@ -187,7 +190,7 @@ function FrameworkOverviewPageContent({ onClick={() => { if (control?.id) { navigate( - `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}` + `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`, ); } }} @@ -271,7 +274,7 @@ function FrameworkOverviewPageContent({
, - document.body + document.body, )} ); @@ -305,7 +308,7 @@ function FrameworkOverviewPageFallback() { export default function FrameworkOverviewPage() { const { frameworkId } = useParams(); const [queryRef, loadQuery] = useQueryLoader( - FrameworkOverviewPageQuery + FrameworkOverviewPageQuery, ); useEffect(() => { diff --git a/apps/console/src/pages/OrganizationSelectionPage.tsx b/apps/console/src/pages/OrganizationSelectionPage.tsx index 4a2d07465..da4413c93 100644 --- a/apps/console/src/pages/OrganizationSelectionPage.tsx +++ b/apps/console/src/pages/OrganizationSelectionPage.tsx @@ -34,11 +34,11 @@ export default function OrganizationSelectionPage() { const navigate = useNavigate(); const data = useLazyLoadQuery( organizationSelectionQuery, - {} + {}, ); const organizations = data.viewer.organizations.edges.map( - (edge) => edge.node + (edge) => edge.node, ); useEffect(() => { diff --git a/apps/console/src/pages/PeopleListPage.tsx b/apps/console/src/pages/PeopleListPage.tsx index 2ae99fa8e..aa86ffd91 100644 --- a/apps/console/src/pages/PeopleListPage.tsx +++ b/apps/console/src/pages/PeopleListPage.tsx @@ -134,7 +134,7 @@ function PeopleListContent({ }) { const data = usePreloadedQuery( peopleListPageQuery, - queryRef + queryRef, ); const [, setSearchParams] = useSearchParams(); const [, startTransition] = useTransition(); @@ -216,8 +216,8 @@ function PeopleListContent({ {person?.kind === "EMPLOYEE" ? "Employee" : person?.kind === "CONTRACTOR" - ? "Contractor" - : "Vendor"} + ? "Contractor" + : "Vendor"}