From c362970098ae9d9de3bd7f56d3800826c846a4c2 Mon Sep 17 00:00:00 2001 From: gearnode Date: Wed, 26 Feb 2025 12:32:34 +0100 Subject: [PATCH] Fix unused eslint error Signed-off-by: gearnode --- apps/console/eslint.config.js | 34 +++++++ apps/console/package.json | 6 +- apps/console/src/App.tsx | 33 +++++-- apps/console/src/components/AppSidebar.tsx | 1 - apps/console/src/components/NavUser.tsx | 7 +- apps/console/src/contexts/AuthContext.tsx | 2 +- apps/console/src/layouts/ConsoleLayout.tsx | 94 ++++++++++--------- .../src/pages/CreateOrganizationPage.tsx | 6 +- apps/console/src/pages/CreatePeoplePage.tsx | 14 +-- .../src/pages/FrameworkOverviewPage.tsx | 7 +- apps/console/src/pages/LoginPage.tsx | 11 +-- .../src/pages/OrganizationSelectionPage.tsx | 2 +- apps/console/src/pages/PeopleListPage.tsx | 6 +- apps/console/src/pages/PeopleOverviewPage.tsx | 14 +-- apps/console/src/pages/SettingsPage.tsx | 2 +- apps/console/src/pages/VendorListPage.tsx | 6 +- apps/console/src/pages/VendorOverviewPage.tsx | 27 +++--- 17 files changed, 156 insertions(+), 116 deletions(-) create mode 100644 apps/console/eslint.config.js diff --git a/apps/console/eslint.config.js b/apps/console/eslint.config.js new file mode 100644 index 000000000..cf9e935b9 --- /dev/null +++ b/apps/console/eslint.config.js @@ -0,0 +1,34 @@ +import globals from "globals"; +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 + } + } + }}, + pluginJs.configs.recommended, + ...tseslint.configs.recommended, + pluginReact.configs.flat.recommended, + { + settings: { + react: { + version: "detect" + } + }, + rules: { + "react/react-in-jsx-scope": "off", + "react/prop-types": "off", + "@typescript-eslint/no-explicit-any": "warn", + "react/no-unescaped-entities": "off" + } + } +]; \ No newline at end of file diff --git a/apps/console/package.json b/apps/console/package.json index 091e943db..a98d8aa4c 100644 --- a/apps/console/package.json +++ b/apps/console/package.json @@ -43,6 +43,7 @@ "@babel/preset-env": "^7.26.7", "@babel/preset-typescript": "^7.26.0", "@deanc/esbuild-plugin-postcss": "^1.0.2", + "@eslint/js": "^9.21.0", "@probo/tsconfig": "^0.0.1", "@types/babel-core": "^6.25.10", "@types/node": "^22.13.0", @@ -54,9 +55,12 @@ "babel-plugin-relay": "^18.2.0", "esbuild": "^0.25.0", "eslint": "^9.21.0", + "eslint-plugin-react": "^7.37.4", + "globals": "^16.0.0", "relay-compiler": "^18.2.0", "tailwindcss": "^3.4.17", - "typescript": "^5.7.3" + "typescript": "^5.7.3", + "typescript-eslint": "^8.25.0" }, "relay": { "src": "src", diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx index 87f09dd3b..fb5e37fe4 100644 --- a/apps/console/src/App.tsx +++ b/apps/console/src/App.tsx @@ -4,13 +4,7 @@ import { lazy, StrictMode, Suspense } from "react"; import { createRoot } from "react-dom/client"; import { HelmetProvider } from "react-helmet-async"; import { RelayEnvironmentProvider } from "react-relay"; -import { - BrowserRouter, - Route, - Routes, - useLocation, - Navigate, -} from "react-router"; +import { BrowserRouter, Route, Routes, useLocation } from "react-router"; import "App.css"; import ErrorBoundary from "./components/ErrorBoundary"; import ConsoleLayout from "./layouts/ConsoleLayout"; @@ -122,11 +116,22 @@ function App() { element={ - + } - /> + > + + + + + + } + /> + {/* Organization-specific Routes */} } /> + + + + + + } + /> + + + + Home + + + + + Create Organization + + + + ); + } + const data = useLazyLoadQuery( graphql` query ConsoleLayoutOrganizationQuery($organizationId: ID!) { @@ -223,17 +236,6 @@ function BreadcrumbPeopleOverview() { ); } -function BreadcrumbCreateOrganization() { - return ( - <> - - - Create Organization - - - ); -} - function BreadcrumbControlOverview() { const { organizationId, frameworkId, controlId } = useParams(); const data = useLazyLoadQuery( @@ -289,6 +291,7 @@ function BreadcrumbControlOverview() { export default function ConsoleLayout() { const { organizationId } = useParams(); + const showBreadcrumb = !!organizationId; return ( @@ -299,31 +302,36 @@ export default function ConsoleLayout() { - - }> + {showBreadcrumb && ( + } - /> - } - /> - - }> - } - /> - } /> - - }> - } - /> - - + path="frameworks" + element={} + > + } + /> + } + /> + + }> + } + /> + } /> + + }> + } + /> + + + )} diff --git a/apps/console/src/pages/CreateOrganizationPage.tsx b/apps/console/src/pages/CreateOrganizationPage.tsx index fe242b65b..881c7c084 100644 --- a/apps/console/src/pages/CreateOrganizationPage.tsx +++ b/apps/console/src/pages/CreateOrganizationPage.tsx @@ -143,12 +143,12 @@ export default function CreateOrganizationPage() { Create Organization - Probo -
+
-

+

Create Organization

-

+

Create a new organization to manage your compliance and security needs.

diff --git a/apps/console/src/pages/CreatePeoplePage.tsx b/apps/console/src/pages/CreatePeoplePage.tsx index dc5cc085c..cfb74e3ca 100644 --- a/apps/console/src/pages/CreatePeoplePage.tsx +++ b/apps/console/src/pages/CreatePeoplePage.tsx @@ -1,14 +1,6 @@ -import { Suspense, useEffect, useState } from "react"; +import { Suspense, useState } from "react"; import { useNavigate, useParams } from "react-router"; -import { - graphql, - PreloadedQuery, - usePreloadedQuery, - useQueryLoader, - useMutation, - useRelayEnvironment, - ConnectionHandler, -} from "react-relay"; +import { graphql, useMutation, ConnectionHandler } from "react-relay"; import { Helmet } from "react-helmet-async"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; @@ -86,7 +78,7 @@ function CreatePeoplePageContent() { kind: "EMPLOYEE" as "EMPLOYEE" | "CONTRACTOR", }); - const handleFieldChange = (field: keyof typeof formData, value: any) => { + const handleFieldChange = (field: keyof typeof formData, value: unknown) => { setFormData((prev) => ({ ...prev, [field]: value, diff --git a/apps/console/src/pages/FrameworkOverviewPage.tsx b/apps/console/src/pages/FrameworkOverviewPage.tsx index e19140b1a..eb5f9608c 100644 --- a/apps/console/src/pages/FrameworkOverviewPage.tsx +++ b/apps/console/src/pages/FrameworkOverviewPage.tsx @@ -6,10 +6,9 @@ import { usePreloadedQuery, useQueryLoader, } from "react-relay"; -import { Shield, FileText, Clock, MoveUpRight } from "lucide-react"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Progress } from "@/components/ui/progress"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Shield, MoveUpRight, Clock } from "lucide-react"; +import { Card, CardContent } from "@/components/ui/card"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql"; import { Helmet } from "react-helmet-async"; import { createPortal } from "react-dom"; diff --git a/apps/console/src/pages/LoginPage.tsx b/apps/console/src/pages/LoginPage.tsx index 323ea9965..a76fc1291 100644 --- a/apps/console/src/pages/LoginPage.tsx +++ b/apps/console/src/pages/LoginPage.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; -import { Link, useLocation, useNavigate } from "react-router"; -import { Helmet } from "react-helmet-async"; +import { Link, useNavigate } from "react-router"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -14,12 +13,8 @@ export default function LoginPage() { const [isLoading, setIsLoading] = useState(false); const { toast } = useToast(); const navigate = useNavigate(); - const location = useLocation(); const { checkAuth } = useAuth(); - // Get the redirect path from location state or default to home - const from = location.state?.from?.pathname || "/"; - const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); @@ -50,10 +45,10 @@ export default function LoginPage() { } else { throw new Error("Authentication failed"); } - } catch (error: any) { + } catch (error: unknown) { toast({ title: "Error", - description: error.message || "Failed to login", + description: error instanceof Error ? error.message : "Failed to login", variant: "destructive", }); } finally { diff --git a/apps/console/src/pages/OrganizationSelectionPage.tsx b/apps/console/src/pages/OrganizationSelectionPage.tsx index e2702fcf6..f45f55058 100644 --- a/apps/console/src/pages/OrganizationSelectionPage.tsx +++ b/apps/console/src/pages/OrganizationSelectionPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useNavigate } from "react-router"; import { graphql, useLazyLoadQuery } from "react-relay"; import { Helmet } from "react-helmet-async"; diff --git a/apps/console/src/pages/PeopleListPage.tsx b/apps/console/src/pages/PeopleListPage.tsx index 275a3d775..2234078a3 100644 --- a/apps/console/src/pages/PeopleListPage.tsx +++ b/apps/console/src/pages/PeopleListPage.tsx @@ -8,7 +8,7 @@ import { usePaginationFragment, } from "react-relay"; import { useSearchParams, useParams } from "react-router"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { UserPlus, Trash2, ChevronRight } from "lucide-react"; import { Button } from "@/components/ui/button"; @@ -136,8 +136,8 @@ function PeopleListContent({ peopleListPageQuery, queryRef ); - const [searchParams, setSearchParams] = useSearchParams(); - const [isPending, startTransition] = useTransition(); + const [, setSearchParams] = useSearchParams(); + const [, startTransition] = useTransition(); const [deletePeople] = useMutation(deletePeopleMutation); const { organizationId } = useParams(); diff --git a/apps/console/src/pages/PeopleOverviewPage.tsx b/apps/console/src/pages/PeopleOverviewPage.tsx index 6528320a7..29d6e9ead 100644 --- a/apps/console/src/pages/PeopleOverviewPage.tsx +++ b/apps/console/src/pages/PeopleOverviewPage.tsx @@ -95,8 +95,8 @@ function PeopleOverviewPageContent({ kind: data.node.kind, }); const [commit] = useMutation(updatePeopleMutation); - const [_, loadQuery] = useQueryLoader( - peopleOverviewPageQuery, + const [, loadQuery] = useQueryLoader( + peopleOverviewPageQuery ); const { toast } = useToast(); @@ -139,7 +139,7 @@ function PeopleOverviewPageContent({ }); }, [commit, data.node.id, data.node.version, formData, loadQuery, toast]); - const handleFieldChange = (field: keyof typeof formData, value: any) => { + const handleFieldChange = (field: keyof typeof formData, value: unknown) => { setFormData((prev) => ({ ...prev, [field]: value, @@ -198,7 +198,7 @@ function PeopleOverviewPageContent({ onClick={() => { const newEmails = formData.additionalEmailAddresses.filter( - (_, i) => i !== index, + (_, i) => i !== index ); handleFieldChange("additionalEmailAddresses", newEmails); }} @@ -243,7 +243,7 @@ function PeopleOverviewPageContent({ "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 @@ -254,7 +254,7 @@ function PeopleOverviewPageContent({ "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 @@ -303,7 +303,7 @@ function PeopleOverviewPageFallback() { export default function PeopleOverviewPage() { const { peopleId } = useParams(); const [queryRef, loadQuery] = useQueryLoader( - peopleOverviewPageQuery, + peopleOverviewPageQuery ); useEffect(() => { diff --git a/apps/console/src/pages/SettingsPage.tsx b/apps/console/src/pages/SettingsPage.tsx index cb64060bb..103f85284 100644 --- a/apps/console/src/pages/SettingsPage.tsx +++ b/apps/console/src/pages/SettingsPage.tsx @@ -7,7 +7,7 @@ import { CardTitle, CardDescription, } from "@/components/ui/card"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, diff --git a/apps/console/src/pages/VendorListPage.tsx b/apps/console/src/pages/VendorListPage.tsx index b2d8e7a1d..50592ec0e 100644 --- a/apps/console/src/pages/VendorListPage.tsx +++ b/apps/console/src/pages/VendorListPage.tsx @@ -8,7 +8,7 @@ import { usePaginationFragment, } from "react-relay"; import { useSearchParams, useParams } from "react-router"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Store, ChevronRight, Trash2 } from "lucide-react"; import { Input } from "@/components/ui/input"; @@ -190,8 +190,8 @@ function VendorListContent({ vendorListPageQuery, queryRef ); - const [searchParams, setSearchParams] = useSearchParams(); - const [isPending, startTransition] = useTransition(); + const [, setSearchParams] = useSearchParams(); + const [, startTransition] = useTransition(); const [searchTerm, setSearchTerm] = useState(""); const [filteredVendors, setFilteredVendors] = useState([]); const [createVendor] = diff --git a/apps/console/src/pages/VendorOverviewPage.tsx b/apps/console/src/pages/VendorOverviewPage.tsx index 221d03bec..449c9e617 100644 --- a/apps/console/src/pages/VendorOverviewPage.tsx +++ b/apps/console/src/pages/VendorOverviewPage.tsx @@ -5,7 +5,7 @@ import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; -import { HelpCircle, ArrowUpRight, Pencil, Check, X } from "lucide-react"; +import { HelpCircle } from "lucide-react"; import { graphql, PreloadedQuery, @@ -13,7 +13,7 @@ import { useQueryLoader, useMutation, } from "react-relay"; -import { Suspense, useEffect, useState, useCallback, useMemo } from "react"; +import { Suspense, useEffect, useState, useCallback } from "react"; import type { VendorOverviewPageQuery as VendorOverviewPageQueryType } from "./__generated__/VendorOverviewPageQuery.graphql"; import { useParams } from "react-router"; import { Helmet } from "react-helmet-async"; @@ -124,8 +124,8 @@ function VendorOverviewPageContent({ privacyPolicyUrl: data.node.privacyPolicyUrl || "", }); const [commit] = useMutation(updateVendorMutation); - const [_, loadQuery] = useQueryLoader( - vendorOverviewPageQuery, + const [, loadQuery] = useQueryLoader( + vendorOverviewPageQuery ); const { toast } = useToast(); @@ -174,13 +174,10 @@ function VendorOverviewPageContent({ }); } }, - updater: (store) => { - // Clear any error states if needed - }, }); }, [commit, data.node.id, data.node.version, formData, loadQuery, toast]); - const handleFieldChange = (field: keyof typeof formData, value: any) => { + const handleFieldChange = (field: keyof typeof formData, value: unknown) => { setFormData((prev) => ({ ...prev, [field]: value, @@ -262,7 +259,7 @@ function VendorOverviewPageContent({ "rounded-full px-4 py-1 text-sm transition-colors", formData.serviceCriticality === "LOW" ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200", + : "bg-gray-100 text-gray-900 hover:bg-gray-200" )} > Low @@ -275,7 +272,7 @@ function VendorOverviewPageContent({ "rounded-full px-4 py-1 text-sm transition-colors", formData.serviceCriticality === "MEDIUM" ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200", + : "bg-gray-100 text-gray-900 hover:bg-gray-200" )} > Medium @@ -288,7 +285,7 @@ function VendorOverviewPageContent({ "rounded-full px-4 py-1 text-sm transition-colors", formData.serviceCriticality === "HIGH" ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200", + : "bg-gray-100 text-gray-900 hover:bg-gray-200" )} > High @@ -316,7 +313,7 @@ function VendorOverviewPageContent({ "rounded-full px-4 py-1 text-sm transition-colors", formData.riskTier === "CRITICAL" ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200", + : "bg-gray-100 text-gray-900 hover:bg-gray-200" )} > Critical @@ -329,7 +326,7 @@ function VendorOverviewPageContent({ "rounded-full px-4 py-1 text-sm transition-colors", formData.riskTier === "SIGNIFICANT" ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200", + : "bg-gray-100 text-gray-900 hover:bg-gray-200" )} > Significant @@ -340,7 +337,7 @@ function VendorOverviewPageContent({ "rounded-full px-4 py-1 text-sm transition-colors", formData.riskTier === "GENERAL" ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2" - : "bg-gray-100 text-gray-900 hover:bg-gray-200", + : "bg-gray-100 text-gray-900 hover:bg-gray-200" )} > General @@ -421,7 +418,7 @@ function VendorOverviewPageFallback() { export default function VendorOverviewPage() { const { vendorId } = useParams(); const [queryRef, loadQuery] = useQueryLoader( - vendorOverviewPageQuery, + vendorOverviewPageQuery ); useEffect(() => {