feat: moved policyTypes to Specification Panel

kyma-project · Aug 20, 2024 · 439e480 · 439e480
1 parent 09bfc4d
commit 439e480
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/src/resources/NetworkPolicies/NetworkPolicyDetails.js b/src/resources/NetworkPolicies/NetworkPolicyDetails.js
@@ -11,6 +11,7 @@ import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 import { ResourceDescription } from 'resources/NetworkPolicies';
 import { EventsList } from 'shared/components/EventsList';
 import { filterByResource } from 'hooks/useMessageList';
+import { LayoutPanelRow } from 'shared/components/LayoutPanelRow/LayoutPanelRow';
 
 export function NetworkPolicyDetails(props) {
   const { t } = useTranslation();
@@ -24,12 +25,18 @@ export function NetworkPolicyDetails(props) {
     />
   );
 
-  const customColumns = [
-    {
-      header: t('network-policies.headers.policy-types'),
-      value: ({ spec }) => <Tokens tokens={spec.policyTypes || []} />,
-    },
-  ];
+  const Specification = ({ spec }) => (
+    <UI5Panel
+      key="specification"
+      title="Specification"
+      keyComponent="specification-panel"
+    >
+      <LayoutPanelRow
+        name={t('network-policies.headers.policy-types')}
+        children={<Tokens tokens={spec.policyTypes || []} />}
+      />
+    </UI5Panel>
+  );
 
   const Ingresses = ({ spec }) => {
     if (!spec.ingress?.length) return null;
@@ -88,11 +95,16 @@ export function NetworkPolicyDetails(props) {
     );
   };
 
-  const customComponents = [Ingresses, Egresses, PodSelector, Events];
+  const customComponents = [
+    Specification,
+    Ingresses,
+    Egresses,
+    PodSelector,
+    Events,
+  ];
 
   return (
     <ResourceDetails
-      customColumns={customColumns}
       customComponents={customComponents}
       description={ResourceDescription}
       createResourceForm={NetworkPolicyCreate}

diff --git a/src/shared/components/LayoutPanelRow/LayoutPanelRow.js b/src/shared/components/LayoutPanelRow/LayoutPanelRow.js
@@ -5,7 +5,7 @@ import { Text } from '@ui5/webcomponents-react';
 import { spacing } from '@ui5/webcomponents-react-base';
 import './LayoutPanelRow.scss';
 
-export function LayoutPanelRow({ name, value }) {
+export function LayoutPanelRow({ name, value, children }) {
   const sanitizedValue = stringifyIfBoolean(value);
   return (
     <div
@@ -16,7 +16,10 @@ export function LayoutPanelRow({ name, value }) {
       }}
     >
       <Text style={spacing.sapUiTinyMarginBottom}>{name}</Text>
-      <Text>{sanitizedValue}</Text>
+      <div>
+        {sanitizedValue && <Text>{sanitizedValue}</Text>}
+        {children}
+      </div>
     </div>
   );
 }