Use PanelSection component to wrap error panels in tabs

src/views/domain-page/domain-page-tabs-error/domain-page-tabs-error.tsx

@@ -1,6 +1,7 @@
 import { useParams } from 'next/navigation';
 
 import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
 
 import domainPageTabsErrorConfig from '../config/domain-page-tabs-error.config';
 import { type DomainTabName } from '../domain-page-content/domain-page-content.types';
@@ -13,22 +14,26 @@ export default function DomainPageTabsError({ error, reset }: Props) {
 
   if (typeof getConfig !== 'function') {
     return (
-      <ErrorPanel
-        error={error}
-        message={'Failed to load domain content'}
-        reset={reset}
-      />
+      <PanelSection>
+        <ErrorPanel
+          error={error}
+          message={'Failed to load domain content'}
+          reset={reset}
+        />
+      </PanelSection>
     );
   }
 
   const errorConfig = getConfig(error);
   return (
-    <ErrorPanel
-      error={error}
-      message={errorConfig.message}
-      actions={errorConfig.actions}
-      omitLogging={errorConfig.omitLogging}
-      reset={reset}
-    />
+    <PanelSection>
+      <ErrorPanel
+        error={error}
+        message={errorConfig.message}
+        actions={errorConfig.actions}
+        omitLogging={errorConfig.omitLogging}
+        reset={reset}
+      />
+    </PanelSection>
   );
 }

src/views/domain-workflows-basic/domain-workflows-basic-table/domain-workflows-basic-table.tsx

@@ -2,14 +2,14 @@
 import React from 'react';
 
 import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import WorkflowsTable from '@/views/shared/workflows-table/workflows-table';
 
 import useListWorkflowsBasic from '../hooks/use-list-workflows-basic';
 
-import { styled } from './domain-workflows-basic-table.styles';
 import { type Props } from './domain-workflows-basic-table.types';
 import getWorkflowsBasicErrorPanelProps from './helpers/get-workflows-basic-error-panel-props';
 
@@ -46,9 +46,9 @@ export default function DomainWorkflowsBasicTable({ domain, cluster }: Props) {
 
     if (errorPanelProps) {
       return (
-        <styled.ErrorPanelContainer>
+        <PanelSection>
           <ErrorPanel {...errorPanelProps} reset={refetch} />
-        </styled.ErrorPanelContainer>
+        </PanelSection>
       );
     }
   }

src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
@@ -12,7 +13,6 @@ import DOMAIN_WORKFLOWS_PAGE_SIZE from '../config/domain-workflows-page-size.con
 import { type Props } from '../domain-workflows-table/domain-workflows-table.types';
 import getNextSortOrder from '../helpers/get-next-sort-order';
 
-import { styled } from './domain-workflows-table.styles';
 import getWorkflowsErrorPanelProps from './helpers/get-workflows-error-panel-props';
 
 export default function DomainWorkflowsTable({ domain, cluster }: Props) {
@@ -60,9 +60,9 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
 
     if (errorPanelProps) {
       return (
-        <styled.ErrorPanelContainer>
+        <PanelSection>
           <ErrorPanel {...errorPanelProps} reset={refetch} />
-        </styled.ErrorPanelContainer>
+        </PanelSection>
       );
     }
   }

src/views/workflow-page/workflow-page-tabs-error/workflow-page-tabs-error.tsx

@@ -1,6 +1,7 @@
 import { useParams } from 'next/navigation';
 
 import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
 
 import workflowPageTabsErrorConfig from '../config/workflow-page-tabs-error.config';
 import { type WorkflowPageTabName } from '../workflow-page-tab-content/workflow-page-tab-content.types';
@@ -14,24 +15,26 @@ export default function WorkflowPageTabsError({ error, reset }: Props) {
 
   if (typeof getConfig !== 'function') {
     return (
-      <div>
+      <PanelSection>
         <ErrorPanel
           error={error}
           message={'Failed to load workflow content'}
           reset={reset}
         />
-      </div>
+      </PanelSection>
     );
   }
 
   const errorConfig = getConfig(error);
   return (
-    <ErrorPanel
-      error={error}
-      message={errorConfig.message}
-      actions={errorConfig.actions}
-      omitLogging={errorConfig.omitLogging}
-      reset={reset}
-    />
+    <PanelSection>
+      <ErrorPanel
+        error={error}
+        message={errorConfig.message}
+        actions={errorConfig.actions}
+        omitLogging={errorConfig.omitLogging}
+        reset={reset}
+      />
+    </PanelSection>
   );
 }