Security page refactor

frontend/src/components/layout/header.tsx

@@ -164,18 +164,6 @@ function useShouldShowRefresh() {
   const connectWizardPagesMatch = matchRoute({ to: '/rp-connect/wizard' });
   const getStartedApiMatch = matchRoute({ to: '/get-started/api' });
 
-  // matches acls
-  const aclCreateMatch = matchRoute({ to: '/security/acls/create' });
-  const aclUpdateMatch = matchRoute({ to: '/security/acls/$aclName/update' });
-  const aclDetailMatch = matchRoute({ to: '/security/acls/$aclName/details' });
-  const isACLRelated = aclCreateMatch || aclUpdateMatch || aclDetailMatch;
-
-  // matches roles
-  const roleCreateMatch = matchRoute({ to: '/security/roles/create' });
-  const roleUpdateMatch = matchRoute({ to: '/security/roles/$roleName/update' });
-  const roleDetailMatch = matchRoute({ to: '/security/roles/$roleName/details' });
-  const isRoleRelated = roleCreateMatch || roleUpdateMatch || roleDetailMatch;
-
   if (connectClusterMatch && connectClusterMatch.connector === 'create-connector') {
     return false;
   }
@@ -188,12 +176,6 @@ function useShouldShowRefresh() {
   if (secretsMatch) {
     return false;
   }
-  if (isACLRelated) {
-    return false;
-  }
-  if (isRoleRelated) {
-    return false;
-  }
   if (connectWizardPagesMatch) {
     return false;
   }

frontend/src/components/license/feature-license-notification.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertDescription, AlertIcon, Box, Flex, Text } from '@redpanda-data/ui';
+import { Flex, Text } from '@redpanda-data/ui';
 import { Link } from 'components/redpanda-ui/components/typography';
 import { type FC, type ReactElement, useEffect, useState } from 'react';
 
@@ -20,13 +20,16 @@ import {
 
 const WARNING_THRESHOLD_DAYS = 5;
 
-import { RegisterModal } from './register-modal';
+import { InfoIcon } from 'components/icons';
+import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';
 import {
   type License,
   License_Type,
   type ListEnterpriseFeaturesResponse_Feature,
-} from '../../protogen/redpanda/api/console/v1alpha1/license_pb';
-import { api } from '../../state/backend-api';
+} from 'protogen/redpanda/api/console/v1alpha1/license_pb';
+import { api } from 'state/backend-api';
+
+import { RegisterModal } from './register-modal';
 
 // biome-ignore lint/nursery/useMaxParams: Refactoring to options object would require updating all call sites
 const getLicenseAlertContentForFeature = (
@@ -36,7 +39,7 @@ const getLicenseAlertContentForFeature = (
   bakedInTrial: boolean,
   onRegisterModalOpen: () => void
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
-): { message: ReactElement; status: 'warning' | 'info' } | null => {
+): { message: ReactElement; status: 'warning' | 'destructive' } | null => {
   if (license === undefined) {
     return null;
   }
@@ -47,23 +50,28 @@ const getLicenseAlertContentForFeature = (
     if (bakedInTrial) {
       return {
         message: (
-          <Box>
-            <Text>This is an enterprise feature. Register for an additional 30 days of enterprise features.</Text>
-            <Flex gap={2} my={2}>
-              <RegisterButton onRegisterModalOpen={onRegisterModalOpen} />
-            </Flex>
-          </Box>
+          <Alert icon={<InfoIcon />} variant="destructive">
+            <AlertDescription>
+              <Text>This is an enterprise feature. Register for an additional 30 days of enterprise features.</Text>
+              <Flex gap={2} my={2}>
+                <RegisterButton onRegisterModalOpen={onRegisterModalOpen} />
+              </Flex>
+            </AlertDescription>
+          </Alert>
         ),
-        status: msToExpiration > WARNING_THRESHOLD_DAYS * MS_IN_DAY ? 'info' : 'warning',
+        status: msToExpiration > WARNING_THRESHOLD_DAYS * MS_IN_DAY ? 'warning' : 'destructive',
       };
     }
     return {
       message: (
-        <Box>
-          <Text>This is an enterprise feature.</Text>
-        </Box>
+        <Alert
+          icon={<InfoIcon />}
+          variant={msToExpiration > WARNING_THRESHOLD_DAYS * MS_IN_DAY ? 'warning' : 'destructive'}
+        >
+          <AlertTitle>This is an enterprise feature.</AlertTitle>
+        </Alert>
       ),
-      status: msToExpiration > WARNING_THRESHOLD_DAYS * MS_IN_DAY ? 'info' : 'warning',
+      status: msToExpiration > WARNING_THRESHOLD_DAYS * MS_IN_DAY ? 'warning' : 'destructive',
     };
   }
 
@@ -76,39 +84,43 @@ const getLicenseAlertContentForFeature = (
     ) {
       return {
         message: (
-          <Box>
-            <Text>This is an enterprise feature, active until {getPrettyExpirationDate(license)}.</Text>
-            <Flex gap={2} my={2}>
-              <UploadLicenseButton />
-              <UpgradeButton />
-            </Flex>
-          </Box>
+          <Alert icon={<InfoIcon />} variant="info">
+            <AlertDescription>
+              <Text>This is an enterprise feature, active until {getPrettyExpirationDate(license)}.</Text>
+              <Flex gap={2} my={2}>
+                <UploadLicenseButton />
+                <UpgradeButton />
+              </Flex>
+            </AlertDescription>
+          </Alert>
         ),
-        status: 'info',
+        status: 'warning',
       };
     }
     if (msToExpiration > -1 && msToExpiration < 15 * MS_IN_DAY && coreHasEnterpriseFeatures(enterpriseFeaturesUsed)) {
       return {
         message: (
-          <Box>
-            <Text>
-              Your Redpanda Enterprise trial is expiring in {getPrettyTimeToExpiration(license)}; at that point, your{' '}
-              <Link href={ENTERPRISE_FEATURES_DOCS_LINK} rel="noopener noreferrer" target="_blank">
-                enterprise features
-              </Link>{' '}
-              will become unavailable. To get a full Redpanda Enterprise license,{' '}
-              <Link href={getEnterpriseCTALink('upgrade')} rel="noopener noreferrer" target="_blank">
-                contact us
-              </Link>
-              .
-            </Text>
-            <Flex gap={2} my={2}>
-              <UploadLicenseButton />
-              <UpgradeButton />
-            </Flex>
-          </Box>
+          <Alert icon={<InfoIcon />} variant="destructive">
+            <AlertDescription>
+              <Text>
+                Your Redpanda Enterprise trial is expiring in {getPrettyTimeToExpiration(license)}; at that point, your{' '}
+                <Link href={ENTERPRISE_FEATURES_DOCS_LINK} rel="noopener noreferrer" target="_blank">
+                  enterprise features
+                </Link>{' '}
+                will become unavailable. To get a full Redpanda Enterprise license,{' '}
+                <Link href={getEnterpriseCTALink('upgrade')} rel="noopener noreferrer" target="_blank">
+                  contact us
+                </Link>
+                .
+              </Text>
+              <Flex gap={2} my={2}>
+                <UploadLicenseButton />
+                <UpgradeButton />
+              </Flex>
+            </AlertDescription>
+          </Alert>
         ),
-        status: 'warning',
+        status: 'destructive',
       };
     }
   } else {
@@ -117,54 +129,62 @@ const getLicenseAlertContentForFeature = (
       if (license.type === License_Type.TRIAL) {
         return {
           message: (
-            <Box>
-              <Text>This is an enterprise feature. Your trial is active until {getPrettyExpirationDate(license)}</Text>
-              <Flex gap={2} my={2}>
-                <UploadLicenseButton />
-                <UpgradeButton />
-              </Flex>
-            </Box>
+            <Alert icon={<InfoIcon />} variant="warning">
+              <AlertDescription>
+                <Text>
+                  This is an enterprise feature. Your trial is active until {getPrettyExpirationDate(license)}
+                </Text>
+                <Flex gap={2} my={2}>
+                  <UploadLicenseButton />
+                  <UpgradeButton />
+                </Flex>
+              </AlertDescription>
+            </Alert>
           ),
-          status: 'info',
+          status: 'warning',
         };
       }
       return {
         message: (
-          <Box>
-            <Text>
-              This is a Redpanda Enterprise feature. Try it with our{' '}
-              <Link href={getEnterpriseCTALink('tryEnterprise')} rel="noopener noreferrer" target="_blank">
-                Redpanda Enterprise Trial
-              </Link>
-              .
-            </Text>
-          </Box>
+          <Alert icon={<InfoIcon />} variant="warning">
+            <AlertDescription>
+              <Text>
+                This is a Redpanda Enterprise feature. Try it with our{' '}
+                <Link href={getEnterpriseCTALink('tryEnterprise')} rel="noopener noreferrer" target="_blank">
+                  Redpanda Enterprise Trial
+                </Link>
+                .
+              </Text>
+            </AlertDescription>
+          </Alert>
         ),
-        status: 'info',
+        status: 'warning',
       };
     }
     if (msToExpiration > 0 && msToExpiration < 15 * MS_IN_DAY && license.type === License_Type.TRIAL) {
       return {
         message: (
-          <Box>
-            <Text>
-              Your Redpanda Enterprise trial is expiring in {getPrettyTimeToExpiration(license)}; at that point, your{' '}
-              <Link href={ENTERPRISE_FEATURES_DOCS_LINK} rel="noopener noreferrer" target="_blank">
-                enterprise features
-              </Link>{' '}
-              will become unavailable. To get a full Redpanda Enterprise license,{' '}
-              <Link href={getEnterpriseCTALink('upgrade')} rel="noopener noreferrer" target="_blank">
-                contact us
-              </Link>
-              .
-            </Text>
-            <Flex gap={2} my={2}>
-              <UploadLicenseButton />
-              <UpgradeButton />
-            </Flex>
-          </Box>
+          <Alert icon={<InfoIcon />} variant="warning">
+            <AlertDescription>
+              <Text>
+                Your Redpanda Enterprise trial is expiring in {getPrettyTimeToExpiration(license)}; at that point, your{' '}
+                <Link href={ENTERPRISE_FEATURES_DOCS_LINK} rel="noopener noreferrer" target="_blank">
+                  enterprise features
+                </Link>{' '}
+                will become unavailable. To get a full Redpanda Enterprise license,{' '}
+                <Link href={getEnterpriseCTALink('upgrade')} rel="noopener noreferrer" target="_blank">
+                  contact us
+                </Link>
+                .
+              </Text>
+              <Flex gap={2} my={2}>
+                <UploadLicenseButton />
+                <UpgradeButton />
+              </Flex>
+            </AlertDescription>
+          </Alert>
         ),
-        status: 'warning',
+        status: 'destructive',
       };
     }
   }
@@ -220,16 +240,12 @@ export const FeatureLicenseNotification: FC<{ featureName: 'reassignPartitions'
     return null;
   }
 
-  const { message, status } = alertContent;
+  const { message } = alertContent;
 
   return (
-    <Box>
-      <Alert mb={4} status={status} variant="subtle">
-        <AlertIcon />
-        <AlertDescription>{message}</AlertDescription>
-      </Alert>
-
+    <>
+      {message}
       <RegisterModal isOpen={registerModalOpen} onClose={() => setIsRegisterModalOpen(false)} />
-    </Box>
+    </>
   );
 };

frontend/src/components/misc/query-result.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2022 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import type { ReactNode } from 'react';
+import { DefaultSkeleton } from 'utils/tsx-utils';
+
+import { Alert, AlertDescription, AlertTitle } from '../redpanda-ui/components/alert';
+
+type Props = {
+  isLoading: boolean;
+  isError: boolean;
+  error?: { message?: string } | null;
+  errorTitle?: string;
+  children: ReactNode;
+  skeleton?: ReactNode;
+};
+
+export const QueryResult = ({
+  isLoading,
+  isError,
+  error,
+  errorTitle = 'Failed to load data',
+  children,
+  skeleton = DefaultSkeleton,
+}: Props) => {
+  if (isLoading) {
+    return skeleton;
+  }
+
+  if (isError) {
+    return (
+      <Alert variant="destructive">
+        <AlertTitle>{errorTitle}</AlertTitle>
+        <AlertDescription>{error?.message ?? 'An unexpected error occurred.'}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  return <>{children}</>;
+};