Cockpit: user privileges empty state

Add an empty state component for when the user does not have the correct
permissions to run the frontend on-prem.

src/AppCockpit.tsx

@@ -8,18 +8,24 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
 
-import { NotReady } from './Components/Cockpit/NotReady';
+import { NotReady, RequireAdmin } from './Components/Cockpit';
 import { Router } from './Router';
 import { onPremStore as store } from './store';
 import { useGetComposerSocketStatus } from './Utilities/useComposerStatus';
+import { useIsCockpitAdmin } from './Utilities/useIsCockpitAdmin';
 
 const Application = () => {
   const { enabled, started } = useGetComposerSocketStatus();
+  const isAdmin = useIsCockpitAdmin();
 
   if (!started || !enabled) {
     return <NotReady enabled={enabled} />;
   }
 
+  if (!isAdmin) {
+    return <RequireAdmin />;
+  }
+
   return (
     <React.Fragment>
       <NotificationsPortal />

src/Components/Cockpit/NotReady.tsx

@@ -4,11 +4,10 @@ import {
   Button,
   EmptyState,
   EmptyStateActions,
-  EmptyStateBody,
   EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Title,
 } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 import cockpit from 'cockpit';
@@ -16,11 +15,11 @@ import cockpit from 'cockpit';
 export const NotReady = ({ enabled }: { enabled: boolean }) => {
   return (
     <EmptyState variant={EmptyStateVariant.xl}>
-      <EmptyStateIcon icon={CubesIcon} />
-      <Title headingLevel="h4" size="lg">
-        OSBuild Composer is not {enabled ? 'started' : 'enabled'}
-      </Title>
-      <EmptyStateBody />
+      <EmptyStateHeader
+        titleText={`OSBuild Composer is not ${enabled ? 'started' : 'enabled'}`}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={CubesIcon} />}
+      />
       <EmptyStateFooter>
         <EmptyStateActions>
           <Button

src/Components/Cockpit/RequireAdmin.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+} from '@patternfly/react-core';
+import { LockIcon } from '@patternfly/react-icons';
+
+export const RequireAdmin = () => {
+  return (
+    <EmptyState variant={EmptyStateVariant.xl}>
+      <EmptyStateHeader
+        titleText="Access is limited."
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={LockIcon} color="#f4c145" />}
+      />
+      <EmptyStateBody>
+        Administrative access is required to run the Image Builder frontend.
+        Click on the icon in the toolbar to grant administrative access.
+      </EmptyStateBody>
+    </EmptyState>
+  );
+};

src/Components/Cockpit/index.tsx

@@ -0,0 +1,2 @@
+export { NotReady } from './NotReady';
+export { RequireAdmin } from './RequireAdmin';