🔧 Update auth features.

DLR-SC · Dec 13, 2024 · 5f86a96 · 5f86a96
1 parent 2678d5b
commit 5f86a96
Show file tree

Hide file tree

Showing 13 changed files with 442 additions and 104 deletions.
diff --git a/frontend/src/DataContext.tsx b/frontend/src/DataContext.tsx
@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React, {createContext, useState, useEffect, useMemo} from 'react';
+import React, {createContext, useState, useEffect, useMemo, useContext} from 'react';
 import {useAppDispatch, useAppSelector} from 'store/hooks';
 import {
   useGetScenariosQuery,
@@ -43,6 +43,8 @@ import {
   setStartDate,
 } from './store/DataSelectionSlice';
 import theme from './util/Theme';
+import {AuthContext} from 'react-oauth2-code-pkce';
+import {setToken} from './store/AuthSlice';
 
 // Create the context
 export const DataContext = createContext<{
@@ -87,6 +89,12 @@ export const DataProvider = ({children}: {children: React.ReactNode}) => {
   const [geoData, setGeoData] = useState<GeoJSON>();
   const [searchBarData, setSearchBarData] = useState<GeoJsonProperties[] | undefined>(undefined);
 
+  const {token} = useContext(AuthContext);
+
+  useEffect(() => {
+    dispatch(setToken(token));
+  }, [dispatch, token]);
+
   const selectedDistrict = useAppSelector((state) => state.dataSelection.district.ags);
   const selectedScenario = useAppSelector((state) => state.dataSelection.scenario);
   const activeScenarios = useAppSelector((state) => state.dataSelection.activeScenarios);

diff --git a/frontend/src/components/AuthProvider.tsx b/frontend/src/components/AuthProvider.tsx
@@ -1,8 +1,7 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR) and CISPA Helmholtz Center for Information Security
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
-import {ReactNode} from 'react';
+import React, {ReactNode} from 'react';
 import {AuthProvider as OAuth2WithPkceProvider, TAuthConfig} from 'react-oauth2-code-pkce';
 import {useAppSelector} from 'store/hooks';
 
@@ -11,7 +10,7 @@ interface AuthProviderProps {
 }
 
 function AuthProvider({children}: AuthProviderProps) {
-  const realm = useAppSelector((state) => state.realm.name);
+  const realm = useAppSelector((state) => state.auth.realm);
   let authConfig: TAuthConfig;
 
   if (!import.meta.env.VITE_OAUTH_CLIENT_ID || !import.meta.env.VITE_OAUTH_API_URL) {
@@ -36,7 +35,7 @@ function AuthProvider({children}: AuthProviderProps) {
         import.meta.env.VITE_OAUTH_REDIRECT_URL === undefined
           ? window.location.origin
           : `${import.meta.env.VITE_OAUTH_REDIRECT_URL}`,
-      scope: 'openid profile email', // default scope without audience
+      scope: 'openid profile email loki-back-audience roles', // default scope without audience
       autoLogin: false,
     };
   }

diff --git a/frontend/src/components/LineChartContainer.tsx b/frontend/src/components/LineChartContainer.tsx
@@ -73,7 +73,7 @@ export default function LineChartContainer() {
 
       return lines;
     });
-  }, [lineChartData, scenarios]);
+  }, [lineChartData, scenarioColors, scenarios]);
 
   // Set reference day in store
   useEffect(() => {

diff --git a/frontend/src/components/ScenarioComponents/FilterComponents/FilterDialogContainer.tsx b/frontend/src/components/ScenarioComponents/FilterComponents/FilterDialogContainer.tsx
@@ -11,6 +11,7 @@ import {GroupFilter} from 'types/group';
 import {Localization} from 'types/localization';
 import {useAppDispatch} from '../../../store/hooks';
 import {setIsFilterDialogOpen} from '../../../store/UserOnboardingSlice';
+import Button from '@mui/material/Button';
 
 export interface FilterDialogContainerProps {
   /** A dictionary of group filters. */
@@ -65,45 +66,70 @@ export default function FilterDialogContainer({
   };
 
   return (
-    <Dialog id='manage-filters-dialog' maxWidth='lg' fullWidth={true} open={open} onClose={handleClose}>
-      <ManageGroupDialog
-        groupFilters={groupFilters}
-        setGroupFilters={setGroupFilters}
-        categories={categories}
-        groups={groups}
-        onCloseRequest={handleClose}
-        unsavedChangesCallback={(unsavedChanges) => setGroupEditorUnsavedChanges(unsavedChanges)}
-        localization={localization}
-      />
-      <ConfirmDialog
-        open={closeDialogOpen}
-        title={
-          localization?.overrides?.['group-filters.confirm-discard-title']
-            ? customT(localization.overrides['group-filters.confirm-discard-title'])
-            : defaultT('group-filters.confirm-discard-title')
-        }
-        text={
-          localization?.overrides?.['group-filters.confirm-discard-text']
-            ? customT(localization.overrides['group-filters.confirm-discard-text'])
-            : defaultT('group-filters.confirm-discard-text')
-        }
-        abortButtonText={
-          localization?.overrides?.['group-filters.close']
-            ? customT(localization.overrides['group-filters.close'])
-            : defaultT('group-filters.close')
-        }
-        confirmButtonText={
-          localization?.overrides?.['group-filters.discard']
-            ? customT(localization.overrides['group-filters.discard'])
-            : defaultT('group-filters.discard')
+    <>
+      <Button
+        id='manage-filters-button'
+        variant='outlined'
+        color='primary'
+        sx={{
+          width: '200px',
+          alignSelf: 'center',
+          marginTop: '20px',
+        }}
+        onClick={() => {
+          setOpen(true);
+          dispatch(setIsFilterDialogOpen(true));
+        }}
+        aria-label={
+          localization?.overrides?.['group-filters.title']
+            ? customT(localization.overrides['group-filters.title'])
+            : defaultT('group-filters.title')
         }
-        onAnswer={(answer) => {
-          if (answer) {
-            setOpen(false);
+      >
+        {localization?.overrides?.['scenario.manage-groups']
+          ? customT(localization.overrides['scenario.manage-groups'])
+          : defaultT('scenario.manage-groups')}
+      </Button>
+      <Dialog id='manage-filters-dialog' maxWidth='lg' fullWidth={true} open={open} onClose={handleClose}>
+        <ManageGroupDialog
+          groupFilters={groupFilters}
+          setGroupFilters={setGroupFilters}
+          categories={categories}
+          groups={groups}
+          onCloseRequest={handleClose}
+          unsavedChangesCallback={(unsavedChanges) => setGroupEditorUnsavedChanges(unsavedChanges)}
+          localization={localization}
+        />
+        <ConfirmDialog
+          open={closeDialogOpen}
+          title={
+            localization?.overrides?.['group-filters.confirm-discard-title']
+              ? customT(localization.overrides['group-filters.confirm-discard-title'])
+              : defaultT('group-filters.confirm-discard-title')
           }
-          setCloseDialogOpen(false);
-        }}
-      />
-    </Dialog>
+          text={
+            localization?.overrides?.['group-filters.confirm-discard-text']
+              ? customT(localization.overrides['group-filters.confirm-discard-text'])
+              : defaultT('group-filters.confirm-discard-text')
+          }
+          abortButtonText={
+            localization?.overrides?.['group-filters.close']
+              ? customT(localization.overrides['group-filters.close'])
+              : defaultT('group-filters.close')
+          }
+          confirmButtonText={
+            localization?.overrides?.['group-filters.discard']
+              ? customT(localization.overrides['group-filters.discard'])
+              : defaultT('group-filters.discard')
+          }
+          onAnswer={(answer) => {
+            if (answer) {
+              setOpen(false);
+            }
+            setCloseDialogOpen(false);
+          }}
+        />
+      </Dialog>
+    </>
   );
 }
diff --git a/frontend/src/components/ScenarioComponents/ScenarioContainer.tsx b/frontend/src/components/ScenarioComponents/ScenarioContainer.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import {darken, useTheme} from '@mui/material/';
 import React, {useContext, useEffect, useMemo, useState} from 'react';
 import {NumberFormatter} from 'util/hooks';
@@ -25,6 +24,7 @@ import FilterDialogContainer from './FilterComponents/FilterDialogContainer';
 import GeneralButton from './ExpandedButtonComponents/ExpandedButton';
 import ReferenceDatePicker from './ReferenceDatePickerComponents.tsx/ReferenceDatePicker';
 import {useAppDispatch, useAppSelector} from 'store/hooks';
+import ScenarioLibrary from './ScenarioLibrary';
 
 interface ScenarioContainerProps {
   /** The minimum number of compartment rows.*/
@@ -255,38 +255,15 @@ export default function ScenarioContainer({minCompartmentsRows = 4, maxCompartme
               flexDirection: 'column',
             }}
           >
-            <Button
-              id='scenario-add-button'
-              variant='outlined'
-              color='success'
-              sx={{
-                height: '244px',
-                width: '200px',
-                fontWeight: 'bolder',
-                fontSize: '3rem',
-                border: `2px ${theme.palette.divider} dashed`,
-                borderRadius: '3px',
-                color: `${theme.palette.divider}`,
-                alignSelf: 'top',
-                '&:hover': {
-                  border: `2px ${theme.palette.divider} dashed`,
-                  background: '#E7E7E7',
-                },
-              }}
-              aria-label={t('scenario.add')}
-            >
-              +
-            </Button>
-          </Box>
-          {groupCategories && groups && (
+            <ScenarioLibrary />
             <FilterDialogContainer
               groupFilters={groupFilters}
               categories={translatedCategories}
               groups={translatedGroups}
               setGroupFilters={(newGroupFilters) => dispatch(setGroupFilters(newGroupFilters))}
               localization={localization}
             />
-          )}
+          </Box>
         </Box>
       </div>
     </ScrollSync>