feature/admin-redirect (#514)

* add in a redirect in frontend for admin pages to redirect without admin

* use a regex to replace admin

* moved the root route to own component to remove routing warnings w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
jasquat 2023-09-27 10:24:15 -04:00 committed by GitHub
parent 8129c05afd
commit 8a717e3431
5 changed files with 73 additions and 43 deletions

View File

@ -0,0 +1,41 @@
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Tabs, TabList, Tab } from '@carbon/react';
export default function TaskRouteTabs() {
const location = useLocation();
const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
const navigate = useNavigate();
useEffect(() => {
// Do not remove errors here, or they always get removed.
let newSelectedTabIndex = 0;
if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
newSelectedTabIndex = 1;
} else if (location.pathname.match(/^\/tasks\/create-new-instance\b/)) {
newSelectedTabIndex = 2;
}
setSelectedTabIndex(newSelectedTabIndex);
}, [location]);
if (location.pathname.match(/^\/tasks\/\d+\/\b/)) {
return null;
}
return (
<>
<Tabs selectedIndex={selectedTabIndex}>
<TabList aria-label="List of tabs">
{/* <Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab> */}
<Tab onClick={() => navigate('/tasks/grouped')}>In Progress</Tab>
<Tab onClick={() => navigate('/tasks/completed-instances')}>
Completed
</Tab>
<Tab onClick={() => navigate('/tasks/create-new-instance')}>
Start New +
</Tab>
</TabList>
</Tabs>
<br />
</>
);
}

View File

@ -0,0 +1,12 @@
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
export default function AdminRedirect() {
const navigate = useNavigate();
useEffect(() => {
const newPath = window.location.pathname.replace(/^\/admin\//, '/');
navigate(newPath);
}, [navigate]);
return null;
}

View File

@ -11,6 +11,8 @@ import ErrorDisplay from '../components/ErrorDisplay';
import ProcessInstanceShortLink from './ProcessInstanceShortLink';
import About from './About';
import Page404 from './Page404';
import AdminRedirect from './AdminRedirect';
import RootRoute from './RootRoute';
type OwnProps = {
extensionUxElements?: UiSchemaUxElement[] | null;
@ -21,7 +23,7 @@ export default function BaseRoutes({ extensionUxElements }: OwnProps) {
<div className="fixed-width-container">
<ErrorDisplay />
<Routes>
<Route path="/" element={<HomeRoutes />} />
<Route path="/" element={<RootRoute />} />
<Route path="tasks/*" element={<HomeRoutes />} />
<Route path="process-groups/*" element={<ProcessGroupRoutes />} />
<Route path="process-models/*" element={<ProcessModelRoutes />} />
@ -37,6 +39,7 @@ export default function BaseRoutes({ extensionUxElements }: OwnProps) {
<Route path="messages" element={<MessageListPage />} />
<Route path="data-stores" element={<DataStorePage />} />
<Route path="about" element={<About />} />
<Route path="admin/*" element={<AdminRedirect />} />
<Route path="/*" element={<Page404 />} />
</Routes>
</div>

View File

@ -1,56 +1,17 @@
import { useEffect, useState } from 'react';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { Tabs, TabList, Tab } from '@carbon/react';
import { Route, Routes } from 'react-router-dom';
import TaskShow from './TaskShow';
import MyTasks from './MyTasks';
import CompletedInstances from './CompletedInstances';
import CreateNewInstance from './CreateNewInstance';
import InProgressInstances from './InProgressInstances';
import OnboardingView from './OnboardingView';
import TaskRouteTabs from '../components/TaskRouteTabs';
export default function HomeRoutes() {
const location = useLocation();
const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
const navigate = useNavigate();
useEffect(() => {
// Do not remove errors here, or they always get removed.
let newSelectedTabIndex = 0;
if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
newSelectedTabIndex = 1;
} else if (location.pathname.match(/^\/tasks\/create-new-instance\b/)) {
newSelectedTabIndex = 2;
}
setSelectedTabIndex(newSelectedTabIndex);
}, [location]);
const renderTabs = () => {
if (location.pathname.match(/^\/tasks\/\d+\/\b/)) {
return null;
}
return (
<>
<Tabs selectedIndex={selectedTabIndex}>
<TabList aria-label="List of tabs">
{/* <Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab> */}
<Tab onClick={() => navigate('/tasks/grouped')}>In Progress</Tab>
<Tab onClick={() => navigate('/tasks/completed-instances')}>
Completed
</Tab>
<Tab onClick={() => navigate('/tasks/create-new-instance')}>
Start New +
</Tab>
</TabList>
</Tabs>
<br />
</>
);
};
return (
<>
<OnboardingView />
{renderTabs()}
<TaskRouteTabs />
<Routes>
<Route path="/" element={<InProgressInstances />} />
<Route path="my-tasks" element={<MyTasks />} />

View File

@ -0,0 +1,13 @@
import InProgressInstances from './InProgressInstances';
import OnboardingView from './OnboardingView';
import TaskRouteTabs from '../components/TaskRouteTabs';
export default function RootRoute() {
return (
<>
<OnboardingView />
<TaskRouteTabs />
<InProgressInstances />
</>
);
}