From 18960a26ca8149581f6c413c12f9a18964259694 Mon Sep 17 00:00:00 2001 From: TheGostKasper Date: Thu, 31 Aug 2023 13:18:52 +0300 Subject: [PATCH 1/7] fix inconsistency in list component --- ui/components/InfoList.tsx | 41 +++---------- .../Policies/PolicyDetails/PolicyDetails.tsx | 6 +- .../PolicyViolationDetails.tsx | 2 +- ui/components/Policies/Utils/HeaderRows.tsx | 60 +++++++++++-------- .../Policies/__tests__/HeaderRows.test.tsx | 2 +- ui/components/Text.tsx | 2 + ui/hooks/inventory.ts | 2 +- ui/index.ts | 3 + 8 files changed, 54 insertions(+), 64 deletions(-) diff --git a/ui/components/InfoList.tsx b/ui/components/InfoList.tsx index 2a601def40..d27a14a6e0 100644 --- a/ui/components/InfoList.tsx +++ b/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 ( - - - {_.map(items, ([k, v], index) => ( - - - - - ))} - -
- - {k}: - - {v || "-"}
+ + {items.map(([k, v]) => ( + + ))} + ); } -)` - 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; diff --git a/ui/components/Policies/PolicyDetails/PolicyDetails.tsx b/ui/components/Policies/PolicyDetails/PolicyDetails.tsx index fcb6672f7c..0318f2a98d 100644 --- a/ui/components/Policies/PolicyDetails/PolicyDetails.tsx +++ b/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 { Header, HeaderRows } from "../Utils/HeaderRows"; import { MarkdownEditor } from "../Utils/MarkdownEditor"; import Parameters from "../Utils/Parameters"; import PolicyMode from "../Utils/PolicyMode"; @@ -61,7 +61,7 @@ const PolicyDetails = ({ policy }: Props) => { rowkey: "Tags", children: ( - {!!tags && tags?.length > 0 ? ( + {tags?.length > 0 ? ( tags?.map((tag) => ) ) : ( There is no tags for this policy @@ -89,7 +89,7 @@ const PolicyDetails = ({ policy }: Props) => { rowkey: "Targeted K8s Kind", children: ( - {targets?.kinds?.length ? ( + {targets?.kinds?.length > 0 ? ( targets?.kinds?.map((kind) => ) ) : ( There is no kinds for this policy diff --git a/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx b/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx index 33386f5b8e..95b0487437 100644 --- a/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx +++ b/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 { Header, HeaderRows } from "../Utils/HeaderRows"; import { MarkdownEditor } from "../Utils/MarkdownEditor"; import Parameters from "../Utils/Parameters"; import { SectionWrapper } from "../Utils/PolicyUtils"; diff --git a/ui/components/Policies/Utils/HeaderRows.tsx b/ui/components/Policies/Utils/HeaderRows.tsx index 531ca8139d..7830eda08d 100644 --- a/ui/components/Policies/Utils/HeaderRows.tsx +++ b/ui/components/Policies/Utils/HeaderRows.tsx @@ -12,35 +12,43 @@ export interface Header { interface Props { headers: Header[]; } -const HeaderRows = ({ headers }: Props) => { +export const HeaderRows = ({ headers }: Props) => { return ( - {headers.map((h) => { - return ( - h.visible !== false && ( - - - {h.rowkey}: - - {h.children ? ( - h.children - ) : ( - - {h.value || "-"} - - )} - - ) - ); - })} + {headers + .filter((h) => h.visible) + .map((h) => { + return ( + + {h.children} + + ); + })} ); }; -export default HeaderRows; +export const RowHeader = ({ + children, + rowkey, + value, +}: { + children?: any; + rowkey: string; + value: string | JSX.Element | undefined | any; +}) => { + return ( + + + {rowkey}: + + {children ? ( + children + ) : ( + + {value || "--"} + + )} + + ); +}; diff --git a/ui/components/Policies/__tests__/HeaderRows.test.tsx b/ui/components/Policies/__tests__/HeaderRows.test.tsx index 8e87500ecb..ee100df7fa 100644 --- a/ui/components/Policies/__tests__/HeaderRows.test.tsx +++ b/ui/components/Policies/__tests__/HeaderRows.test.tsx @@ -1,7 +1,7 @@ import { render } from "@testing-library/react"; import React from "react"; import { withTheme } from "../../../lib/test-utils"; -import HeaderRows, { Header } from "../Utils/HeaderRows"; +import { Header, HeaderRows } from "../Utils/HeaderRows"; const headers: Header[] = [ { diff --git a/ui/components/Text.tsx b/ui/components/Text.tsx index dfccce2c66..1e160e30b4 100644 --- a/ui/components/Text.tsx +++ b/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` ${(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 = { diff --git a/ui/hooks/inventory.ts b/ui/hooks/inventory.ts index b3cdd25799..4bad1edac4 100644 --- a/ui/hooks/inventory.ts +++ b/ui/hooks/inventory.ts @@ -21,7 +21,7 @@ export function useGetInventory( withChildren?: boolean, opts: ReactQueryOptions = { retry: false, - refetchInterval: 5000, + refetchInterval: (data) => (data ? false : 5000), } ) { const { api } = useContext(CoreClientContext); diff --git a/ui/index.ts b/ui/index.ts index 58470e1870..c382ae0474 100644 --- a/ui/index.ts +++ b/ui/index.ts @@ -49,6 +49,7 @@ import PolicyDetails from "./components/Policies/PolicyDetails/PolicyDetails"; import { PolicyTable } from "./components/Policies/PolicyList/PolicyTable"; import { ViolationDetails } from "./components/Policies/PolicyViolations/PolicyViolationDetails"; import { PolicyViolationsList } from "./components/Policies/PolicyViolations/Table"; +import { HeaderRows, RowHeader } from "./components/Policies/Utils/HeaderRows"; import Severity from "./components/Policies/Utils/Severity"; import ProviderDetail from "./components/ProviderDetail"; import ReconciledObjectsTable from "./components/ReconciledObjectsTable"; @@ -251,4 +252,6 @@ export { useRequestState, useSyncFluxObject, useToggleSuspend, + HeaderRows, + RowHeader, }; From 091cfdbe3d86dd5b16ab66b613b3065257104ee1 Mon Sep 17 00:00:00 2001 From: TheGostKasper Date: Thu, 31 Aug 2023 14:42:46 +0300 Subject: [PATCH 2/7] export default HeaderRow --- .../Policies/PolicyDetails/PolicyDetails.tsx | 2 +- .../PolicyViolationDetails.tsx | 2 +- ui/components/Policies/Utils/HeaderRows.tsx | 46 ++++++++----------- .../Policies/__tests__/HeaderRows.test.tsx | 2 +- ui/index.ts | 8 ++-- 5 files changed, 26 insertions(+), 34 deletions(-) diff --git a/ui/components/Policies/PolicyDetails/PolicyDetails.tsx b/ui/components/Policies/PolicyDetails/PolicyDetails.tsx index 0318f2a98d..96e32a852a 100644 --- a/ui/components/Policies/PolicyDetails/PolicyDetails.tsx +++ b/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 { Header, HeaderRows } from "../Utils/HeaderRows"; +import HeaderRows, { Header } from "../Utils/HeaderRows"; import { MarkdownEditor } from "../Utils/MarkdownEditor"; import Parameters from "../Utils/Parameters"; import PolicyMode from "../Utils/PolicyMode"; diff --git a/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx b/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx index 95b0487437..9b9312eef4 100644 --- a/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx +++ b/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 { Header, HeaderRows } from "../Utils/HeaderRows"; +import HeaderRows,{ Header } from "../Utils/HeaderRows"; import { MarkdownEditor } from "../Utils/MarkdownEditor"; import Parameters from "../Utils/Parameters"; import { SectionWrapper } from "../Utils/PolicyUtils"; diff --git a/ui/components/Policies/Utils/HeaderRows.tsx b/ui/components/Policies/Utils/HeaderRows.tsx index 7830eda08d..75f3f08df2 100644 --- a/ui/components/Policies/Utils/HeaderRows.tsx +++ b/ui/components/Policies/Utils/HeaderRows.tsx @@ -8,11 +8,26 @@ export interface Header { children?: any; visible?: boolean; } - +export function RowHeader({ children, rowkey, value }: Header) { + return ( + + + {rowkey}: + + {children ? ( + children + ) : ( + + {value || "--"} + + )} + + ); +} interface Props { headers: Header[]; } -export const HeaderRows = ({ headers }: Props) => { +function HeaderRows({ headers }: Props) { return ( {headers @@ -26,29 +41,6 @@ export const HeaderRows = ({ headers }: Props) => { })} ); -}; +} -export const RowHeader = ({ - children, - rowkey, - value, -}: { - children?: any; - rowkey: string; - value: string | JSX.Element | undefined | any; -}) => { - return ( - - - {rowkey}: - - {children ? ( - children - ) : ( - - {value || "--"} - - )} - - ); -}; +export default HeaderRows; diff --git a/ui/components/Policies/__tests__/HeaderRows.test.tsx b/ui/components/Policies/__tests__/HeaderRows.test.tsx index ee100df7fa..8e87500ecb 100644 --- a/ui/components/Policies/__tests__/HeaderRows.test.tsx +++ b/ui/components/Policies/__tests__/HeaderRows.test.tsx @@ -1,7 +1,7 @@ import { render } from "@testing-library/react"; import React from "react"; import { withTheme } from "../../../lib/test-utils"; -import { Header, HeaderRows } from "../Utils/HeaderRows"; +import HeaderRows, { Header } from "../Utils/HeaderRows"; const headers: Header[] = [ { diff --git a/ui/index.ts b/ui/index.ts index c382ae0474..d7aabbcc09 100644 --- a/ui/index.ts +++ b/ui/index.ts @@ -49,7 +49,7 @@ import PolicyDetails from "./components/Policies/PolicyDetails/PolicyDetails"; import { PolicyTable } from "./components/Policies/PolicyList/PolicyTable"; import { ViolationDetails } from "./components/Policies/PolicyViolations/PolicyViolationDetails"; import { PolicyViolationsList } from "./components/Policies/PolicyViolations/Table"; -import { HeaderRows, RowHeader } from "./components/Policies/Utils/HeaderRows"; +import HeaderRows ,{ RowHeader } from "./components/Policies/Utils/HeaderRows"; import Severity from "./components/Policies/Utils/Severity"; import ProviderDetail from "./components/ProviderDetail"; import ReconciledObjectsTable from "./components/ReconciledObjectsTable"; @@ -146,8 +146,8 @@ export { DetailModal, DialogYamlView, DirectedGraph, - EventsTable, ErrorList, + EventsTable, Flex, FluxObject, FluxObjectsTable, @@ -156,6 +156,7 @@ export { GitRepository, GitRepositoryDetail, Graph, + HeaderRows, HelmChart, HelmChartDetail, HelmRelease, @@ -205,6 +206,7 @@ export { ReconciliationGraph, RequestStateHandler, RouterTab, + RowHeader, Severity, SignIn, SourceLink, @@ -252,6 +254,4 @@ export { useRequestState, useSyncFluxObject, useToggleSuspend, - HeaderRows, - RowHeader, }; From 4bf9ea0840c94fde5999d6d64f6580f87ffb945b Mon Sep 17 00:00:00 2001 From: TheGostKasper Date: Sun, 3 Sep 2023 12:30:21 +0300 Subject: [PATCH 3/7] update HeaderRows Props --- .../Policies/PolicyDetails/PolicyDetails.tsx | 6 +-- .../PolicyViolationDetails.tsx | 6 +-- ui/components/Policies/Utils/HeaderRows.tsx | 41 +++++++++++++------ .../Policies/__tests__/HeaderRows.test.tsx | 8 ++-- ui/index.ts | 5 ++- 5 files changed, 41 insertions(+), 25 deletions(-) diff --git a/ui/components/Policies/PolicyDetails/PolicyDetails.tsx b/ui/components/Policies/PolicyDetails/PolicyDetails.tsx index 96e32a852a..31753c563d 100644 --- a/ui/components/Policies/PolicyDetails/PolicyDetails.tsx +++ b/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, @@ -102,7 +102,7 @@ const PolicyDetails = ({ policy }: Props) => { - + diff --git a/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx b/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx index 9b9312eef4..368c77cac9 100644 --- a/ui/components/Policies/PolicyViolations/PolicyViolationDetails.tsx +++ b/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 ( - +
    {occurrences?.map((item) => ( diff --git a/ui/components/Policies/Utils/HeaderRows.tsx b/ui/components/Policies/Utils/HeaderRows.tsx index 75f3f08df2..90f5e85892 100644 --- a/ui/components/Policies/Utils/HeaderRows.tsx +++ b/ui/components/Policies/Utils/HeaderRows.tsx @@ -2,13 +2,13 @@ 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 }: Header) { +export function RowHeader({ children, rowkey, value }: RowItem) { return ( @@ -25,20 +25,35 @@ export function RowHeader({ children, rowkey, value }: Header) { ); } interface Props { - headers: Header[]; + items: RowItem[]; } -function HeaderRows({ headers }: Props) { +const HeaderRows = ({ items }: Props) => { return ( - {headers - .filter((h) => h.visible) - .map((h) => { - return ( - - {h.children} - - ); - })} + {items.map((h) => { + return ( + h.visible !== false && ( + + + {h.rowkey}: + + {h.children ? ( + h.children + ) : ( + + {h.value || "-"} + + )} + + ) + ); + })} ); } diff --git a/ui/components/Policies/__tests__/HeaderRows.test.tsx b/ui/components/Policies/__tests__/HeaderRows.test.tsx index 8e87500ecb..42c220058b 100644 --- a/ui/components/Policies/__tests__/HeaderRows.test.tsx +++ b/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()); - headers.forEach((h) => { + render(withTheme()); + items.forEach((h) => { const ele = document.querySelector( `[data-testid="${h.rowkey}"]` ) as HTMLElement; diff --git a/ui/index.ts b/ui/index.ts index d7aabbcc09..8b9d30b858 100644 --- a/ui/index.ts +++ b/ui/index.ts @@ -49,7 +49,7 @@ import PolicyDetails from "./components/Policies/PolicyDetails/PolicyDetails"; import { PolicyTable } from "./components/Policies/PolicyList/PolicyTable"; import { ViolationDetails } from "./components/Policies/PolicyViolations/PolicyViolationDetails"; import { PolicyViolationsList } from "./components/Policies/PolicyViolations/Table"; -import HeaderRows ,{ RowHeader } from "./components/Policies/Utils/HeaderRows"; +import HeaderRows, { RowHeader } from "./components/Policies/Utils/HeaderRows"; import Severity from "./components/Policies/Utils/Severity"; import ProviderDetail from "./components/ProviderDetail"; import ReconciledObjectsTable from "./components/ReconciledObjectsTable"; @@ -253,5 +253,6 @@ export { useNavigation, useRequestState, useSyncFluxObject, - useToggleSuspend, + useToggleSuspend }; + From c05741494fc43680b7b0282b79d950d93941058f Mon Sep 17 00:00:00 2001 From: TheGostKasper Date: Sun, 3 Sep 2023 13:58:53 +0300 Subject: [PATCH 4/7] remove unnecessary spaces --- ui/components/AutomationDetail.tsx | 9 ++++----- ui/components/HealthCheckAgg.tsx | 2 +- ui/components/Metadata.tsx | 21 +++++++-------------- ui/components/PageStatus.tsx | 10 +++------- 4 files changed, 15 insertions(+), 27 deletions(-) diff --git a/ui/components/AutomationDetail.tsx b/ui/components/AutomationDetail.tsx index a2cba0f1f1..d15f0e1fc4 100644 --- a/ui/components/AutomationDetail.tsx +++ b/ui/components/AutomationDetail.tsx @@ -209,12 +209,12 @@ function AutomationDetail({ )} -
    +
    {info.map(([k, v]) => { return ( - + {k}: {v || "-"} @@ -246,8 +246,7 @@ export default styled(AutomationDetail).attrs({ width: 100%; } .collapse-wrapper { - padding: 16px 44px; - width: 100%; + padding: 16px; } .grid { width: 100%; @@ -255,6 +254,6 @@ export default styled(AutomationDetail).attrs({ gap: 8px; } .grid-items { - grid-template-columns: repeat(auto-fit, minmax(calc(50% - 8px), 1fr)); + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); } `; diff --git a/ui/components/HealthCheckAgg.tsx b/ui/components/HealthCheckAgg.tsx index cb8f375cf2..c429f53674 100644 --- a/ui/components/HealthCheckAgg.tsx +++ b/ui/components/HealthCheckAgg.tsx @@ -45,7 +45,7 @@ interface Prop { const HealthCheckAgg = ({ health }: Prop) => { return ( - + {health.unhealthy > 0 ? ( <> 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,22 +43,22 @@ function Metadata({ metadata = [], labels = [], className }: Props) { }); return ( - + {metadataCopy.length > 0 && ( - <> + Metadata - + )} {labels.length > 0 && ( - <> + Labels - + {labels.map((label, index) => { return ( ); })} - - - + + )} ); diff --git a/ui/components/PageStatus.tsx b/ui/components/PageStatus.tsx index 85b78dfb8a..cfd73db9c8 100644 --- a/ui/components/PageStatus.tsx +++ b/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 ( - - + + - {msg} {showAll && (
    +
    +
    - - Labels - -
    - label - : - label + Labels - - goose - : - goose - + + label + : + label + + + goose + : + goose + +
    -
    `;