Merge branch 'main' into feat/role-management-fixes

.env.example

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=http://127.0.0.1:5000/api/v1
+REACT_APP_HYDRA_PUBLIC_URL=https://sso.init.stackspin.net

deployment/helmchart/templates/configmaps.yaml

@@ -19,6 +19,8 @@ data:
   KRATOS_PUBLIC_URL: {{ .Values.backend.kratos.publicUrl }}
   KRATOS_ADMIN_URL: {{ .Values.backend.kratos.adminUrl }}
   HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
+  # React can only read this env variable if it's prepended with REACT_APP
+  REACT_APP_HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
   HYDRA_ADMIN_URL: {{ .Values.backend.hydra.adminUrl }}
   LOGIN_PANEL_URL: {{ .Values.backend.loginPanelUrl }}
   DATABASE_URL: {{ .Values.backend.databaseUrl }}

src/common/util/index.ts

@@ -1,2 +1,2 @@
-export { isTouched } from './is-touched';
-export { addParamsToLink } from './add-params-to-link';
+export * from './is-touched';
+export * from './add-params-to-link';

src/components/Header/Header.tsx

@@ -26,6 +26,8 @@ function filterNavigationByDashboardRole(isAdmin: boolean) {
   return navigation.filter((item) => !item.requiresAdmin);
 }
 
+const HYDRA_URL = process.env.REACT_APP_HYDRA_PUBLIC_URL;
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
@@ -48,6 +50,8 @@ const Header: React.FC<HeaderProps> = () => {
 
   const navigationItems = filterNavigationByDashboardRole(isAdmin);
 
+  const signOutUrl = `${HYDRA_URL}/oauth2/sessions/logout`;
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -127,7 +131,8 @@ const Header: React.FC<HeaderProps> = () => {
                         <Menu.Item>
                           {({ active }) => (
                             <a
-                              onClick={logOut}
+                              onClick={() => logOut()}
+                              href={signOutUrl}
                               className={classNames(
                                 active ? 'bg-gray-100 cursor-pointer' : '',
                                 'block px-4 py-2 text-sm text-gray-700 cursor-pointer',