chore: reworked the onboarding card and tour starts on first sight

.github/workflows/e2e.yml

@@ -77,4 +77,4 @@ jobs:
             -e CI=true \
             -e HOME=/tmp \
             mcr.microsoft.com/playwright:v1.61.0-noble@sha256:57b65fdc9ceabe0ef613124c7bbe2babcf9362c4d85e382fe3b03604e84b428a \
-            bash e2e/run-devguard-tests.sh
+            bash e2e/run-devguard-tests.sh

.vscode/settings.json

@@ -9,5 +9,6 @@
     "licenser.useSPDXLicenseFormat": true,
     "cSpell.words": [
         "devguard"
-    ]
+    ],
+    "eslint.useFlatConfig": true
 }

e2e/src/pom/devguard.ts

@@ -113,7 +113,6 @@ export class DevGuardPOM {
   async setupSbomUpload() {
     const inputFile = path.join(__dirname, "../../assets/", "sbom.json");
     await this.setup().setupOwnRiskScanning();
-    await this.setup().selectManualUpload();
     await this.setup().uploadSbomFile(inputFile);
   }
 

e2e/src/pom/flows/setup.ts

@@ -4,18 +4,9 @@ export class SetupFlow {
   constructor(private page: Page) {}
 
   async setupOwnRiskScanning() {
-    await this.page.getByTestId("setup-risk-scanning-button").click();
-    await this.page.waitForTimeout(500);
-    await this.page.getByTestId("own-setup-card").click();
-    await this.page.getByTestId("scanner-selection-continue").click();
-  }
-
-  async selectManualUpload() {
-    await this.page.waitForTimeout(500);
     await this.page.getByTestId("manual-upload-card").click();
-    await this.page
-      .getByTestId("integration-method-selection-continue")
-      .click();
+    await this.page.waitForTimeout(500);
+    await this.page.getByTestId("upload-manually").click();
   }
 
   async uploadSbomFile(inputFile: string) {
@@ -28,10 +19,8 @@ export class SetupFlow {
   }
 
   async setupAutoRiskScanning() {
-    await this.page.getByTestId("setup-risk-scanning-button").click();
     await this.page.waitForTimeout(500);
-    await this.page.getByTestId("auto-setup-gitlab").click();
-    await this.page.getByTestId("setup-method-continue").click();
+    await this.page.getByTestId("gitlab-connect-repository").click();
   }
 
   async createGitLabIntegration(name: string, url: string, token: string) {

eslint.config.mjs

@@ -13,7 +13,6 @@ export default defineConfig([
     plugins: {
       prettier,
     },
-
     rules: {
       "@next/next/no-img-element": "off",
       "prettier/prettier": "error",

nix/npm-packages.nix

@@ -10,7 +10,7 @@
         ../package-lock.json
       ];
     };
-    hash = "sha256-FW3K7F/5kRiBNxNLweCtrVNJ9XpztyeLxS15IFfJ1ig=";
+    hash = "sha256-3DGG5Ta+DmEFO3Lb0mAu7amQbyug4qYBbo4jp20T7OQ=";
   };
 
   node_modules = pkgs.runCommand "node-modules" {

package.json

@@ -99,7 +99,7 @@
         "react-hook-form": "7.56.4"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/eslintrc": "3.3.5",
         "@eslint/js": "^9.39.4",
         "@playwright/test": "^1.61.0",
         "@tailwindcss/postcss": "^4.2.4",

src/app/(loading-group)/[organizationSlug]/help-center/page.tsx

@@ -149,7 +149,7 @@ export default function HelpCenterPage() {
   }, [firstProject?.slug, resources]);
 
   const depRiskTourHref = depRiskTarget
-    ? `/${activeOrg.slug}/projects/${depRiskTarget.projectSlug}/assets/${depRiskTarget.assetSlug}/refs/${depRiskTarget.refSlug}/dependency-risks/${depRiskTarget.vulnId}?startTour=4`
+    ? `/${activeOrg.slug}/projects/${depRiskTarget.projectSlug}/assets/${depRiskTarget.assetSlug}/refs/${depRiskTarget.refSlug}/dependency-risks/${depRiskTarget.vulnId}?startTour=dependency-risk`
     : undefined;
 
   const depRiskTourDisabledReason =
@@ -164,7 +164,7 @@ export default function HelpCenterPage() {
           : undefined;
 
   const repoTourHref = repoTourTarget
-    ? `/${activeOrg.slug}/projects/${repoTourTarget.projectSlug}/assets/${repoTourTarget.assetSlug}?startTour=3`
+    ? `/${activeOrg.slug}/projects/${repoTourTarget.projectSlug}/assets/${repoTourTarget.assetSlug}?startTour=repo-home`
     : undefined;
 
   const repoTourDisabledReason =
@@ -215,7 +215,7 @@ export default function HelpCenterPage() {
                 Description="Get a guided overview of the organization dashboard."
                 Button={
                   <Link
-                    href={`/${activeOrg.slug}?startTour=1`}
+                    href={`/${activeOrg.slug}?startTour=org-home`}
                     className={cn(
                       buttonVariants({ variant: "default" }),
                       "hover:no-underline text-primary-foreground!",
@@ -240,7 +240,7 @@ export default function HelpCenterPage() {
                 Button={
                   firstProject ? (
                     <Link
-                      href={`/${activeOrg.slug}/projects/${firstProject.slug}?startTour=2`}
+                      href={`/${activeOrg.slug}/projects/${firstProject.slug}?startTour=group-home`}
                       className={cn(
                         buttonVariants({ variant: "secondary" }),
                         "hover:no-underline",

src/app/(loading-group)/[organizationSlug]/overview/page.tsx

@@ -11,7 +11,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { fetcher, FetcherError } from "@/data-fetcher/fetcher";
 import { useActiveOrg } from "@/hooks/useActiveOrg";
 import { useOrganizationMenu } from "@/hooks/useOrganizationMenu";
-import { usePageTour } from "@/hooks/usePageTour";
+import { useAutoTour } from "@/hooks/useAutoTour";
 import { useViewMode } from "@/hooks/useViewMode";
 import type { OrgOverview } from "@/types/api/api";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
@@ -32,7 +32,7 @@ const OrganizationOverview: FunctionComponent = () => {
 
   const orgMenu = useOrganizationMenu();
   const [mode, setMode] = useViewMode("devguard-org-view-mode");
-  const { startTour } = usePageTour(orgOverviewTourSteps);
+  useAutoTour("org-overview", orgOverviewTourSteps);
 
   const {
     data: orgStatistics,

src/app/(loading-group)/[organizationSlug]/page.tsx

@@ -274,7 +274,7 @@ const OrganizationHomePage: FunctionComponent = () => {
   const { showModal, handleStartTour, handleSkip } = useWelcomeTour();
 
   useEffect(() => {
-    if (searchParams?.get("startTour") === "1") {
+    if (searchParams?.get("startTour") === "org-home") {
       startTour();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps