Merge pull request #234 from aldbr/main_FEAT_add-username-and-dirac-v…

…ersion

feat(library): add profile details (username, vo, group, properties)

packages/diracx-web-components/.eslintrc.json

@@ -1,19 +1,35 @@
 {
   "extends": [
-    "next/core-web-vitals",
-    "prettier",
     "plugin:import/recommended",
     "plugin:import/typescript",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier"
   ],
   "globals": {
     "JSX": "readonly"
   },
-  "plugins": ["import"],
+  "plugins": ["import", "@typescript-eslint", "react"],
   "rules": {
     "import/order": ["error"],
     "import/no-unused-modules": ["error"],
     "import/no-useless-path-segments": ["error"],
-    "import/no-unresolved": ["off"]
+    "import/no-unresolved": ["off"],
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

packages/diracx-web-components/components/ApplicationList.ts

@@ -1,10 +1,10 @@
 import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material";
-import ApplicationConfig from "@/types/ApplicationConfig";
 import JobMonitor from "./JobMonitor/JobMonitor";
-import UserDashboard from "./UserDashboard/UserDashboard";
+import BaseApp from "./BaseApp/BaseApp";
+import ApplicationMetadata from "@/types/ApplicationMetadata";
 
-export const applicationList: ApplicationConfig[] = [
-  { name: "Dashboard", component: UserDashboard, icon: Dashboard },
+export const applicationList: ApplicationMetadata[] = [
+  { name: "Base Application", component: BaseApp, icon: Dashboard },
   {
     name: "Job Monitor",
     component: JobMonitor,

packages/diracx-web-components/components/UserDashboard/UserDashboard.stories.tsx → packages/diracx-web-components/components/BaseApp/BaseApp.stories.tsx

@@ -2,15 +2,16 @@ import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { Paper } from "@mui/material";
+import { Apps } from "@mui/icons-material";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { useMUITheme } from "../../hooks/theme";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { NavigationProvider } from "../../contexts/NavigationProvider";
-import UserDashboard from "./UserDashboard";
+import BaseApp from "./BaseApp";
 
 const meta = {
-  title: "User Dashboard/UserDashboard",
-  component: UserDashboard,
+  title: "Base Application",
+  component: BaseApp,
   parameters: {
     layout: "centered",
   },
@@ -49,7 +50,7 @@ const meta = {
                   {
                     id: "example",
                     title: "App Name",
-                    icon: React.Component,
+                    icon: Apps,
                     type: "test",
                   },
                 ],
@@ -69,7 +70,7 @@ const meta = {
       useOidcAccessToken.mockRestore();
     };
   },
-} satisfies Meta<typeof UserDashboard>;
+} satisfies Meta<typeof BaseApp>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -82,7 +83,7 @@ export const LoggedIn: Story = {
     useOidcAccessToken.mockReturnValue({
       accessTokenPayload: { preferred_username: "John Doe" },
     });
-    return <UserDashboard {...props} />;
+    return <BaseApp {...props} />;
   },
 };
 
@@ -94,6 +95,6 @@ export const LoggedOff: Story = {
     useOidcAccessToken.mockReturnValue({
       accessTokenPayload: null,
     });
-    return <UserDashboard {...props} />;
+    return <BaseApp {...props} />;
   },
 };

packages/diracx-web-components/components/UserDashboard/UserDashboard.tsx → packages/diracx-web-components/components/BaseApp/BaseApp.tsx

@@ -1,5 +1,4 @@
 "use client";
-import React from "react";
 import { useOidcAccessToken } from "@axa-fr/react-oidc/";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
 import ApplicationHeader from "@/components/shared/ApplicationHeader";
@@ -9,7 +8,7 @@ import ApplicationHeader from "@/components/shared/ApplicationHeader";
  *
  * @returns User Dashboard content
  */
-export default function UserDashboard({
+export default function BaseApplication({
   headerSize,
 }: {
   /** The size of the header, optional, will default to h4 */

packages/diracx-web-components/components/BaseApp/index.ts

@@ -0,0 +1 @@
+export { default as BaseApp } from "./BaseApp";

packages/diracx-web-components/components/DashboardLayout/Dashboard.stories.tsx

@@ -7,6 +7,7 @@ import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { NavigationProvider } from "../../contexts/NavigationProvider";
 import { useOidc, useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { applicationList } from "../ApplicationList";
+import { DashboardGroup } from "../../types/DashboardGroup";
 import Dashboard from "./Dashboard";
 
 const meta = {
@@ -22,7 +23,9 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const [sections, setSections] = React.useState([
+      const [userDashboard, setUserDashboard] = React.useState<
+        DashboardGroup[]
+      >([
         {
           title: "Group Title",
           extended: true,
@@ -47,7 +50,7 @@ const meta = {
           }}
         >
           <ApplicationsContext.Provider
-            value={[sections, setSections, applicationList]}
+            value={[userDashboard, setUserDashboard, applicationList]}
           >
             <Box sx={{ height: "50vh" }}>
               <Story />

packages/diracx-web-components/components/DashboardLayout/Dashboard.tsx

@@ -8,10 +8,10 @@ import { Menu } from "@mui/icons-material";
 import Toolbar from "@mui/material/Toolbar";
 import Stack from "@mui/material/Stack";
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
-import { useMUITheme } from "@/hooks/theme";
 import { ProfileButton } from "./ProfileButton";
 import { ThemeToggleButton } from "./ThemeToggleButton";
 import DashboardDrawer from "./DashboardDrawer";
+import { useMUITheme } from "@/hooks/theme";
 
 interface DashboardProps {
   /** The content to be displayed in the main area */
@@ -23,7 +23,7 @@ interface DashboardProps {
 }
 
 /**
- * Build a side bar on the left containing the available sections as well as a top bar.
+ * Build a side bar on the left containing the available groups as well as a top bar.
  * The side bar is expected to collapse if displayed on a small screen
  *
  * @param props - children, drawerWidth, logoURL

packages/diracx-web-components/components/DashboardLayout/DashboardDrawer.stories.tsx

@@ -8,6 +8,7 @@ import { useMUITheme } from "../../hooks/theme";
 import { useOidc, useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { applicationList } from "../ApplicationList";
+import { DashboardGroup } from "../../types";
 import DashboardDrawer from "./DashboardDrawer";
 
 const meta = {
@@ -20,7 +21,9 @@ const meta = {
   decorators: [
     (Story) => {
       const theme = useMUITheme();
-      const [sections, setSections] = React.useState([
+      const [userDashboard, setUserDashboard] = React.useState<
+        DashboardGroup[]
+      >([
         {
           title: "Group Title",
           extended: true,
@@ -36,7 +39,7 @@ const meta = {
       ]);
       return (
         <ApplicationsContext.Provider
-          value={[sections, setSections, applicationList]}
+          value={[userDashboard, setUserDashboard, applicationList]}
         >
           <MUIThemeProvider theme={theme}>
             <Box sx={{ width: "240px", height: "50vh" }}>