fix: remove the second definition of the application provider

TheauW · TheauW · commit 9601c5d2eb60 · 2025-07-02T09:19:03.000+02:00
diff --git a/.github/workflows/diracx-web-test.yml b/.github/workflows/diracx-web-test.yml
@@ -25,7 +25,7 @@ jobs:
     - name: Clone source
       run: |
         cd ..
-        git clone https://github.com/aldbr/diracx-charts.git -b main_FIX_diracx-web-install-resources
+        git clone https://github.com/DIRACGrid/diracx-charts.git
 
     - name: Start demo
       run: |
diff --git a/.github/workflows/gubbins-test.yml b/.github/workflows/gubbins-test.yml
@@ -53,7 +53,7 @@ jobs:
   #   standalone setup.                                                         #
   prepare-gubbins-backend:
     runs-on: ubuntu-latest
-    if: github.event_name == 'push' #${{ github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web' }}
+    if: ${{ github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web' }}
     defaults:
       run:
         # We need extglob for REFERENCE_BRANCH substitution
@@ -152,7 +152,7 @@ jobs:
 
   prepare-gubbins-frontend-as-a-standalone:
     runs-on: ubuntu-latest
-    if: github.event_name == 'push' #${{ github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web' }}
+    if: ${{ github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web' }}
     steps:
       - uses: actions/checkout@v4
 
@@ -246,14 +246,14 @@ jobs:
   run-demo:
     runs-on: ubuntu-latest
     needs: [prepare-gubbins-frontend-as-a-standalone, prepare-gubbins-backend]
-    if: github.event_name == 'push' #github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web'
+    if: github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web'
     steps:
     - uses: actions/checkout@v4 
       
     - name: Clone source
       run: |
         cd ..
-        git clone https://github.com/TheauW/diracx-charts.git -b twartel-fix-ci
+        git clone https://github.com/DIRACGrid/diracx-charts.git
 
     # ========================================================================#
     # WARNING: In your CI/CD pipeline, you should remove the following steps  #
@@ -330,3 +330,10 @@ jobs:
         browser: chrome
         config: baseUrl=${{ env.DIRACX_URL }}
         project: /tmp/gubbins-web
+    
+    - name: Upload Cypress screenshots
+      if: failure()  
+      uses: actions/upload-artifact@v4
+      with:
+        name: cypress-screenshots
+        path: /tmp/gubbins-web/cypress/screenshots
diff --git a/docs/developer/create_application.md b/docs/developer/create_application.md
@@ -6,7 +6,7 @@ The applicatins created here will be available for DiracX-Web and for all the ex
 
 ### Declare the application
 
-In the file `packages/diracx-web-components/src/components/ApplicationList.ts` you can extend the `applicationList` with your new app. 
+In the file `packages/diracx-web-components/src/components/applicationList.ts` you can extend the `applicationList` with your new app. 
 
 You must provide: 
 - A clear and explicit name
diff --git a/packages/diracx-web-components/src/components/applicationList.ts b/packages/diracx-web-components/src/components/applicationList.ts
diff --git a/packages/diracx-web-components/src/components/defaultDashboard.ts b/packages/diracx-web-components/src/components/defaultDashboard.ts
@@ -0,0 +1,15 @@
+import { DashboardGroup } from "../types/DashboardGroup";
+
+export const defaultDashboard: DashboardGroup[] = [
+  {
+    title: "My dashboard",
+    extended: true,
+    items: [
+      {
+        title: "My Jobs",
+        type: "Job Monitor",
+        id: "JobMonitor0",
+      },
+    ],
+  },
+];
diff --git a/packages/diracx-web-components/src/components/index.ts b/packages/diracx-web-components/src/components/index.ts
@@ -1,5 +1,5 @@
 // Application list
-export { applicationList } from "./ApplicationList";
+export { applicationList } from "./applicationList";
 
 // Dashboard Layout
 export * from "./DashboardLayout";
diff --git a/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx b/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import React, { createContext, useEffect, useState } from "react";
-import { applicationList } from "../components/ApplicationList";
+import { applicationList } from "../components/applicationList";
+import { defaultDashboard } from "../components/defaultDashboard";
 import { DashboardGroup } from "../types/DashboardGroup";
 import ApplicationMetadata from "../types/ApplicationMetadata";
 
@@ -33,7 +34,7 @@ interface ApplicationsProviderProps {
 export const ApplicationsProvider = ({
   children,
   appList = applicationList,
-  defaultUserDashboard,
+  defaultUserDashboard = defaultDashboard,
 }: ApplicationsProviderProps) => {
   const loadedDashboard = sessionStorage.getItem("savedDashboard");
   const parsedDashboard: DashboardGroup[] = loadedDashboard
@@ -51,21 +52,7 @@ export const ApplicationsProvider = ({
   useEffect(() => {
     if (userDashboard.length !== 0) return;
 
-    setUserDashboard(
-      defaultUserDashboard || [
-        {
-          title: "My dashboard",
-          extended: true,
-          items: [
-            {
-              title: "My Jobs",
-              type: "Job Monitor",
-              id: "JobMonitor0",
-            },
-          ],
-        },
-      ],
-    );
+    setUserDashboard(defaultUserDashboard);
   }, [appList, defaultUserDashboard]);
 
   // Save the dashboard in session storage
diff --git a/packages/diracx-web-components/src/contexts/DiracXWebProviders.tsx b/packages/diracx-web-components/src/contexts/DiracXWebProviders.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import type { ApplicationMetadata, DashboardGroup } from "../types";
+
+import { OIDCSecure } from "../components";
 import {
   OIDCConfigurationProvider,
   ThemeProvider,
@@ -12,13 +15,17 @@ interface DiracXWebProvidersProps {
   getPath: () => string;
   setPath: (path: string) => void;
   getSearchParams: () => URLSearchParams;
+  appList?: ApplicationMetadata[];
+  defaultUserDashboard?: DashboardGroup[];
 }
 
 export function DiracXWebProviders({
   children,
   getPath,
   setPath,
   getSearchParams,
+  appList,
+  defaultUserDashboard,
 }: DiracXWebProvidersProps) {
   return (
     <OIDCConfigurationProvider>
@@ -27,8 +34,13 @@ export function DiracXWebProviders({
         setPath={setPath}
         getSearchParams={getSearchParams}
       >
-        <ApplicationsProvider>
-          <ThemeProvider>{children}</ThemeProvider>
+        <ApplicationsProvider
+          appList={appList}
+          defaultUserDashboard={defaultUserDashboard}
+        >
+          <ThemeProvider>
+            <OIDCSecure>{children}</OIDCSecure>
+          </ThemeProvider>
         </ApplicationsProvider>
       </NavigationProvider>
     </OIDCConfigurationProvider>
diff --git a/packages/diracx-web-components/stories/Dashboard.stories.tsx b/packages/diracx-web-components/stories/Dashboard.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Box } from "@mui/material";
 import { ApplicationsContext } from "../src/contexts/ApplicationsProvider";
 import { NavigationProvider } from "../src/contexts/NavigationProvider";
-import { applicationList } from "../src/components/ApplicationList";
+import { applicationList } from "../src/components/applicationList";
 import { DashboardGroup } from "../src/types/DashboardGroup";
 import Dashboard from "../src/components/DashboardLayout/Dashboard";
 import { ThemeProvider } from "../src/contexts/ThemeProvider";
diff --git a/packages/diracx-web/src/app/(dashboard)/layout.tsx b/packages/diracx-web/src/app/(dashboard)/layout.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { Box } from "@mui/material";
 import { DiracXWebProviders } from "@dirac-grid/diracx-web-components/contexts";
 import {
-  OIDCSecure,
   Dashboard,
 } from "@dirac-grid/diracx-web-components/components";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -25,22 +24,20 @@ export default function DashboardLayout({
         }}
         getSearchParams={() => searchParams}
       >
-        <OIDCSecure>
-          <Dashboard>
-            <Box
-              sx={{
-                ml: "1%",
-                mr: "1%",
-                display: "flex",
-                flexDirection: "column",
-                flexGrow: 1,
-                overflow: "hidden",
-              }}
-            >
-              {children}
-            </Box>
-          </Dashboard>
-        </OIDCSecure>
+        <Dashboard>
+          <Box
+            sx={{
+              ml: "1%",
+              mr: "1%",
+              display: "flex",
+              flexDirection: "column",
+              flexGrow: 1,
+              overflow: "hidden",
+            }}
+          >
+            {children}
+          </Box>
+        </Dashboard>
       </DiracXWebProviders>
     </section>
   );
diff --git a/packages/extensions/src/app/(dashboard)/layout.tsx b/packages/extensions/src/app/(dashboard)/layout.tsx
@@ -2,15 +2,13 @@
 import React from "react";
 import { Box } from "@mui/material";
 import {
-  OIDCSecure,
   Dashboard,
 } from "@dirac-grid/diracx-web-components/components";
 import {
-  ApplicationsProvider,
   DiracXWebProviders,
 } from "@dirac-grid/diracx-web-components/contexts";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { applicationList } from "@/gubbins/ApplicationList";
+import { applicationList } from "@/gubbins/applicationList";
 import { defaultSections } from "@/gubbins/DefaultUserDashboard";
 
 // Layout for the dashboard: setup the providers and the dashboard for the applications
@@ -32,32 +30,25 @@ export default function DashboardLayout({
       getPath={() => pathname}
       setPath={router.push}
       getSearchParams={() => searchParams}
+      // You can optionally pass a list of applications and a default user dashboard
+      appList={applicationList}
+      defaultUserDashboard={defaultSections}
     >
-      {/* ApplicationsProvider is the provider for the applications, you can give it customized application list or default user dashboard to override them.
-      No need to use it if you don't want to customize the applications */}
-      <ApplicationsProvider
-        appList={applicationList}
-        defaultUserDashboard={defaultSections}
-      >
-        {/* OIDCSecure is used to make sure the user is authenticated before accessing the dashboard */}
-        <OIDCSecure>
-          {/* Dashboard is the main layout for the applications, you can optionally give it a custom logo URL and a drawer width */}
-          <Dashboard logoURL={customLogoURL} drawerWidth={250}>
-            <Box
-              sx={{
-                ml: "1%",
-                mr: "1%",
-                display: "flex",
-                flexDirection: "column",
-                flexGrow: 1,
-                overflow: "hidden",
-              }}
-            >
-              {children}
-            </Box>
-          </Dashboard>
-        </OIDCSecure>
-      </ApplicationsProvider>
+      {/* Dashboard is the main layout for the applications, you can optionally give it a custom logo URL and a drawer width */}
+      <Dashboard logoURL={customLogoURL} drawerWidth={250}>
+        <Box
+          sx={{
+            ml: "1%",
+            mr: "1%",
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            overflow: "hidden",
+          }}
+        >
+          {children}
+        </Box>
+      </Dashboard>
     </DiracXWebProviders>
   );
 }
diff --git a/packages/extensions/src/app/auth/layout.tsx b/packages/extensions/src/app/auth/layout.tsx
@@ -2,6 +2,8 @@
 import React from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { DiracXWebProviders } from "@dirac-grid/diracx-web-components/contexts";
+import { applicationList } from "@/gubbins/applicationList";
+import { defaultSections } from "@/gubbins/DefaultUserDashboard";
 
 // Layout for the authentication page: setup the navigation provider
 export default function AuthLayout({
@@ -19,6 +21,9 @@ export default function AuthLayout({
       getPath={() => pathname}
       setPath={router.push}
       getSearchParams={() => searchParams}
+      // You can optionally pass a list of applications and a default user dashboard
+      appList={applicationList}
+      defaultUserDashboard={defaultSections}
     >
       {children}
     </DiracXWebProviders>
diff --git a/packages/extensions/src/gubbins/applicationList.ts b/packages/extensions/src/gubbins/applicationList.ts
diff --git a/packages/extensions/test/e2e/loginOut.cy.ts b/packages/extensions/test/e2e/loginOut.cy.ts
@@ -7,7 +7,7 @@ describe("Login and Logout", () => {
     // so we must tell it to visit our website with the `cy.visit()` command.
     // Since we want to visit the same URL at the start of all our tests,
     // we include it in our beforeEach function so that it runs before each test
-    cy.visit("/");
+    cy.visit("/auth");
   });
 
   it("login", () => {
@@ -43,6 +43,8 @@ describe("Login and Logout", () => {
     // From now on the user is logged in
     // The login buttton should not be present anymore
     cy.get('[data-testid="button-login"]').should("not.exist");
+
+    cy.visit("/");
     cy.contains("Owners").should("exist");
 
     // Click on the user avatar
diff --git a/packages/extensions/test/e2e/ownerMonitor.cy.ts b/packages/extensions/test/e2e/ownerMonitor.cy.ts
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-describe("Job Monitor", () => {
+describe("Owner Monitor", () => {
   beforeEach(() => {
     cy.session("login", () => {
       cy.visit("/auth");
@@ -23,10 +23,11 @@ describe("Job Monitor", () => {
         '[{"title":"Group 2","extended":true,"items":[{"title":"Owner Monitor","id":"JOwner Monitor0","type":"Owner Monitor"},{"title":"Owner Monitor 2","id":"Owner Monitor 21","type":"Owner Monitor"}]}]',
       );
     });
+
+    cy.visit("/");
   });
 
   it("should render the drawer", () => {
-    cy.wait(20000);
     cy.get("header").contains("Owner Monitor").should("be.visible");
   });
 
@@ -51,8 +52,13 @@ describe("Job Monitor", () => {
   });
 
   /** Column interactions */
-
   it("should hide/show columns", () => {
+    // Type the new owner name
+    cy.get('[data-testid="owner-name-input"]').type("Josephine");
+
+    // Click the Add Owner button
+    cy.contains("button", "Add Owner").click();
+
     // Click on the visibility icon
     cy.get('[data-testid="VisibilityIcon"] > path').click();
     cy.get('[data-testid="column-visibility-popover"]').should("be.visible");
