fix inconsistency in listing components

ui/components/AutomationDetail.tsx

@@ -209,12 +209,12 @@ function AutomationDetail({
       )}
 
       <Collapsible>
-        <div className="collapse-wrapper ">
+        <div className="collapse-wrapper">
           <div className="grid grid-items">
             {info.map(([k, v]) => {
               return (
                 <Flex id={k} gap="8" key={k}>
-                  <Text capitalize semiBold color="neutral30">
+                  <Text capitalize semiBold color="neutral30" minWidth="150">
                     {k}:
                   </Text>
                   {v || "-"}
@@ -246,15 +246,14 @@ export default styled(AutomationDetail).attrs({
     width: 100%;
   }
   .collapse-wrapper {
-    padding: 16px 44px;
-    width: 100%;
+    padding: 16px;
   }
   .grid {
     width: 100%;
     display: grid;
     gap: 8px;
   }
   .grid-items {
-    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 8px), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
   }
 `;

ui/components/HealthCheckAgg.tsx

@@ -45,7 +45,7 @@ interface Prop {
 
 const HealthCheckAgg = ({ health }: Prop) => {
   return (
-    <Flex wide align gap="16">
+    <Flex wide align gap="8">
       {health.unhealthy > 0 ? (
         <>
           <Icon

ui/components/InfoList.tsx

@@ -1,43 +1,20 @@
-import _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";
-import Text from "./Text";
+import Flex from "./Flex";
+import { RowHeader } from "./Policies/Utils/HeaderRows";
 
 export type InfoField = [string, any];
 
 const InfoList = styled(
-  ({ items, className }: { className?: string; items: InfoField[] }) => {
+  ({ items }: { className?: string; items: InfoField[] }) => {
     return (
-      <table className={className}>
-        <tbody>
-          {_.map(items, ([k, v], index) => (
-            <tr key={`item ${index}`}>
-              <td>
-                <Text capitalize semiBold color="neutral30">
-                  {k}:
-                </Text>
-              </td>
-              <td>{v || "-"}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <Flex column wide gap="8">
+        {items.map(([k, v]) => (
+          <RowHeader rowkey={k} value={v} key={k} />
+        ))}
+      </Flex>
     );
   }
-)`
-  border-spacing: 0;
-  tbody tr td:first-child {
-    min-width: 200px;
-  }
-  td {
-    padding: ${(props) => props.theme.spacing.xxs} 0;
-    word-break: break-all;
-    vertical-align: top;
-    white-space: pre-wrap;
-  }
-  tr {
-    height: 16px;
-  }
-`;
+)``;
 
 export default InfoList;

ui/components/Metadata.tsx

@@ -16,17 +16,11 @@ type Props = {
 const Label = styled(Text)`
   padding: ${(props) => props.theme.spacing.xs}
     ${(props) => props.theme.spacing.small};
-  margin-right: ${(props) => props.theme.spacing.xxs};
   border-radius: 15px;
   white-space: nowrap;
   background-color: ${(props) => props.theme.colors.neutralGray};
 `;
 
-const LabelFlex = styled(Flex)`
-  padding: ${(props) => props.theme.spacing.xxs} 0;
-  overflow-x: scroll;
-`;
-
 function Metadata({ metadata = [], labels = [], className }: Props) {
   const metadataCopy = [];
 
@@ -49,32 +43,31 @@ function Metadata({ metadata = [], labels = [], className }: Props) {
   });
 
   return (
-    <Flex wide column className={className}>
+    <Flex wide column className={className} gap="16">
       {metadataCopy.length > 0 && (
-        <>
+        <Flex column gap="8">
           <Text size="large" color="neutral30">
             Metadata
           </Text>
           <InfoList items={metadataCopy} />
           <Spacer padding="small" />
-        </>
+        </Flex>
       )}
       {labels.length > 0 && (
-        <>
+        <Flex column gap="8">
           <Text size="large" color="neutral30">
             Labels
           </Text>
-          <LabelFlex wide start>
+          <Flex wide start wrap gap="4">
             {labels.map((label, index) => {
               return (
                 <Label key={index}>
                   {label[0]}: {label[1]}
                 </Label>
               );
             })}
-          </LabelFlex>
-          <Spacer padding="small" />
-        </>
+          </Flex>
+        </Flex>
       )}
     </Flex>
   );

ui/components/PageStatus.tsx

@@ -6,11 +6,9 @@ import Flex from "./Flex";
 import Icon from "./Icon";
 import { computeMessage, getIndicatorInfo } from "./KubeStatusIndicator";
 import { NoDialogDataTable } from "./PodDetail";
-import Spacer from "./Spacer";
 import Text from "./Text";
 
 const SlideFlex = styled(Flex)<{ open: boolean }>`
-  padding-top: ${(props) => props.theme.spacing.medium};
   max-height: ${(props) => (props.open ? "400px" : "0px")};
   transition-property: max-height;
   transition-duration: 0.5s;
@@ -37,10 +35,9 @@ function PageStatus({
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Flex column wide>
-      <Flex align className={className}>
+    <Flex column wide gap="8">
+      <Flex align className={className} gap="8">
         <Icon type={icon} color={color} size="medium" />
-        <Spacer padding="xs" />
         <Text color="neutral30">{msg}</Text>
         {showAll && (
           <Button variant="text" onClick={() => setOpen(!open)}>
@@ -50,7 +47,7 @@ function PageStatus({
       </Flex>
       {showAll && (
         <SlideFlex open={open} wide>
-          <Flex column wide>
+          <Flex column wide gap="8">
             <Text bold size="large" color="neutral30">
               Conditions:
             </Text>
@@ -71,7 +68,6 @@ function PageStatus({
   );
 }
 export default styled(PageStatus).attrs({ className: PageStatus.name })`
-  padding-bottom: ${(props) => props.theme.spacing.small};
   transition-property: max-height;
   transition-duration: 0.5s;
   transition-timing-function: ease-in-out;

ui/components/Policies/PolicyDetails/PolicyDetails.tsx

@@ -11,7 +11,7 @@ import SubRouterTabs, { RouterTab } from "../../SubRouterTabs";
 import Text from "../../Text";
 import YamlView from "../../YamlView";
 import { PolicyViolationsList } from "../PolicyViolations/Table";
-import HeaderRows, { Header } from "../Utils/HeaderRows";
+import HeaderRows, { RowItem } from "../Utils/HeaderRows";
 import { MarkdownEditor } from "../Utils/MarkdownEditor";
 import Parameters from "../Utils/Parameters";
 import PolicyMode from "../Utils/PolicyMode";
@@ -40,7 +40,7 @@ const PolicyDetails = ({ policy }: Props) => {
   const { path } = useRouteMatch();
 
   const { isFlagEnabled } = useFeatureFlags();
-  const defaultHeaders: Header[] = [
+  const items: RowItem[] = [
     {
       rowkey: "Policy ID",
       value: id,
@@ -61,7 +61,7 @@ const PolicyDetails = ({ policy }: Props) => {
       rowkey: "Tags",
       children: (
         <Flex id="policy-details-header-tags" gap="4">
-          {!!tags && tags?.length > 0 ? (
+          {tags?.length > 0 ? (
             tags?.map((tag) => <ChipWrap key={tag} label={tag} />)
           ) : (
             <Text>There is no tags for this policy</Text>
@@ -89,7 +89,7 @@ const PolicyDetails = ({ policy }: Props) => {
       rowkey: "Targeted K8s Kind",
       children: (
         <Flex id="policy-details-header-kinds" gap="4">
-          {targets?.kinds?.length ? (
+          {targets?.kinds?.length > 0 ? (
             targets?.kinds?.map((kind) => <ChipWrap key={kind} label={kind} />)
           ) : (
             <Text>There is no kinds for this policy</Text>
@@ -102,7 +102,7 @@ const PolicyDetails = ({ policy }: Props) => {
     <SubRouterTabs rootPath={`${path}/details`}>
       <RouterTab name="Details" path={`${path}/details`}>
         <Flex wide tall column gap="32">
-          <HeaderRows headers={defaultHeaders} />
+          <HeaderRows items={items} />
           <SectionWrapper title="Description:">
             <MarkdownEditor children={description || ""} />
           </SectionWrapper>

ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx

@@ -13,7 +13,7 @@ import { FluxObject } from "../../../lib/objects";
 import { V2Routes } from "../../../lib/types";
 import ClusterDashboardLink from "../../ClusterDashboardLink";
 import Link from "../../Link";
-import HeaderRows, { Header } from "../Utils/HeaderRows";
+import HeaderRows, { RowItem } from "../Utils/HeaderRows";
 import { MarkdownEditor } from "../Utils/MarkdownEditor";
 import Parameters from "../Utils/Parameters";
 import { SectionWrapper } from "../Utils/PolicyUtils";
@@ -45,7 +45,7 @@ export const ViolationDetails = ({
     parameters,
     policyId,
   } = violation || {};
-  const headers: Header[] = [
+  const items: RowItem[] = [
     {
       rowkey: "Policy Name",
       children: (
@@ -101,7 +101,7 @@ export const ViolationDetails = ({
 
   return (
     <Flex wide tall column gap="32">
-      <HeaderRows headers={headers} />
+      <HeaderRows items={items} />
       <SectionWrapper title={` Occurrences ( ${occurrences?.length} )`}>
         <ul className="occurrences">
           {occurrences?.map((item) => (

ui/components/Policies/Utils/HeaderRows.tsx

@@ -2,20 +2,35 @@ import React from "react";
 import Flex from "../../Flex";
 import Text from "../../Text";
 
-export interface Header {
+export interface RowItem {
   rowkey: string;
   value?: any;
   children?: any;
   visible?: boolean;
 }
-
+export function RowHeader({ children, rowkey, value }: RowItem) {
+  return (
+    <Flex alignItems="center" center gap="8" data-testid={rowkey}>
+      <Text color="neutral30" semiBold size="medium" minWidth="150">
+        {rowkey}:
+      </Text>
+      {children ? (
+        children
+      ) : (
+        <Text color="neutral40" size="medium">
+          {value || "--"}
+        </Text>
+      )}
+    </Flex>
+  );
+}
 interface Props {
-  headers: Header[];
+  items: RowItem[];
 }
-const HeaderRows = ({ headers }: Props) => {
+const HeaderRows = ({ items }: Props) => {
   return (
     <Flex column gap="8">
-      {headers.map((h) => {
+      {items.map((h) => {
         return (
           h.visible !== false && (
             <Flex
@@ -25,7 +40,7 @@ const HeaderRows = ({ headers }: Props) => {
               data-testid={h.rowkey}
               key={h.rowkey}
             >
-              <Text color="neutral30" semiBold size="medium">
+              <Text color="neutral30" semiBold size="medium" minWidth="150">
                 {h.rowkey}:
               </Text>
               {h.children ? (

ui/components/Policies/__tests__/HeaderRows.test.tsx

@@ -1,9 +1,9 @@
 import { render } from "@testing-library/react";
 import React from "react";
 import { withTheme } from "../../../lib/test-utils";
-import HeaderRows, { Header } from "../Utils/HeaderRows";
+import HeaderRows, { RowItem } from "../Utils/HeaderRows";
 
-const headers: Header[] = [
+const items: RowItem[] = [
   {
     rowkey: "Policy Name",
     value: "Controller ServiceAccount Tokens Automount",
@@ -25,8 +25,8 @@ const headers: Header[] = [
 
 describe("HeaderRows", () => {
   it("validate rows", async () => {
-    render(withTheme(<HeaderRows headers={headers} />));
-    headers.forEach((h) => {
+    render(withTheme(<HeaderRows items={items} />));
+    items.forEach((h) => {
       const ele = document.querySelector(
         `[data-testid="${h.rowkey}"]`
       ) as HTMLElement;

ui/components/SourceDetail.tsx

@@ -63,17 +63,22 @@ function SourceDetail({ className, source, info, type, customActions }: Props) {
   });
 
   return (
-    <Flex wide tall column className={className}>
-      <PageStatus conditions={source.conditions} suspended={source.suspended} />
-      <SyncActions
-        name={name}
-        namespace={namespace}
-        clusterName={clusterName}
-        kind={type}
-        suspended={suspended}
-        hideDropdown
-        customActions={customActions}
-      />
+    <Flex wide tall column className={className} gap="32">
+      <Flex column gap="8">
+        <PageStatus
+          conditions={source.conditions}
+          suspended={source.suspended}
+        />
+        <SyncActions
+          name={name}
+          namespace={namespace}
+          clusterName={clusterName}
+          kind={type}
+          suspended={suspended}
+          hideDropdown
+          customActions={customActions}
+        />
+      </Flex>
 
       <SubRouterTabs rootPath={`${path}/details`}>
         <RouterTab name="Details" path={`${path}/details`}>

ui/components/Text.tsx

@@ -14,6 +14,7 @@ export interface TextProps {
   noWrap?: boolean;
   titleHeight?: boolean;
   pointer?: boolean;
+  minWidth?: string;
 }
 
 function textTransform(props) {
@@ -44,6 +45,7 @@ const Text = styled.span<TextProps>`
   ${(props) => props.noWrap && "white-space: nowrap"};
   ${(props) => props.titleHeight && "line-height: 1.75"};
   ${(props) => props.pointer && "cursor: pointer"};
+  ${(props) => props.minWidth && `min-width: ${props.minWidth}px`};
 `;
 
 Text.defaultProps = {