From 0cd9b9fbaa8478e3a18d96b77d1f066351810bc8 Mon Sep 17 00:00:00 2001 From: Radoslaw Szwajkowski Date: Fri, 26 Apr 2024 18:26:46 +0200 Subject: [PATCH] Switch sidebar type based on routes Signed-off-by: Radoslaw Szwajkowski --- .../src/app/layout/SidebarApp/SidebarApp.tsx | 345 +++++++++--------- 1 file changed, 175 insertions(+), 170 deletions(-) diff --git a/client/src/app/layout/SidebarApp/SidebarApp.tsx b/client/src/app/layout/SidebarApp/SidebarApp.tsx index dcabacf316..887045b095 100644 --- a/client/src/app/layout/SidebarApp/SidebarApp.tsx +++ b/client/src/app/layout/SidebarApp/SidebarApp.tsx @@ -1,5 +1,5 @@ -import React, { useEffect } from "react"; -import { NavLink, useHistory, useLocation } from "react-router-dom"; +import React, { FC } from "react"; +import { NavLink, Route, Switch, useHistory } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { Nav, @@ -8,7 +8,6 @@ import { NavList, NavExpandable, PageSidebarBody, - SelectOptionProps, } from "@patternfly/react-core"; import { Paths } from "@app/Paths"; @@ -16,193 +15,199 @@ import { LayoutTheme } from "../LayoutUtils"; import { checkAccess } from "@app/utils/rbac-utils"; import keycloak from "@app/keycloak"; -import { useLocalStorage } from "@migtools/lib-ui"; -import { LocalStorageKey } from "@app/Constants"; import { FEATURES_ENABLED } from "@app/FeatureFlags"; import { SimpleSelectBasic } from "@app/components/SimpleSelectBasic"; import "./SidebarApp.css"; +import { ReactElement } from "react-markdown/lib/react-markdown"; +import { adminRoutes, devRoutes } from "@app/Routes"; -export const SidebarApp: React.FC = () => { - const token = keycloak.tokenParsed || undefined; - const userRoles = token?.realm_access?.roles || [], - adminAccess = checkAccess(userRoles, ["tackle-admin"]); +type PersonaType = "ADMINISTRATION" | "MIGRATION"; - const { t } = useTranslation(); - const { search } = useLocation(); - const history = useHistory(); - const PersonaKey = { - ADMINISTRATION: "Administration", - MIGRATION: "Migration", - }; +const PersonaKey: { [key in PersonaType]: string } = { + ADMINISTRATION: "Administration", + MIGRATION: "Migration", +}; - const personaOptions: SelectOptionProps[] = [ - { value: PersonaKey.MIGRATION, children: PersonaKey.MIGRATION }, - adminAccess && { - value: PersonaKey.ADMINISTRATION, - children: PersonaKey.ADMINISTRATION, - }, - ].filter(Boolean); +export const SidebarApp: React.FC = () => ( + + {devRoutes.map(({ path, exact }, index) => ( + } + /> + ))} + {adminRoutes.map(({ path, exact }, index) => ( + } + /> + ))} + +); - const [selectedPersona, setSelectedPersona] = useLocalStorage({ - key: LocalStorageKey.selectedPersona, - defaultValue: null, - }); +const PersonaSidebar: FC<{ + children: ReactElement; + selectedPersona: PersonaType; + targetPath: Paths; +}> = ({ children, selectedPersona, targetPath }) => { + const token = keycloak.tokenParsed || undefined; + const userRoles = token?.realm_access?.roles || []; + const adminAccess = checkAccess(userRoles, ["tackle-admin"]); - useEffect(() => { - if (!selectedPersona) { - history.push("/applications"); - setSelectedPersona(PersonaKey.MIGRATION); - } - }, []); + const personaOptions: PersonaType[] = [ + "MIGRATION", + adminAccess && "ADMINISTRATION", + ].filter(Boolean); + const history = useHistory(); return (
{ - const selectionValue = selection; - setSelectedPersona(selectionValue); - if (selectionValue === PersonaKey.ADMINISTRATION) { - history.push(Paths.general); - } else { - history.push(Paths.applications); - } + value={selectedPersona} + options={personaOptions.map((value) => ({ + value, + children: PersonaKey[value], + }))} + onChange={() => { + history.push(targetPath); }} />
); }; + +export const MigrationSidebar = () => { + const { t } = useTranslation(); + return ( + + + + + {t("sidebar.applicationInventory")} + + + + + {t("sidebar.archetypes")} + + + + + {t("sidebar.reports")} + + + + + {t("sidebar.controls")} + + + {FEATURES_ENABLED.migrationWaves ? ( + + + {t("sidebar.migrationWaves")} + + + ) : null} + {FEATURES_ENABLED.dynamicReports ? ( + <> + + + {t("sidebar.issues")} + + + + + {t("sidebar.dependencies")} + + + + ) : null} + + + ); +}; + +export const AdminSidebar = () => { + const { t } = useTranslation(); + return ( + + + + + {t("terms.general")} + + + + + {t("terms.credentials")} + + + + + + Git + + + + + Subversion + + + + + Maven + + + + + + Proxy + + + + + Custom migration targets + + + {FEATURES_ENABLED.migrationWaves ? ( + + + + Jira + + + + ) : null} + + + {t("terms.assessmentQuestionnaires")} + + + + + ); +};