Version 1.4.0 (#17)

* implementation & compatibility with existing systems * change model && prettier * bypass authentication with development mode * add route getGroups * swagger with development mode * new external component multiselect * changing model * users/groups management * fix loop when not connected * fix overflow * UI - users/groups/controls management * wip reviewf of routes * review of routes * test improvements * user context useless * item of db is named control from now * search control implementation * bug fix to call ci/cd * fix when ci/cd fetch returned an error * bug fix to call ci/cd entrypoint with wrong curl command * user information called up when the component is mounted * remove comments relating to swagger, which are too difficult to maintain * review of the token authentication process * search component * remove swaggerjsdoc & update [email protected] * change password improvements * bug fix changebearertoken * autocomplete off for search input * prepa update version & database patch * search auto focus on load * loadership during compare process * add or edit control only via UI * bug UI: After comparison display immediate execution date * version 1.4.0
dhenry123 · Feb 19, 2024 · 4c433e9 · 4c433e9
1 parent 4659e9c
commit 4c433e9
Show file tree

Hide file tree

Showing 60 changed files with 2,764 additions and 2,361 deletions.
diff --git a/README-fr.md b/README-fr.md
@@ -37,6 +37,7 @@ Les versions "Release Candidats" seront définies comme suit : "[\d+]\.[\d+]\.[\
   - http://[Addresse IP]:[port]/
   - login/mot de passe par défaut: admin/admin
 - Vous changez le mot de passe.
+- [Creation des utilisateurs & groupes](./doc/GROUPS.md)
 - [Création du premier "contrôle" (qui peut être votre nouveau service UTDON... pour vérifier que tout fonctionne)](./doc/CONTROL.md)
 - Vous exécuter la comparaison.
 - Chaque contrôle indique son dernier état de "comparaison".
@@ -102,9 +103,7 @@ Les sessions sont gérées en RAM, un simple redémarrage du service réinitiali
 
 - Authentification Github pour supprimer la barrière "rate-limit".
 - Dupliquer un contrôle.
-- Filtres pour l'affichage.
-- Classement des contrôles par groupes.
-- Plusieurs "Auth Token" par contrôle pour éviter de fournir le jeton d'authentification de l'admin.
+- Ajout d'un token "readonly" par utilisateur pour utilisation à partir d'une chaîne CI/CD
 - Stockage S3.
 - Entrypoint API metrics.
 - Authentification LDAP.
@@ -115,6 +114,10 @@ Les sessions sont gérées en RAM, un simple redémarrage du service réinitiali
 
 - Radioactive button : <https://zurb.com/playground/radioactive-buttons>
 
+- Multiselect component https://github.com/hc-oss/react-multi-select-component?tab=readme-ov-file
+
+- LoaderShip: https://www.loadership.com/
+
 - Logo: <https://www.instagram.com/henry_redbeard/>
 
 ## Si vous appréciez cette application

diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ Release Candidates will be defined as follows: "[\d+]\.[\d+]\.[\d+]-rc-[\d+]".
   - http://[IP address]:[port]/
   - default login/password: admin/admin
 - Change the password.
+- [Create users & groups](./doc/en/GROUPS.md)
 - [Create the first "control" (which may be your new UTDON service... to check that everything is working)](./doc/en/CONTROL.md)
 - You run the comparison.
 - Each control indicates its last "comparison" status.
@@ -102,9 +103,7 @@ Sessions are managed in RAM, so a simple service restart resets all sessions.
 
 - Github authentication to remove rate-limit barrier.
 - Duplicate a control.
-- Display filters.
-- Controls sorted into groups.
-- Multiple "Auth Token" per control to avoid providing admin authentication token.
+- Addition of a "readonly" token per user for use with a CI/CD chain
 - S3 storage.
 - Entrypoint API metrics.
 - LDAP authentication.
@@ -115,6 +114,10 @@ Sessions are managed in RAM, so a simple service restart resets all sessions.
 
 - Radioactive button: <https://zurb.com/playground/radioactive-buttons>
 
+- Multiselect component https://github.com/hc-oss/react-multi-select-component?tab=readme-ov-file
+
+- LoaderShip: https://www.loadership.com/
+
 - Logo: <https://www.instagram.com/henry_redbeard/>
 
 ## If you like this application

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mytinydc-utdon-client",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Application for tracking obsolete FOSS applications - UI",
   "type": "module",
   "scripts": {
@@ -21,16 +21,17 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.5.2",
+    "react-multi-select-component": "^4.3.4",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.15",
+    "@storybook/addon-interactions": "^7.6.15",
+    "@storybook/addon-links": "^7.6.15",
+    "@storybook/blocks": "^7.6.15",
+    "@storybook/react": "^7.6.15",
+    "@storybook/react-vite": "^7.6.15",
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
@@ -42,7 +43,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-storybook": "^0.6.15",
     "sass": "^1.69.5",
-    "storybook": "^7.6.4",
+    "storybook": "^7.6.15",
     "storybook-addon-react-router-v6": "^2.0.10",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -12,12 +12,17 @@ import ServiceMessage from "./components/ServiceMessage";
 import { RouterProvider } from "react-router-dom";
 import { Router } from "./app/Router";
 import { useEffect } from "react";
-import { setLanguage } from "./app/contextSlice";
+import { setIsLoaderShip, setLanguage } from "./app/contextSlice";
+import { Dialog } from "./components/Dialog";
+
+import "./app/css/loadership.scss";
 
 export const App = () => {
   const dispatch = useAppDispatch();
   const contextLanguage = useAppSelector((state) => state.context.language);
 
+  const isDialogVisible = useAppSelector((state) => state.context.isLoaderShip);
+
   useEffect(() => {
     // Browser language detection
     const navigatorLocale =
@@ -37,6 +42,24 @@ export const App = () => {
         <RouterProvider router={Router()} />
         {/* Global Service Messenger */}
         <ServiceMessage />
+        <Dialog
+          className="loadership_Dialog"
+          visible={isDialogVisible}
+          onHide={() => dispatch(setIsLoaderShip(false))}
+          sticky={true}
+        >
+          <div className="loadership_ILQMG">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </Dialog>
       </IntlProvider>
     </div>
   );

diff --git a/client/src/api/mytinydcUPDONApi.ts b/client/src/api/mytinydcUPDONApi.ts
@@ -16,7 +16,7 @@ export const mytinydcUPDONApi = createApi({
   // Query service name
   reducerPath: "api",
   // tag types
-  tagTypes: ["User", "Users"],
+  tagTypes: ["User", "Users", "Groups", "Controls"],
   // Url Base API
   baseQuery: fetchBaseQuery({ baseUrl: "/api/v1" }),
   endpoints: (builder) => ({
@@ -57,10 +57,11 @@ export const mytinydcUPDONApi = createApi({
         url: `/action/compare/${encodeURIComponent(uuid)}/0`,
       }),
     }),
-    getCheck: builder.query({
+    getControl: builder.query({
       query: (uuidOrAll: string) => ({
         url: `/control/${uuidOrAll}`,
       }),
+      providesTags: ["Controls"],
     }),
     deleteCheck: builder.mutation({
       query: (uuid: string) => ({
@@ -109,9 +110,12 @@ export const mytinydcUPDONApi = createApi({
       }),
       providesTags: ["Users"],
     }),
-    getUserInfo: builder.query({
+    // needed to keep context when use press F5
+    // login method return info needed but if user press F5 once connected
+    // login method is not recalled
+    getUserLogin: builder.query({
       query: () => ({
-        url: `/user/`,
+        url: `/userlogin/`,
       }),
       providesTags: ["User"],
     }),
@@ -121,15 +125,15 @@ export const mytinydcUPDONApi = createApi({
         url: `/users/`,
         body: data,
       }),
-      invalidatesTags: ["Users"],
+      invalidatesTags: ["Users", "Groups"],
     }),
     putUser: builder.mutation({
       query: (data: NewUserType) => ({
         method: "PUT",
         url: `/users/`,
         body: data,
       }),
-      invalidatesTags: ["Users"],
+      invalidatesTags: ["Users", "Groups"],
     }),
     deleteUser: builder.mutation({
       query: (login: string) => ({
@@ -139,12 +143,29 @@ export const mytinydcUPDONApi = createApi({
       }),
       invalidatesTags: ["Users"],
     }),
+    getGroups: builder.query({
+      query: () => ({
+        url: `/groups/`,
+      }),
+      providesTags: ["Groups"],
+    }),
+    isAdmin: builder.query({
+      query: () => ({
+        url: `/isadmin/`,
+      }),
+    }),
+    getUserGroups: builder.query({
+      query: () => ({
+        url: `/userGroups/`,
+      }),
+    }),
   }),
 });
 
 export const {
   usePostUserLoginMutation,
-  useGetCheckQuery,
+  useGetControlQuery,
   useGetUsersQuery,
-  useGetUserInfoQuery,
+  useGetUserLoginQuery,
+  useGetGroupsQuery,
 } = mytinydcUPDONApi;
diff --git a/client/src/app/Router.tsx b/client/src/app/Router.tsx
@@ -3,16 +3,16 @@
  * @license AGPL3
  */
 
-import { createBrowserRouter, redirect } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import { ErrorInRouter } from "../features/errors/ErrorInRouter";
 import { PageLogin } from "../features/login/PageLogin";
 import { useAppDispatch } from "../app/hook";
 import { mytinydcUPDONApi } from "../api/mytinydcUPDONApi";
 import { showServiceMessage } from "./serviceMessageSlice";
 import { PageHome } from "../features/homepage/PageHome";
-import { ApiResponseType } from "../../../src/Global.types";
 import { DisplayControls } from "../features/displaycontrols/DisplayControls";
 import { ControlManager } from "../features/controlmanagement/ControlManager";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 
 /**
  * Logic :
@@ -31,23 +31,20 @@ export const Router = () => {
         return await dispatch(
           mytinydcUPDONApi.endpoints.getUserIsAuthenticated.initiate(null)
         )
-          .then((response: unknown) => {
-            const convResponse: ApiResponseType = response as ApiResponseType;
-            // My api returns ... nothing only status 200 - Redux analyse like error !!!
-            if (
-              convResponse.error &&
-              convResponse.error.originalStatus !== 200
-            ) {
-              return redirect("/login");
+          .unwrap()
+          .catch((error: FetchBaseQueryError) => {
+            if (error.status === 401) {
+              return <PageLogin></PageLogin>;
+            } else {
+              dispatch(
+                showServiceMessage({
+                  detail:
+                    error && error.data
+                      ? error.data.toString()
+                      : "Unknown check server logs",
+                })
+              );
             }
-            return null;
-          })
-          .catch((error: unknown) => {
-            dispatch(
-              showServiceMessage({
-                detail: error,
-              })
-            );
           });
       },
       children: [

diff --git a/client/src/app/contextSlice.ts b/client/src/app/contextSlice.ts
@@ -11,7 +11,6 @@ import { contextSliceType } from "../../../src/Global.types";
 const initialState: contextSliceType = {
   // French is default language
   language: { locale: "fr", lang: languageFr },
-  user: { login: "", bearer: "" },
   application: {
     name: "UTdOn",
     applicationtitle: "UtDon",
@@ -20,15 +19,15 @@ const initialState: contextSliceType = {
   },
   uptodateForm: INITIALIZED_UPTODATEFORM,
   refetchuptodateForm: false,
+  isAdmin: false,
+  search: "",
+  isLoaderShip: false,
 };
 
 export const contextSlice = createSlice({
   name: "context",
   initialState,
   reducers: {
-    setUser: (state, value) => {
-      state.user = value.payload;
-    },
     setLanguage: (state, value) => {
       if (value.payload === "fr") {
         state.language.locale = value.payload;
@@ -55,16 +54,27 @@ export const contextSlice = createSlice({
     setRefetchuptodateForm(state, value) {
       state.refetchuptodateForm = value.payload;
     },
+    setIsAdmin(state, value) {
+      state.isAdmin = value.payload || false;
+    },
+    setSearch(state, value) {
+      state.search = value.payload;
+    },
+    setIsLoaderShip(state, value) {
+      state.isLoaderShip = value.payload;
+    },
   },
 });
 
 // Exportable actions
 export const {
   setLanguage,
-  setUser,
   updateKeyUptodateFrom,
   resetUpdateForm,
   setUpdateForm,
   setRefetchuptodateForm,
+  setIsAdmin,
+  setSearch,
+  setIsLoaderShip,
 } = contextSlice.actions;
 export default contextSlice.reducer;