Soft landing page on projects or last viewed project (#2499)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

This PR introduces a soft landing page to the last viewed project or to
the project list (if there is more than 1 project)

Changes: 
- Replaced clearing of `storage` with clearing `cache` in logout.ts ::
REVERTED
- Root redirects to `projects` instead of `features`

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/App.tsx

@@ -63,7 +63,7 @@ export const App = () => {
                                             path="/"
                                             element={
                                                 <Navigate
-                                                    to="/features"
+                                                    to="/projects"
                                                     replace
                                                 />
                                             }

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -6,6 +6,8 @@ import ProjectInfo from './ProjectInfo/ProjectInfo';
 import { useStyles } from './Project.styles';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { useLastViewedProject } from '../../../hooks/useLastViewedProject';
+import { useEffect } from 'react';
 
 const refreshInterval = 15 * 1000;
 
@@ -16,6 +18,11 @@ const ProjectOverview = () => {
     const { members, features, health, description, environments } = project;
     const { classes: styles } = useStyles();
     usePageTitle(`Project overview – ${projectName}`);
+    const { setLastViewed } = useLastViewedProject();
+
+    useEffect(() => {
+        setLastViewed(projectName);
+    }, [projectName, setLastViewed]);
 
     return (
         <div>

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { mutate } from 'swr';
 import { getProjectFetcher } from 'hooks/api/getters/useProject/getProjectFetcher';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
@@ -152,6 +152,10 @@ export const ProjectListNew = () => {
             ? `${filteredProjects.length} of ${projects.length}`
             : projects.length;
 
+    if (projects?.length === 1) {
+        return <Navigate to={`/projects/${projects[0].id}`} replace />;
+    }
+
     return (
         <div ref={ref}>
             <PageContent

frontend/src/component/user/Login/Login.tsx

@@ -9,15 +9,22 @@ import Authentication from '../Authentication/Authentication';
 import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import { parseRedirectParam } from 'component/user/Login/parseRedirectParam';
+import { useLastViewedProject } from '../../../hooks/useLastViewedProject';
 
 const Login = () => {
     const { classes: styles } = useStyles();
     const { authDetails } = useAuthDetails();
     const { user } = useAuthUser();
+    const { lastViewed } = useLastViewedProject();
     const query = useQueryParams();
     const resetPassword = query.get('reset') === 'true';
     const invited = query.get('invited') === 'true';
-    const redirect = query.get('redirect') || '/';
+
+    const getRedirect = () => {
+        return lastViewed == null ? '/projects' : `/projects/${lastViewed}`;
+    };
+
+    const redirect = query.get('redirect') || getRedirect();
 
     if (user) {
         return <Navigate to={parseRedirectParam(redirect)} replace />;

frontend/src/hooks/useLastViewedProject.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { setLocalStorageItem, getLocalStorageItem } from '../utils/storage';
+import useUiConfig from './api/getters/useUiConfig/useUiConfig';
+
+export const useLastViewedProject = () => {
+    const { uiConfig } = useUiConfig();
+    const key = `${uiConfig.baseUriPath}:unleash-lastViewedProject`;
+
+    const [lastViewed, setLastViewed] = useState(() => {
+        return getLocalStorageItem(key);
+    });
+
+    useEffect(() => {
+        if (lastViewed) {
+            setLocalStorageItem(key, lastViewed);
+        }
+    }, [lastViewed, key]);
+
+    return {
+        lastViewed,
+        setLastViewed,
+    };
+};

frontend/src/hooks/useThemeMode.ts

@@ -4,6 +4,7 @@ import { setLocalStorageItem } from 'utils/storage';
 import mainTheme from 'themes/theme';
 import darkTheme from 'themes/dark-theme';
 import { Theme } from '@emotion/react';
+import useUiConfig from './api/getters/useUiConfig/useUiConfig';
 
 interface IUseThemeModeOutput {
     resolveTheme: () => Theme;
@@ -13,6 +14,8 @@ interface IUseThemeModeOutput {
 
 export const useThemeMode = (): IUseThemeModeOutput => {
     const { themeMode, setThemeMode } = useContext(UIContext);
+    const { uiConfig } = useUiConfig();
+    const key = `${uiConfig.baseUriPath}:unleash-theme`;
 
     const resolveTheme = () => {
         if (themeMode === 'light') {
@@ -25,10 +28,10 @@ export const useThemeMode = (): IUseThemeModeOutput => {
     const onSetThemeMode = () => {
         setThemeMode((prev: themeMode) => {
             if (prev === 'light') {
-                setLocalStorageItem('unleash-theme', 'dark');
+                setLocalStorageItem(key, 'dark');
                 return 'dark';
             }
-            setLocalStorageItem('unleash-theme', 'light');
+            setLocalStorageItem(key, 'light');
             return 'light';
         });
     };

src/lib/routes/logout.ts

@@ -1,6 +1,6 @@
 import { Response } from 'express';
 import { promisify } from 'util';
-import { IUnleashConfig } from '../types/option';
+import { IUnleashConfig } from '../types';
 import Controller from './controller';
 import { IAuthRequest } from './unleash-types';
 import { IUnleashServices } from '../types';