Feature/pi short link (#503)

* moved adminroutes to homepage to get rid of /admin from urls * removed admin prefix from urls * moved top level base routes to their own routes file w/ burnettk * added ability to get and use a short link to the process instance show page w/ burnettk * give the person some feedback * move about page to baseroutes so it acts like the other pages * use the normal notificaiton component for the copied link notification * added 404 page and backend is down page w/ burnettk --------- Co-authored-by: jasquat <jasquat@users.noreply.github.com> Co-authored-by: burnettk <burnettk@users.noreply.github.com>
2023-09-20 12:02:02 -04:00 · 2023-09-20 12:02:02 -04:00 · ce74f4e547
parent 1db2e7d973
commit ce74f4e547
51 changed files with 415 additions and 446 deletions
--- a/spiffworkflow-frontend/src/App.tsx
+++ b/spiffworkflow-frontend/src/App.tsx
@ -14,7 +14,6 @@ export default function App() {
  }

  const ability = defineAbility(() => {});
-
  return (
    <div className="cds--white">
      {/* @ts-ignore */}
--- a/spiffworkflow-frontend/src/ContainerForExtensions.tsx
+++ b/spiffworkflow-frontend/src/ContainerForExtensions.tsx
@ -4,10 +4,6 @@ import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import NavigationBar from './components/NavigationBar';

-import HomePageRoutes from './routes/HomePageRoutes';
-import About from './routes/About';
-import AdminRoutes from './routes/AdminRoutes';
-
 import ScrollToTop from './components/ScrollToTop';
 import EditorRoutes from './routes/EditorRoutes';
 import Extension from './routes/Extension';
@ -20,8 +16,11 @@ import {
 } from './extension_ui_schema_interfaces';
 import HttpService from './services/HttpService';
 import { ErrorBoundaryFallback } from './ErrorBoundaryFallack';
+import BaseRoutes from './routes/BaseRoutes';
+import BackendIsDown from './routes/BackendIsDown';

 export default function ContainerForExtensions() {
+  const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null);
  const [extensionUxElements, setExtensionNavigationItems] = useState<
    UiSchemaUxElement[] | null
  >(null);
@ -40,10 +39,6 @@ export default function ContainerForExtensions() {

  // eslint-disable-next-line sonarjs/cognitive-complexity
  useEffect(() => {
-    if (!permissionsLoaded) {
-      return;
-    }
-
    const processExtensionResult = (processModels: ProcessModel[]) => {
      const eni: UiSchemaUxElement[] = processModels
        .map((processModel: ProcessModel) => {
@ -72,13 +67,57 @@ export default function ContainerForExtensions() {
      }
    };

-    if (ability.can('GET', targetUris.extensionListPath)) {
-      HttpService.makeCallToBackend({
-        path: targetUris.extensionListPath,
-        successCallback: processExtensionResult,
-      });
+    const getExtensions = () => {
+      if (!permissionsLoaded) {
+        return;
+      }
+      setBackendIsUp(true);
+      if (ability.can('GET', targetUris.extensionListPath)) {
+        HttpService.makeCallToBackend({
+          path: targetUris.extensionListPath,
+          successCallback: processExtensionResult,
+        });
+      }
+    };
+
+    HttpService.makeCallToBackend({
+      path: targetUris.statusPath,
+      successCallback: getExtensions,
+      failureCallback: () => setBackendIsUp(false),
+    });
+  }, [
+    targetUris.extensionListPath,
+    targetUris.statusPath,
+    permissionsLoaded,
+    ability,
+  ]);
+
+  const routeComponents = () => {
+    return (
+      <Routes>
+        <Route
+          path="/*"
+          element={<BaseRoutes extensionUxElements={extensionUxElements} />}
+        />
+        <Route path="/editor/*" element={<EditorRoutes />} />
+        <Route path="/extensions/:page_identifier" element={<Extension />} />
+      </Routes>
+    );
+  };
+
+  const backendIsDownPage = () => {
+    return <BackendIsDown />;
+  };
+
+  const innerComponents = () => {
+    if (backendIsUp === null) {
+      return null;
    }
-  }, [targetUris.extensionListPath, permissionsLoaded, ability]);
+    if (backendIsUp) {
+      return routeComponents();
+    }
+    return backendIsDownPage();
+  };

  return (
    <>
@ -86,22 +125,7 @@ export default function ContainerForExtensions() {
      <Content className={contentClassName}>
        <ScrollToTop />
        <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
-          <Routes>
-            <Route path="/*" element={<HomePageRoutes />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/tasks/*" element={<HomePageRoutes />} />
-            <Route
-              path="/admin/*"
-              element={
-                <AdminRoutes extensionUxElements={extensionUxElements} />
-              }
-            />
-            <Route path="/editor/*" element={<EditorRoutes />} />
-            <Route
-              path="/extensions/:page_identifier"
-              element={<Extension />}
-            />
-          </Routes>
+          {innerComponents()}
        </ErrorBoundary>
      </Content>
    </>
--- a/spiffworkflow-frontend/src/ErrorBoundaryFallack.tsx
+++ b/spiffworkflow-frontend/src/ErrorBoundaryFallack.tsx
@ -1,24 +1,7 @@
-import { Button, Content } from '@carbon/react';
-import { Routes, Route } from 'react-router-dom';
-import React, { useEffect, useState } from 'react';
-import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';
-import NavigationBar from './components/NavigationBar';
+import { Button } from '@carbon/react';
+import React from 'react';
+import { useErrorBoundary } from 'react-error-boundary';

-import HomePageRoutes from './routes/HomePageRoutes';
-import About from './routes/About';
-import AdminRoutes from './routes/AdminRoutes';
-
-import ScrollToTop from './components/ScrollToTop';
-import EditorRoutes from './routes/EditorRoutes';
-import Extension from './routes/Extension';
-import { useUriListForPermissions } from './hooks/UriListForPermissions';
-import { PermissionsToCheck, ProcessFile, ProcessModel } from './interfaces';
-import { usePermissionFetcher } from './hooks/PermissionService';
-import {
-  ExtensionUiSchema,
-  UiSchemaUxElement,
-} from './extension_ui_schema_interfaces';
-import HttpService from './services/HttpService';
 import { Notification } from './components/Notification';

 type ErrorProps = {
@ -44,90 +27,3 @@ export function ErrorBoundaryFallback({ error }: ErrorProps) {
    </Notification>
  );
 }
-
-export default function ContainerForExtensions() {
-  const [extensionUxElements, setExtensionNavigationItems] = useState<
-    UiSchemaUxElement[] | null
-  >(null);
-
-  let contentClassName = 'main-site-body-centered';
-  if (window.location.pathname.startsWith('/editor/')) {
-    contentClassName = 'no-center-stuff';
-  }
-  const { targetUris } = useUriListForPermissions();
-  const permissionRequestData: PermissionsToCheck = {
-    [targetUris.extensionListPath]: ['GET'],
-  };
-  const { ability, permissionsLoaded } = usePermissionFetcher(
-    permissionRequestData
-  );
-
-  // eslint-disable-next-line sonarjs/cognitive-complexity
-  useEffect(() => {
-    if (!permissionsLoaded) {
-      return;
-    }
-
-    const processExtensionResult = (processModels: ProcessModel[]) => {
-      const eni: UiSchemaUxElement[] = processModels
-        .map((processModel: ProcessModel) => {
-          const extensionUiSchemaFile = processModel.files.find(
-            (file: ProcessFile) => file.name === 'extension_uischema.json'
-          );
-          if (extensionUiSchemaFile && extensionUiSchemaFile.file_contents) {
-            try {
-              const extensionUiSchema: ExtensionUiSchema = JSON.parse(
-                extensionUiSchemaFile.file_contents
-              );
-              if (extensionUiSchema.ux_elements) {
-                return extensionUiSchema.ux_elements;
-              }
-            } catch (jsonParseError: any) {
-              console.error(
-                `Unable to get navigation items for ${processModel.id}`
-              );
-            }
-          }
-          return [] as UiSchemaUxElement[];
-        })
-        .flat();
-      if (eni) {
-        setExtensionNavigationItems(eni);
-      }
-    };
-
-    if (ability.can('GET', targetUris.extensionListPath)) {
-      HttpService.makeCallToBackend({
-        path: targetUris.extensionListPath,
-        successCallback: processExtensionResult,
-      });
-    }
-  }, [targetUris.extensionListPath, permissionsLoaded, ability]);
-
-  return (
-    <>
-      <NavigationBar extensionUxElements={extensionUxElements} />
-      <Content className={contentClassName}>
-        <ScrollToTop />
-        <ErrorBoundary fallback={<h1>Something went wrong.</h1>}>
-          <Routes>
-            <Route path="/*" element={<HomePageRoutes />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/tasks/*" element={<HomePageRoutes />} />
-            <Route
-              path="/admin/*"
-              element={
-                <AdminRoutes extensionUxElements={extensionUxElements} />
-              }
-            />
-            <Route path="/editor/*" element={<EditorRoutes />} />
-            <Route
-              path="/extensions/:page_identifier"
-              element={<Extension />}
-            />
-          </Routes>
-        </ErrorBoundary>
-      </Content>
-    </>
-  );
-}
--- a/spiffworkflow-frontend/src/components/MessageInstanceList.tsx
+++ b/spiffworkflow-frontend/src/components/MessageInstanceList.tsx
@ -100,7 +100,7 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) {
        instanceLink = (
          <Link
            data-qa="process-instance-show-link"
-            to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
+            to={`/process-instances/${modifyProcessIdentifierForPathParam(
              row.process_model_identifier
            )}/${row.process_instance_id}`}
          >
@ -167,7 +167,7 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) {
            },
            [
              `Process Instance: ${searchParams.get('process_instance_id')}`,
-              `/admin/process-instances/${searchParams.get(
+              `/process-instances/${searchParams.get(
                'process_model_id'
              )}/${searchParams.get('process_instance_id')}`,
            ],
--- a/spiffworkflow-frontend/src/components/MiniComponents.tsx
+++ b/spiffworkflow-frontend/src/components/MiniComponents.tsx
@ -11,7 +11,7 @@ export function FormatProcessModelDisplayName(
  } = instanceObject;
  return (
    <Link
-      to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+      to={`/process-models/${modifyProcessIdentifierForPathParam(
        processModelIdentifier
      )}`}
      title={processModelIdentifier}
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx
@ -76,19 +76,17 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
  const versionInfo = appVersionInfo();

  useEffect(() => {
-    let newActiveKey = '/admin/process-groups';
-    if (location.pathname.match(/^\/admin\/messages\b/)) {
-      newActiveKey = '/admin/messages';
-    } else if (
-      location.pathname.match(/^\/admin\/process-instances\/reports\b/)
-    ) {
-      newActiveKey = '/admin/process-instances/reports';
-    } else if (location.pathname.match(/^\/admin\/process-instances\b/)) {
-      newActiveKey = '/admin/process-instances';
-    } else if (location.pathname.match(/^\/admin\/configuration\b/)) {
-      newActiveKey = '/admin/configuration';
-    } else if (location.pathname.match(/^\/admin\/data-stores\b/)) {
-      newActiveKey = '/admin/data-stores';
+    let newActiveKey = '/process-groups';
+    if (location.pathname.match(/^\/messages\b/)) {
+      newActiveKey = '/messages';
+    } else if (location.pathname.match(/^\/process-instances\/reports\b/)) {
+      newActiveKey = '/process-instances/reports';
+    } else if (location.pathname.match(/^\/process-instances\b/)) {
+      newActiveKey = '/process-instances';
+    } else if (location.pathname.match(/^\/configuration\b/)) {
+      newActiveKey = '/configuration';
+    } else if (location.pathname.match(/^\/data-stores\b/)) {
+      newActiveKey = '/data-stores';
    } else if (location.pathname === '/') {
      newActiveKey = '/';
    } else if (location.pathname.match(/^\/tasks\b/)) {
@ -205,8 +203,8 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
                if (secretAllowed || authenticationAllowed) {
                  return (
                    <HeaderMenuItem
-                      href="/admin/configuration"
-                      isCurrentPage={isActivePage('/admin/configuration')}
+                      href="/configuration"
+                      isCurrentPage={isActivePage('/configuration')}
                    >
                      Configuration
                    </HeaderMenuItem>
@ -249,8 +247,8 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
        </HeaderMenuItem>
        <Can I="GET" a={targetUris.processGroupListPath} ability={ability}>
          <HeaderMenuItem
-            href="/admin/process-groups"
-            isCurrentPage={isActivePage('/admin/process-groups')}
+            href="/process-groups"
+            isCurrentPage={isActivePage('/process-groups')}
            data-qa="header-nav-processes"
          >
            Processes
@ -262,24 +260,24 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
          ability={ability}
        >
          <HeaderMenuItem
-            href="/admin/process-instances"
-            isCurrentPage={isActivePage('/admin/process-instances')}
+            href="/process-instances"
+            isCurrentPage={isActivePage('/process-instances')}
          >
            Process Instances
          </HeaderMenuItem>
        </Can>
        <Can I="GET" a={targetUris.messageInstanceListPath} ability={ability}>
          <HeaderMenuItem
-            href="/admin/messages"
-            isCurrentPage={isActivePage('/admin/messages')}
+            href="/messages"
+            isCurrentPage={isActivePage('/messages')}
          >
            Messages
          </HeaderMenuItem>
        </Can>
        <Can I="GET" a={targetUris.dataStoreListPath} ability={ability}>
          <HeaderMenuItem
-            href="/admin/data-stores"
-            isCurrentPage={isActivePage('/admin/data-stores')}
+            href="/data-stores"
+            isCurrentPage={isActivePage('/data-stores')}
          >
            Data Stores
          </HeaderMenuItem>
--- a/spiffworkflow-frontend/src/components/Notification.tsx
+++ b/spiffworkflow-frontend/src/components/Notification.tsx
@ -15,6 +15,8 @@ type OwnProps = {
  type?: string;
  hideCloseButton?: boolean;
  allowTogglingFullMessage?: boolean;
+  timeout?: number;
+  withBottomMargin?: boolean;
 };

 export function Notification({
@ -24,6 +26,8 @@ export function Notification({
  type = 'success',
  hideCloseButton = false,
  allowTogglingFullMessage = false,
+  timeout,
+  withBottomMargin = true,
 }: OwnProps) {
  const [showMessage, setShowMessage] = useState<boolean>(
    !allowTogglingFullMessage
@ -33,11 +37,19 @@ export function Notification({
    iconComponent = <Error className="notification-icon" />;
  }

+  if (timeout && onClose) {
+    setTimeout(() => {
+      onClose();
+    }, timeout);
+  }
+
+  let classes = `cds--inline-notification cds--inline-notification--low-contrast cds--inline-notification--${type}`;
+  if (withBottomMargin) {
+    classes = `${classes} with-bottom-margin`;
+  }
+
  return (
-    <div
-      role="status"
-      className={`with-bottom-margin cds--inline-notification cds--inline-notification--low-contrast cds--inline-notification--${type}`}
-    >
+    <div role="status" className={classes}>
      <div className="cds--inline-notification__details">
        <div className="cds--inline-notification__text-wrapper">
          {iconComponent}
--- a/spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx
@ -58,7 +58,7 @@ export default function ProcessBreadcrumb({ hotCrumbs }: OwnProps) {
        ) {
          const breadcrumbs = processEntity.parent_groups.map(
            (parentGroup: ProcessGroupLite) => {
-              const fullUrl = `/admin/process-groups/${modifyProcessIdentifierForPathParam(
+              const fullUrl = `/process-groups/${modifyProcessIdentifierForPathParam(
                parentGroup.id
              )}`;
              return (
@ -70,10 +70,10 @@ export default function ProcessBreadcrumb({ hotCrumbs }: OwnProps) {
          );

          if (crumb.linkLastItem) {
-            let apiBase = '/admin/process-groups';
+            let apiBase = '/process-groups';
            let dataQaTag = '';
            if (crumb.entityType.startsWith('process-model')) {
-              apiBase = '/admin/process-models';
+              apiBase = '/process-models';
              dataQaTag = 'process-model-breadcrumb-link';
            }
            const fullUrl = `${apiBase}/${modifyProcessIdentifierForPathParam(
--- a/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessGroupForm.tsx
@ -27,7 +27,7 @@ export default function ProcessGroupForm({
  const navigateToProcessGroup = (_result: any) => {
    if (newProcessGroupId) {
      navigate(
-        `/admin/process-groups/${modifyProcessIdentifierForPathParam(
+        `/process-groups/${modifyProcessIdentifierForPathParam(
          newProcessGroupId
        )}`
      );
--- a/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
@ -56,7 +56,7 @@ export default function ProcessGroupListTiles({
          <ClickableTile
            id={`process-group-tile-${row.id}`}
            className="tile-process-group"
-            href={`/admin/process-groups/${modifyProcessIdentifierForPathParam(
+            href={`/process-groups/${modifyProcessIdentifierForPathParam(
              row.id
            )}`}
          >
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@ -123,6 +123,7 @@ export default function ProcessInstanceListTable({
  headerElement,
  tableHtmlId,
 }: OwnProps) {
+  // eslint-disable-next-line sonarjs/no-duplicate-string
  let processInstanceApiSearchPath = '/process-instances/for-me';
  if (variant === 'all') {
    processInstanceApiSearchPath = '/process-instances';
@ -177,13 +178,9 @@ export default function ProcessInstanceListTable({
  };

  const processInstanceListPathPrefix =
-    variant === 'all'
-      ? '/admin/process-instances/all'
-      : '/admin/process-instances/for-me';
+    variant === 'all' ? '/process-instances/all' : '/process-instances/for-me';
  const processInstanceShowPathPrefix =
-    variant === 'all'
-      ? '/admin/process-instances'
-      : '/admin/process-instances/for-me';
+    variant === 'all' ? '/process-instances' : '/process-instances/for-me';

  const [processStatusAllOptions, setProcessStatusAllOptions] = useState<any[]>(
    []
@ -1834,7 +1831,7 @@ export default function ProcessInstanceListTable({
            hasIconOnly
            size="md"
            onClick={() =>
-              navigate(`/admin/process-instances?report_hash=${reportHash}`)
+              navigate(`/process-instances?report_hash=${reportHash}`)
            }
          />
        </Column>
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTabs.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTabs.tsx
@ -32,7 +32,7 @@ export default function ProcessInstanceListTabs({ variant }: OwnProps) {
          title="Only show process instances for the current user."
          data-qa="process-instance-list-for-me"
          onClick={() => {
-            navigate('/admin/process-instances/for-me');
+            navigate('/process-instances/for-me');
          }}
        >
          For Me
@ -42,7 +42,7 @@ export default function ProcessInstanceListTabs({ variant }: OwnProps) {
            title="Show all process instances for all users."
            data-qa="process-instance-list-all"
            onClick={() => {
-              navigate('/admin/process-instances/all');
+              navigate('/process-instances/all');
            }}
          >
            All
@ -52,7 +52,7 @@ export default function ProcessInstanceListTabs({ variant }: OwnProps) {
          title="Search for a process instance by id."
          data-qa="process-instance-list-find-by-id"
          onClick={() => {
-            navigate('/admin/process-instances/find-by-id');
+            navigate('/process-instances/find-by-id');
          }}
        >
          Find By Id
--- a/spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx
@ -78,9 +78,9 @@ export default function ProcessInstanceLogList({
    shouldDisplayClearButton = true;
  }

-  let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${processModelId}`;
+  let processInstanceShowPageBaseUrl = `/process-instances/for-me/${processModelId}`;
  if (variant === 'all') {
-    processInstanceShowPageBaseUrl = `/admin/process-instances/${processModelId}`;
+    processInstanceShowPageBaseUrl = `/process-instances/${processModelId}`;
  }
  const taskNameHeader = isEventsView ? 'Task name' : 'Milestone';
  const tableType = isEventsView ? 'events' : 'milestones';
--- a/spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx
@ -98,7 +98,7 @@ export default function ProcessInstanceRun({
  const onProcessInstanceRun = (processInstance: any) => {
    const processInstanceId = (processInstance as any).id;
    navigate(
-      `/admin/process-instances/for-me/${modifyProcessIdentifierForPathParam(
+      `/process-instances/for-me/${modifyProcessIdentifierForPathParam(
        processModel.id
      )}/${processInstanceId}/interstitial`
    );
--- a/spiffworkflow-frontend/src/components/ProcessModelForm.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelForm.tsx
@ -42,7 +42,7 @@ export default function ProcessModelForm({
    if ('id' in result) {
      const modifiedProcessModelPathFromResult =
        modifyProcessIdentifierForPathParam(result.id);
-      navigate(`/admin/process-models/${modifiedProcessModelPathFromResult}`);
+      navigate(`/process-models/${modifiedProcessModelPathFromResult}`);
    }
  };

--- a/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
@ -56,7 +56,7 @@ export default function ProcessModelListTiles({
          onClose={() => setProcessInstance(null)}
        >
          <Link
-            to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
+            to={`/process-instances/${modifyProcessIdentifierForPathParam(
              processInstance.process_model_identifier
            )}/${processInstance.id}`}
            data-qa="process-instance-show-link"
@ -83,7 +83,7 @@ export default function ProcessModelListTiles({
                <a
                  title={row.id}
                  data-qa="process-model-show-link"
-                  href={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+                  href={`/process-models/${modifyProcessIdentifierForPathParam(
                    row.id
                  )}`}
                >
--- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
+++ b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
@ -632,7 +632,7 @@ export default function ReactDiagramEditor({
            <li>
              <Link
                size="lg"
-                href={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+                href={`/process-models/${modifyProcessIdentifierForPathParam(
                  ref.process_model_id
                )}`}
              >
@ -704,7 +704,7 @@ export default function ReactDiagramEditor({
              <Button
                onClick={() => {
                  navigate(
-                    `/admin/process-models/${processModelId}/form/${fileName}`
+                    `/process-models/${processModelId}/form/${fileName}`
                  );
                }}
              >
--- a/spiffworkflow-frontend/src/components/RenderOnRole.tsx
+++ b/spiffworkflow-frontend/src/components/RenderOnRole.tsx
@ -1,13 +0,0 @@
-import React from 'react';
-import UserService from '../services/UserService';
-
-type Props = {
-  roles: string[];
-  children: React.ReactNode;
-};
-
-function RenderOnRole({ roles, children }: Props) {
-  return UserService.hasRole(roles) ? children : null;
-}
-
-export default RenderOnRole;
--- a/spiffworkflow-frontend/src/components/TaskListTable.tsx
+++ b/spiffworkflow-frontend/src/components/TaskListTable.tsx
@ -214,7 +214,7 @@ export default function TaskListTable({
      <td>
        <Link
          data-qa="process-instance-show-link-id"
-          to={`/admin/process-instances/for-me/${modifiedProcessModelIdentifier}/${processInstanceTask.process_instance_id}`}
+          to={`/process-instances/for-me/${modifiedProcessModelIdentifier}/${processInstanceTask.process_instance_id}`}
          title={`View process instance ${processInstanceTask.process_instance_id}`}
        >
          {processInstanceTask.process_instance_id}
@ -239,7 +239,7 @@ export default function TaskListTable({
        <td>
          <Link
            data-qa="process-model-show-link"
-            to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
+            to={`/process-models/${modifiedProcessModelIdentifier}`}
            title={processInstanceTask.process_model_identifier}
          >
            {processInstanceTask.process_model_display_name}
--- a/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx
+++ b/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx
@ -6,6 +6,7 @@ export const useUriListForPermissions = () => {
  const targetUris = useMemo(() => {
    return {
      authenticationListPath: `/v1.0/authentications`,
+      statusPath: `/v1.0/status`,
      messageInstanceListPath: '/v1.0/messages',
      dataStoreListPath: '/v1.0/data-stores',
      extensionListPath: '/v1.0/extensions',
--- a/spiffworkflow-frontend/src/routes/About.tsx
+++ b/spiffworkflow-frontend/src/routes/About.tsx
@ -1,7 +1,6 @@
 // @ts-ignore
 import { Table } from '@carbon/react';
 import { useEffect, useState } from 'react';
-import ErrorDisplay from '../components/ErrorDisplay';
 import appVersionInfo from '../helpers/appVersionInfo';
 import { ObjectWithStringKeysAndValues } from '../interfaces';
 import HttpService from '../services/HttpService';
@ -58,7 +57,6 @@ export default function About() {

  return (
    <div>
-      <ErrorDisplay />
      <h1>About</h1>
      {versionInfoFromDict('Frontend version information', frontendVersionInfo)}
      {versionInfoFromDict('Backend version information', backendVersionInfo)}
--- a/spiffworkflow-frontend/src/routes/AdminRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/AdminRoutes.tsx
@ -1,151 +0,0 @@
-import { Routes, Route, useLocation } from 'react-router-dom';
-
-import React, { useEffect } from 'react';
-import ProcessGroupList from './ProcessGroupList';
-import ProcessGroupShow from './ProcessGroupShow';
-import ProcessGroupNew from './ProcessGroupNew';
-import ProcessGroupEdit from './ProcessGroupEdit';
-import ProcessModelShow from './ProcessModelShow';
-import ProcessInstanceList from './ProcessInstanceList';
-import ProcessModelNew from './ProcessModelNew';
-import ProcessModelEdit from './ProcessModelEdit';
-import ProcessInstanceShow from './ProcessInstanceShow';
-import UserService from '../services/UserService';
-import ProcessInstanceReportList from './ProcessInstanceReportList';
-import ProcessInstanceReportNew from './ProcessInstanceReportNew';
-import ProcessInstanceReportEdit from './ProcessInstanceReportEdit';
-import ReactFormEditor from './ReactFormEditor';
-import Configuration from './Configuration';
-import JsonSchemaFormBuilder from './JsonSchemaFormBuilder';
-import ProcessModelNewExperimental from './ProcessModelNewExperimental';
-import ProcessInstanceFindById from './ProcessInstanceFindById';
-import ProcessInterstitialPage from './ProcessInterstitialPage';
-import MessageListPage from './MessageListPage';
-import DataStorePage from './DataStorePage';
-import ErrorDisplay from '../components/ErrorDisplay';
-import { UiSchemaUxElement } from '../extension_ui_schema_interfaces';
-
-type OwnProps = {
-  extensionUxElements?: UiSchemaUxElement[] | null;
-};
-
-export default function AdminRoutes({ extensionUxElements }: OwnProps) {
-  const location = useLocation();
-
-  useEffect(() => {}, [location]);
-
-  if (UserService.hasRole(['admin'])) {
-    return (
-      <div className="fixed-width-container">
-        <ErrorDisplay />
-        <Routes>
-          <Route path="/" element={<ProcessGroupList />} />
-          <Route path="process-groups" element={<ProcessGroupList />} />
-          <Route
-            path="process-groups/:process_group_id"
-            element={<ProcessGroupShow />}
-          />
-          <Route path="process-groups/new" element={<ProcessGroupNew />} />
-          <Route
-            path="process-groups/:process_group_id/edit"
-            element={<ProcessGroupEdit />}
-          />
-
-          <Route
-            path="process-models/:process_group_id/new"
-            element={<ProcessModelNew />}
-          />
-          <Route
-            path="process-models/:process_group_id/new-e"
-            element={<ProcessModelNewExperimental />}
-          />
-          <Route
-            path="process-models/:process_model_id"
-            element={<ProcessModelShow />}
-          />
-          <Route
-            path="process-models/:process_model_id/edit"
-            element={<ProcessModelEdit />}
-          />
-          <Route
-            path="process-instances/for-me/:process_model_id/:process_instance_id"
-            element={<ProcessInstanceShow variant="for-me" />}
-          />
-          <Route
-            path="process-instances/for-me/:process_model_id/:process_instance_id/:to_task_guid"
-            element={<ProcessInstanceShow variant="for-me" />}
-          />
-          <Route
-            path="process-instances/for-me/:process_model_id/:process_instance_id/interstitial"
-            element={<ProcessInterstitialPage variant="for-me" />}
-          />
-          <Route
-            path="process-instances/:process_model_id/:process_instance_id/interstitial"
-            element={<ProcessInterstitialPage variant="all" />}
-          />
-          <Route
-            path="process-instances/:process_model_id/:process_instance_id"
-            element={<ProcessInstanceShow variant="all" />}
-          />
-          <Route
-            path="process-instances/:process_model_id/:process_instance_id/:to_task_guid"
-            element={<ProcessInstanceShow variant="all" />}
-          />
-          <Route
-            path="process-instances/reports"
-            element={<ProcessInstanceReportList />}
-          />
-          <Route
-            path="process-instances/reports/new"
-            element={<ProcessInstanceReportNew />}
-          />
-          <Route
-            path="process-instances/reports/:report_identifier/edit"
-            element={<ProcessInstanceReportEdit />}
-          />
-          <Route
-            path="process-models/:process_model_id/form"
-            element={<ReactFormEditor />}
-          />
-          <Route
-            path="process-models/:process_model_id/form/:file_name"
-            element={<ReactFormEditor />}
-          />
-          <Route
-            path="process-instances"
-            element={<ProcessInstanceList variant="for-me" />}
-          />
-          <Route
-            path="process-instances/for-me"
-            element={<ProcessInstanceList variant="for-me" />}
-          />
-          <Route
-            path="process-instances/all"
-            element={<ProcessInstanceList variant="all" />}
-          />
-          <Route
-            path="configuration/*"
-            element={
-              <Configuration extensionUxElements={extensionUxElements} />
-            }
-          />
-          <Route
-            path="process-models/:process_model_id/form-builder"
-            element={<JsonSchemaFormBuilder />}
-          />
-          <Route
-            path="process-instances/find-by-id"
-            element={<ProcessInstanceFindById />}
-          />
-          <Route path="messages" element={<MessageListPage />} />
-          <Route path="data-stores" element={<DataStorePage />} />
-        </Routes>
-      </div>
-    );
-  }
-  return (
-    <main>
-      <h1>404</h1>
-    </main>
-  );
-}
--- a/spiffworkflow-frontend/src/routes/BackendIsDown.tsx
+++ b/spiffworkflow-frontend/src/routes/BackendIsDown.tsx
@ -0,0 +1,12 @@
+export default function BackendIsDown() {
+  return (
+    <div>
+      <h1>Server error</h1>
+      <p>
+        We are sorry, but our service is temporarily unavailable due to
+        technical difficulties. Please bear with us while we work to resolve the
+        issue. If the problem persists, please contact the site administrator.
+      </p>
+    </div>
+  );
+}
--- a/spiffworkflow-frontend/src/routes/BaseRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/BaseRoutes.tsx
@ -0,0 +1,44 @@
+import { Route, Routes } from 'react-router-dom';
+import Configuration from './Configuration';
+import MessageListPage from './MessageListPage';
+import DataStorePage from './DataStorePage';
+import { UiSchemaUxElement } from '../extension_ui_schema_interfaces';
+import HomeRoutes from './HomeRoutes';
+import ProcessGroupRoutes from './ProcessGroupRoutes';
+import ProcessModelRoutes from './ProcessModelRoutes';
+import ProcessInstanceRoutes from './ProcessInstanceRoutes';
+import ErrorDisplay from '../components/ErrorDisplay';
+import ProcessInstanceShortLink from './ProcessInstanceShortLink';
+import About from './About';
+import Page404 from './Page404';
+
+type OwnProps = {
+  extensionUxElements?: UiSchemaUxElement[] | null;
+};
+
+export default function BaseRoutes({ extensionUxElements }: OwnProps) {
+  return (
+    <div className="fixed-width-container">
+      <ErrorDisplay />
+      <Routes>
+        <Route path="/" element={<HomeRoutes />} />
+        <Route path="tasks/*" element={<HomeRoutes />} />
+        <Route path="process-groups/*" element={<ProcessGroupRoutes />} />
+        <Route path="process-models/*" element={<ProcessModelRoutes />} />
+        <Route path="process-instances/*" element={<ProcessInstanceRoutes />} />
+        <Route
+          path="i/:process_instance_id"
+          element={<ProcessInstanceShortLink />}
+        />
+        <Route
+          path="configuration/*"
+          element={<Configuration extensionUxElements={extensionUxElements} />}
+        />
+        <Route path="messages" element={<MessageListPage />} />
+        <Route path="data-stores" element={<DataStorePage />} />
+        <Route path="about" element={<About />} />
+        <Route path="/*" element={<Page404 />} />
+      </Routes>
+    </div>
+  );
+}
--- a/spiffworkflow-frontend/src/routes/Configuration.tsx
+++ b/spiffworkflow-frontend/src/routes/Configuration.tsx
@ -39,7 +39,7 @@ export default function Configuration({ extensionUxElements }: OwnProps) {
    removeError();
    setPageTitle(['Configuration']);
    let newSelectedTabIndex = 0;
-    if (location.pathname.match(/^\/admin\/configuration\/authentications\b/)) {
+    if (location.pathname.match(/^\/configuration\/authentications\b/)) {
      newSelectedTabIndex = 1;
    }
    setSelectedTabIndex(newSelectedTabIndex);
@ -49,7 +49,7 @@ export default function Configuration({ extensionUxElements }: OwnProps) {
    uxElement: UiSchemaUxElement,
    uxElementIndex: number
  ) => {
-    const navItemPage = `/admin/configuration/extension${uxElement.page}`;
+    const navItemPage = `/configuration/extension${uxElement.page}`;

    let pagesToCheck = [uxElement.page];
    if (
@ -60,7 +60,7 @@ export default function Configuration({ extensionUxElements }: OwnProps) {
    }

    pagesToCheck.forEach((pageToCheck: string) => {
-      const pageToCheckNavItem = `/admin/configuration/extension${pageToCheck}`;
+      const pageToCheckNavItem = `/configuration/extension${pageToCheck}`;
      if (pageToCheckNavItem === location.pathname) {
        setSelectedTabIndex(uxElementIndex + 2);
      }
@ -80,14 +80,12 @@ export default function Configuration({ extensionUxElements }: OwnProps) {
      <Tabs selectedIndex={selectedTabIndex}>
        <TabList aria-label="List of tabs">
          <Can I="GET" a={targetUris.secretListPath} ability={ability}>
-            <Tab onClick={() => navigate('/admin/configuration/secrets')}>
+            <Tab onClick={() => navigate('/configuration/secrets')}>
              Secrets
            </Tab>
          </Can>
          <Can I="GET" a={targetUris.authenticationListPath} ability={ability}>
-            <Tab
-              onClick={() => navigate('/admin/configuration/authentications')}
-            >
+            <Tab onClick={() => navigate('/configuration/authentications')}>
              Authentications
            </Tab>
          </Can>
--- a/spiffworkflow-frontend/src/routes/EditorRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/EditorRoutes.tsx
@ -2,7 +2,6 @@ import { Routes, Route, useLocation } from 'react-router-dom';

 import React, { useEffect } from 'react';
 import ProcessModelEditDiagram from './ProcessModelEditDiagram';
-import UserService from '../services/UserService';
 import ErrorDisplay from '../components/ErrorDisplay';

 export default function EditorRoutes() {
@ -10,26 +9,19 @@ export default function EditorRoutes() {

  useEffect(() => {}, [location]);

-  if (UserService.hasRole(['admin'])) {
-    return (
-      <div className="full-width-container no-center-stuff">
-        <ErrorDisplay />
-        <Routes>
-          <Route
-            path="process-models/:process_model_id/files"
-            element={<ProcessModelEditDiagram />}
-          />
-          <Route
-            path="process-models/:process_model_id/files/:file_name"
-            element={<ProcessModelEditDiagram />}
-          />
-        </Routes>
-      </div>
-    );
-  }
  return (
-    <main>
-      <h1>404</h1>
-    </main>
+    <div className="full-width-container no-center-stuff">
+      <ErrorDisplay />
+      <Routes>
+        <Route
+          path="process-models/:process_model_id/files"
+          element={<ProcessModelEditDiagram />}
+        />
+        <Route
+          path="process-models/:process_model_id/files/:file_name"
+          element={<ProcessModelEditDiagram />}
+        />
+      </Routes>
+    </div>
  );
 }
--- a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
@ -7,9 +7,8 @@ import CompletedInstances from './CompletedInstances';
 import CreateNewInstance from './CreateNewInstance';
 import InProgressInstances from './InProgressInstances';
 import OnboardingView from './OnboardingView';
-import ErrorDisplay from '../components/ErrorDisplay';

-export default function HomePageRoutes() {
+export default function HomeRoutes() {
  const location = useLocation();
  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
  const navigate = useNavigate();
@ -49,8 +48,7 @@ export default function HomePageRoutes() {
  };

  return (
-    <div className="fixed-width-container">
-      <ErrorDisplay />
+    <>
      <OnboardingView />
      {renderTabs()}
      <Routes>
@ -61,6 +59,6 @@ export default function HomePageRoutes() {
        <Route path="completed-instances" element={<CompletedInstances />} />
        <Route path="create-new-instance" element={<CreateNewInstance />} />
      </Routes>
-    </div>
+    </>
  );
 }
--- a/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
+++ b/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
@ -296,7 +296,7 @@ export default function JsonSchemaFormBuilder() {
    const httpMethod = 'DELETE';

    const navigateToProcessModelShow = (_httpResult: any) => {
-      navigate(`/admin/process-models/${modifiedProcessModelId}`);
+      navigate(`/process-models/${modifiedProcessModelId}`);
    };

    HttpService.makeCallToBackend({
@ -339,7 +339,7 @@ export default function JsonSchemaFormBuilder() {
        <Button
          onClick={() =>
            navigate(
-              `/admin/process-models/${
+              `/process-models/${
                params.process_model_id
              }/form/${searchParams.get('file_name')}`
            )
--- a/spiffworkflow-frontend/src/routes/MyTasks.tsx
+++ b/spiffworkflow-frontend/src/routes/MyTasks.tsx
@ -61,7 +61,7 @@ export default function MyTasks() {
          onClose={() => setProcessInstance(null)}
        >
          <Link
-            to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
+            to={`/process-instances/${modifyProcessIdentifierForPathParam(
              processInstance.process_model_identifier
            )}/${processInstance.id}`}
            data-qa="process-instance-show-link"
@ -91,7 +91,7 @@ export default function MyTasks() {
          <td>
            <Link
              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
+              to={`/process-models/${modifiedProcessModelIdentifier}`}
            >
              {rowToUse.process_model_display_name}
            </Link>
@ -99,7 +99,7 @@ export default function MyTasks() {
          <td>
            <Link
              data-qa="process-instance-show-link"
-              to={`/admin/process-instances/${modifiedProcessModelIdentifier}/${rowToUse.process_instance_id}`}
+              to={`/process-instances/${modifiedProcessModelIdentifier}/${rowToUse.process_instance_id}`}
            >
              {rowToUse.process_instance_id}
            </Link>
@ -158,7 +158,7 @@ export default function MyTasks() {
          <td>
            <Link
              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifiedProcessModelId}`}
+              to={`/process-models/${modifiedProcessModelId}`}
            >
              {row.processModelDisplayName}
            </Link>
--- a/spiffworkflow-frontend/src/routes/Page404.tsx
+++ b/spiffworkflow-frontend/src/routes/Page404.tsx
@ -0,0 +1,8 @@
+export default function Page404() {
+  return (
+    <div>
+      <h1>404 not found</h1>
+      <p>This page does not exist. Please check the url.</p>
+    </div>
+  );
+}
--- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx
@ -49,7 +49,7 @@ export default function ProcessGroupList() {
    const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => {
      const processModel = selection.selectedItem;
      navigate(
-        `/admin/process-models/${modifyProcessIdentifierForPathParam(
+        `/process-models/${modifyProcessIdentifierForPathParam(
          processModel.id
        )}`
      );
@ -68,7 +68,7 @@ export default function ProcessGroupList() {
      <>
        <ProcessBreadcrumb hotCrumbs={[['Process Groups']]} />
        <Can I="POST" a={targetUris.processGroupListPath} ability={ability}>
-          <Button kind="secondary" href="/admin/process-groups/new">
+          <Button kind="secondary" href="/process-groups/new">
            Add a process group
          </Button>
          <br />
--- a/spiffworkflow-frontend/src/routes/ProcessGroupRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupRoutes.tsx
@ -0,0 +1,16 @@
+import { Route, Routes } from 'react-router-dom';
+import ProcessGroupList from './ProcessGroupList';
+import ProcessGroupShow from './ProcessGroupShow';
+import ProcessGroupNew from './ProcessGroupNew';
+import ProcessGroupEdit from './ProcessGroupEdit';
+
+export default function ProcessGroupRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<ProcessGroupList />} />
+      <Route path="/:process_group_id" element={<ProcessGroupShow />} />
+      <Route path="new" element={<ProcessGroupNew />} />
+      <Route path=":process_group_id/edit" element={<ProcessGroupEdit />} />
+    </Routes>
+  );
+}
--- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx
@ -86,7 +86,7 @@ export default function ProcessGroupShow() {
  //       <tr key={row.id}>
  //         <td>
  //           <Link
-  //             to={`/admin/process-models/${modifiedProcessModelId}`}
+  //             to={`/process-models/${modifiedProcessModelId}`}
  //             data-qa="process-model-show-link"
  //           >
  //             {row.id}
@ -113,7 +113,7 @@ export default function ProcessGroupShow() {
  // };

  const navigateToProcessGroups = (_result: any) => {
-    navigate(`/admin/process-groups`);
+    navigate(`/process-groups`);
  };

  const deleteProcessGroup = () => {
@ -155,7 +155,7 @@ export default function ProcessGroupShow() {
              renderIcon={Edit}
              iconDescription="Edit Process Group"
              hasIconOnly
-              href={`/admin/process-groups/${modifiedProcessGroupId}/edit`}
+              href={`/process-groups/${modifiedProcessGroupId}/edit`}
            >
              Edit process group
            </Button>
@ -178,7 +178,7 @@ export default function ProcessGroupShow() {
          <Stack orientation="horizontal" gap={3}>
            <Can I="POST" a={targetUris.processGroupListPath} ability={ability}>
              <Button
-                href={`/admin/process-groups/new?parentGroupId=${processGroup.id}`}
+                href={`/process-groups/new?parentGroupId=${processGroup.id}`}
              >
                Add a process group
              </Button>
@ -188,9 +188,7 @@ export default function ProcessGroupShow() {
              a={targetUris.processModelCreatePath}
              ability={ability}
            >
-              <Button
-                href={`/admin/process-models/${modifiedProcessGroupId}/new`}
-              >
+              <Button href={`/process-models/${modifiedProcessGroupId}/new`}>
                Add a process model
              </Button>
            </Can>
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceFindById.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceFindById.tsx
@ -16,7 +16,7 @@ export default function ProcessInstanceFindById() {

  const handleProcessInstanceNavigation = (result: any) => {
    const processInstance: ProcessInstance = result.process_instance;
-    let path = '/admin/process-instances/';
+    let path = '/process-instances/';
    if (result.uri_type === 'for-me') {
      path += 'for-me/';
    }
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx
@ -23,11 +23,11 @@ export default function ProcessInstanceReportEdit() {
  const [filterBy, setFilterBy] = useState('');

  const navigateToProcessInstanceReport = (_result: any) => {
-    navigate(`/admin/process-instances/reports/${params.report_identifier}`);
+    navigate(`/process-instances/reports/${params.report_identifier}`);
  };

  const navigateToProcessInstanceReports = (_result: any) => {
-    navigate(`/admin/process-instances/reports`);
+    navigate(`/process-instances/reports`);
  };

  useEffect(() => {
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx
@ -31,7 +31,7 @@ export default function ProcessInstanceReportList() {
      return (
        <tr key={(row as any).id}>
          <td>
-            <Link to={`/admin/process-instances?report_id=${rowToUse.id}`}>
+            <Link to={`/process-instances?report_id=${rowToUse.id}`}>
              {rowToUse.identifier}
            </Link>
          </td>
@ -54,7 +54,7 @@ export default function ProcessInstanceReportList() {
    <>
      <h1>Process Instance Perspectives</h1>
      <Can I="POST" a={targetUris.processInstanceListPath} ability={ability}>
-        <Button href="/admin/process-instances/reports/new">
+        <Button href="/process-instances/reports/new">
          Add a process instance perspective
        </Button>
      </Can>
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportNew.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceReportNew.tsx
@ -12,7 +12,7 @@ export default function ProcessInstanceReportNew() {
  const [filterBy, setFilterBy] = useState('');

  const navigateToNewProcessInstance = (_result: any) => {
-    navigate(`/admin/process-instances/reports/${identifier}`);
+    navigate(`/process-instances/reports/${identifier}`);
  };

  const addProcessInstanceReport = (event: any) => {
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceRoutes.tsx
@ -0,0 +1,49 @@
+import { Route, Routes } from 'react-router-dom';
+import ProcessInstanceList from './ProcessInstanceList';
+import ProcessInstanceShow from './ProcessInstanceShow';
+import ProcessInstanceReportList from './ProcessInstanceReportList';
+import ProcessInstanceReportNew from './ProcessInstanceReportNew';
+import ProcessInstanceReportEdit from './ProcessInstanceReportEdit';
+import ProcessInstanceFindById from './ProcessInstanceFindById';
+import ProcessInterstitialPage from './ProcessInterstitialPage';
+
+export default function ProcessInstanceRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<ProcessInstanceList variant="for-me" />} />
+      <Route path="for-me" element={<ProcessInstanceList variant="for-me" />} />
+      <Route path="all" element={<ProcessInstanceList variant="all" />} />
+      <Route
+        path="for-me/:process_model_id/:process_instance_id"
+        element={<ProcessInstanceShow variant="for-me" />}
+      />
+      <Route
+        path="for-me/:process_model_id/:process_instance_id/:to_task_guid"
+        element={<ProcessInstanceShow variant="for-me" />}
+      />
+      <Route
+        path="for-me/:process_model_id/:process_instance_id/interstitial"
+        element={<ProcessInterstitialPage variant="for-me" />}
+      />
+      <Route
+        path=":process_model_id/:process_instance_id/interstitial"
+        element={<ProcessInterstitialPage variant="all" />}
+      />
+      <Route
+        path=":process_model_id/:process_instance_id"
+        element={<ProcessInstanceShow variant="all" />}
+      />
+      <Route
+        path=":process_model_id/:process_instance_id/:to_task_guid"
+        element={<ProcessInstanceShow variant="all" />}
+      />
+      <Route path="reports" element={<ProcessInstanceReportList />} />
+      <Route path="reports/new" element={<ProcessInstanceReportNew />} />
+      <Route
+        path="reports/:report_identifier/edit"
+        element={<ProcessInstanceReportEdit />}
+      />
+      <Route path="find-by-id" element={<ProcessInstanceFindById />} />
+    </Routes>
+  );
+}
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShortLink.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShortLink.tsx
@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { modifyProcessIdentifierForPathParam } from '../helpers';
+import HttpService from '../services/HttpService';
+import { ProcessInstance } from '../interfaces';
+
+export default function ProcessInstanceShortLink() {
+  const params = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleProcessInstanceNavigation = (result: any) => {
+      const processInstance: ProcessInstance = result.process_instance;
+      let path = '/process-instances/';
+      if (result.uri_type === 'for-me') {
+        path += 'for-me/';
+      }
+      path += `${modifyProcessIdentifierForPathParam(
+        processInstance.process_model_identifier
+      )}/${processInstance.id}`;
+      navigate(path);
+    };
+
+    HttpService.makeCallToBackend({
+      path: `/process-instances/find-by-id/${params.process_instance_id}`,
+      successCallback: handleProcessInstanceNavigation,
+    });
+  }, [params.process_instance_id, navigate]);
+
+  return null;
+}
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
@ -21,6 +21,7 @@ import {
  StopOutline,
  TrashCan,
  Warning,
+  Link as LinkIcon,
 } from '@carbon/icons-react';
 import {
  Accordion,
@ -117,6 +118,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
  >(null);

  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
+  const [copiedShortLinkToClipboard, setCopiedShortLinkToClipboard] =
+    useState<boolean>(false);

  const { addError, removeError } = useAPIError();
  const unModifiedProcessModelId = unModifyProcessIdentifierForPathParam(
@ -151,12 +154,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {

  const navigateToProcessInstances = (_result: any) => {
    navigate(
-      `/admin/process-instances?process_model_identifier=${unModifiedProcessModelId}`
+      `/process-instances?process_model_identifier=${unModifiedProcessModelId}`
    );
  };

-  let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${params.process_model_id}/${params.process_instance_id}`;
-  const processInstanceShowPageBaseUrlAllVariant = `/admin/process-instances/${params.process_model_id}/${params.process_instance_id}`;
+  let processInstanceShowPageBaseUrl = `/process-instances/for-me/${params.process_model_id}/${params.process_instance_id}`;
+  const processInstanceShowPageBaseUrlAllVariant = `/process-instances/${params.process_model_id}/${params.process_instance_id}`;
  if (variant === 'all') {
    processInstanceShowPageBaseUrl = processInstanceShowPageBaseUrlAllVariant;
  }
@ -427,7 +430,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
              <dd>
                <Link
                  data-qa="go-to-current-diagram-process-model"
-                  to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+                  to={`/process-models/${modifyProcessIdentifierForPathParam(
                    processInstance.process_model_with_diagram_identifier || ''
                  )}`}
                >
@ -475,6 +478,14 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
    );
  };

+  const copyProcessInstanceShortLink = () => {
+    if (processInstance) {
+      const piShortLink = `${window.location.origin}/i/${processInstance.id}`;
+      navigator.clipboard.writeText(piShortLink);
+      setCopiedShortLinkToClipboard(true);
+    }
+  };
+
  const terminateButton = () => {
    if (
      processInstance &&
@ -518,6 +529,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
    return <div />;
  };

+  const copyProcessInstanceShortLinkButton = () => {
+    return (
+      <Button
+        onClick={copyProcessInstanceShortLink}
+        kind="ghost"
+        renderIcon={LinkIcon}
+        iconDescription="Copy short link for sharing"
+        hasIconOnly
+        size="lg"
+      />
+    );
+  };
+
  const resumeButton = () => {
    if (processInstance && processInstance.status === 'suspended') {
      return (
@ -1314,6 +1338,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
      return null;
    }
    const elements = [];
+    elements.push(copyProcessInstanceShortLinkButton());
    if (ability.can('POST', `${targetUris.processInstanceTerminatePath}`)) {
      elements.push(terminateButton());
    }
@ -1326,6 +1351,20 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
    if (ability.can('DELETE', targetUris.processInstanceActionPath)) {
      elements.push(deleteButton());
    }
+    let toast = null;
+    if (copiedShortLinkToClipboard) {
+      toast = (
+        <Notification
+          onClose={() => setCopiedShortLinkToClipboard(false)}
+          type="success"
+          title="Copied link to clipboard"
+          timeout={3000}
+          hideCloseButton
+          withBottomMargin={false}
+        />
+      );
+      elements.push(toast);
+    }
    return elements;
  };

--- a/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx
@ -10,9 +10,9 @@ type OwnProps = {

 export default function ProcessInterstitialPage({ variant }: OwnProps) {
  const params = useParams();
-  let processInstanceShowPageUrl = `/admin/process-instances/for-me/${params.process_model_id}/${params.process_instance_id}`;
+  let processInstanceShowPageUrl = `/process-instances/for-me/${params.process_model_id}/${params.process_instance_id}`;
  if (variant === 'all') {
-    processInstanceShowPageUrl = `/admin/process-instances/${params.process_model_id}/${params.process_instance_id}`;
+    processInstanceShowPageUrl = `/process-instances/${params.process_model_id}/${params.process_instance_id}`;
  }

  return (
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@ -266,7 +266,7 @@ export default function ProcessModelEditDiagram() {
    const httpMethod = 'DELETE';

    const navigateToProcessModelShow = (_httpResult: any) => {
-      navigate(`/admin/process-models/${modifiedProcessModelId}`);
+      navigate(`/process-models/${modifiedProcessModelId}`);
    };
    HttpService.makeCallToBackend({
      path: url,
--- a/spiffworkflow-frontend/src/routes/ProcessModelNewExperimental.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelNewExperimental.tsx
@ -20,7 +20,7 @@ export default function ProcessModelNewExperimental() {
    if ('id' in result) {
      const modifiedProcessModelPathFromResult =
        modifyProcessIdentifierForPathParam(result.id);
-      navigate(`/admin/process-models/${modifiedProcessModelPathFromResult}`);
+      navigate(`/process-models/${modifiedProcessModelPathFromResult}`);
    }
  };

--- a/spiffworkflow-frontend/src/routes/ProcessModelRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelRoutes.tsx
@ -0,0 +1,30 @@
+import { Route, Routes } from 'react-router-dom';
+import JsonSchemaFormBuilder from './JsonSchemaFormBuilder';
+import ProcessModelEdit from './ProcessModelEdit';
+import ProcessModelNew from './ProcessModelNew';
+import ProcessModelNewExperimental from './ProcessModelNewExperimental';
+import ProcessModelShow from './ProcessModelShow';
+import ReactFormEditor from './ReactFormEditor';
+
+export default function ProcessModelRoutes() {
+  return (
+    <Routes>
+      <Route path=":process_group_id/new" element={<ProcessModelNew />} />
+      <Route
+        path=":process_group_id/new-e"
+        element={<ProcessModelNewExperimental />}
+      />
+      <Route path=":process_model_id" element={<ProcessModelShow />} />
+      <Route path=":process_model_id/edit" element={<ProcessModelEdit />} />
+      <Route path=":process_model_id/form" element={<ReactFormEditor />} />
+      <Route
+        path=":process_model_id/form/:file_name"
+        element={<ReactFormEditor />}
+      />
+      <Route
+        path=":process_model_id/form-builder"
+        element={<JsonSchemaFormBuilder />}
+      />
+    </Routes>
+  );
+}
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@ -128,7 +128,7 @@ export default function ProcessModelShow() {
          onClose={() => setProcessInstance(null)}
        >
          <Link
-            to={`/admin/process-instances/for-me/${modifiedProcessModelId}/${processInstance.id}`}
+            to={`/process-instances/for-me/${modifiedProcessModelId}/${processInstance.id}`}
            data-qa="process-instance-show-link"
          >
            view
@ -211,7 +211,7 @@ export default function ProcessModelShow() {
        return `/editor/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`;
      }
      if (processModelFile.name.match(/\.(json|md)$/)) {
-        return `/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`;
+        return `/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`;
      }
    }
    return null;
@ -219,9 +219,7 @@ export default function ProcessModelShow() {

  const navigateToProcessModels = (_result: any) => {
    navigate(
-      `/admin/process-groups/${getGroupFromModifiedModelId(
-        modifiedProcessModelId
-      )}`
+      `/process-groups/${getGroupFromModifiedModelId(modifiedProcessModelId)}`
    );
  };

@ -561,11 +559,11 @@ export default function ProcessModelShow() {
            );
          } else if (a.selectedItem.text === 'New JSON File') {
            navigate(
-              `/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`
+              `/process-models/${modifiedProcessModelId}/form?file_ext=json`
            );
          } else if (a.selectedItem.text === 'New Markdown File') {
            navigate(
-              `/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`
+              `/process-models/${modifiedProcessModelId}/form?file_ext=md`
            );
          } else {
            console.log('a.selectedItem.text', a.selectedItem.text);
@ -760,7 +758,7 @@ export default function ProcessModelShow() {
              renderIcon={Edit}
              iconDescription="Edit Process Model"
              hasIconOnly
-              href={`/admin/process-models/${modifiedProcessModelId}/edit`}
+              href={`/process-models/${modifiedProcessModelId}/edit`}
            />
          </Can>
          <Can I="DELETE" a={targetUris.processModelShowPath} ability={ability}>
--- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
+++ b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
@ -111,7 +111,7 @@ export default function ReactFormEditor() {
      const fileNameWithExtension =
        defaultFileName ?? `${newFileName}.${fileExtension}`;
      navigate(
-        `/admin/process-models/${modifiedProcessModelId}/form/${fileNameWithExtension}`
+        `/process-models/${modifiedProcessModelId}/form/${fileNameWithExtension}`
      );
    }
  };
@ -160,7 +160,7 @@ export default function ReactFormEditor() {
    const httpMethod = 'DELETE';

    const navigateToProcessModelShow = (_httpResult: any) => {
-      navigate(`/admin/process-models/${modifiedProcessModelId}`);
+      navigate(`/process-models/${modifiedProcessModelId}`);
    };

    HttpService.makeCallToBackend({
@ -308,7 +308,7 @@ export default function ReactFormEditor() {
              <Button
                onClick={() =>
                  navigate(
-                    `/admin/process-models/${params.process_model_id}/form-builder${formBuildFileParam}`
+                    `/process-models/${params.process_model_id}/form-builder${formBuildFileParam}`
                  )
                }
                variant="danger"
--- a/spiffworkflow-frontend/src/routes/SecretList.tsx
+++ b/spiffworkflow-frontend/src/routes/SecretList.tsx
@ -36,7 +36,7 @@ export default function SecretList() {
        !ability.can('GET', targetUris.secretListPath) &&
        ability.can('GET', targetUris.authenticationListPath)
      ) {
-        navigate('/admin/configuration/authentications');
+        navigate('/configuration/authentications');
      } else {
        const { page, perPage } = getPageInfoFromSearchParams(searchParams);
        HttpService.makeCallToBackend({
@ -71,12 +71,12 @@ export default function SecretList() {
      return (
        <tr key={(row as any).key}>
          <td>
-            <Link to={`/admin/configuration/secrets/${(row as any).key}`}>
+            <Link to={`/configuration/secrets/${(row as any).key}`}>
              {(row as any).id}
            </Link>
          </td>
          <td>
-            <Link to={`/admin/configuration/secrets/${(row as any).key}`}>
+            <Link to={`/configuration/secrets/${(row as any).key}`}>
              {(row as any).key}
            </Link>
          </td>
@ -125,7 +125,7 @@ export default function SecretList() {
      <div>
        <h1>Secrets</h1>
        {SecretsDisplayArea()}
-        <Button href="/admin/configuration/secrets/new">Add a secret</Button>
+        <Button href="/configuration/secrets/new">Add a secret</Button>
      </div>
    );
  }
--- a/spiffworkflow-frontend/src/routes/SecretNew.tsx
+++ b/spiffworkflow-frontend/src/routes/SecretNew.tsx
@ -11,11 +11,11 @@ export default function SecretNew() {
  const navigate = useNavigate();

  const navigateToSecret = (_result: any) => {
-    navigate(`/admin/configuration/secrets/${key}`);
+    navigate(`/configuration/secrets/${key}`);
  };

  const navigateToSecrets = () => {
-    navigate(`/admin/configuration/secrets`);
+    navigate(`/configuration/secrets`);
  };

  const addSecret = (event: any) => {
--- a/spiffworkflow-frontend/src/routes/SecretShow.tsx
+++ b/spiffworkflow-frontend/src/routes/SecretShow.tsx
@ -46,7 +46,7 @@ export default function SecretShow() {
  };

  const navigateToSecrets = (_result: any) => {
-    navigate(`/admin/configuration/secrets`);
+    navigate(`/configuration/secrets`);
  };

  const deleteSecret = () => {
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@ -54,7 +54,7 @@ export default function TaskShow() {
      setGuestConfirmationText('Thank you!');
    } else {
      navigate(
-        `/admin/process-instances/for-me/${modifyProcessIdentifierForPathParam(
+        `/process-instances/for-me/${modifyProcessIdentifierForPathParam(
          myTask.process_model_identifier
        )}/${myTask.process_instance_id}/interstitial`
      );
@ -378,7 +378,7 @@ export default function TaskShow() {
          hotCrumbs={[
            [
              `Process Instance Id: ${params.process_instance_id}`,
-              `/admin/process-instances/for-me/${modifyProcessIdentifierForPathParam(
+              `/process-instances/for-me/${modifyProcessIdentifierForPathParam(
                basicTask.process_model_identifier
              )}/${params.process_instance_id}`,
            ],
--- a/spiffworkflow-frontend/src/services/UserService.ts
+++ b/spiffworkflow-frontend/src/services/UserService.ts
@ -115,10 +115,6 @@ const loginIfNeeded = () => {
  }
 };

-const hasRole = (_roles: string[]): boolean => {
-  return isLoggedIn();
-};
-
 const UserService = {
  authenticationDisabled,
  doLogin,
@ -126,7 +122,6 @@ const UserService = {
  getAccessToken,
  getPreferredUsername,
  getUserEmail,
-  hasRole,
  isLoggedIn,
  loginIfNeeded,
  onlyGuestTaskCompletion,