Move RowHeader to shared component

ui-cra/src/App.tsx

@@ -77,7 +77,7 @@ const GlobalStyle = createGlobalStyle`
     margin-top: 50px;
   }
  ::-webkit-scrollbar-thumb {
-    background-color: ${props => props.theme.colors.neutral20};
+    background-color: ${props => props.theme.colors.neutral30};
     border-radius: 5px;
   }
  ::-webkit-scrollbar-thumb:hover {

ui-cra/src/components/Policies/PolicyDetails/HeaderSection.tsx

@@ -8,7 +8,7 @@ import remarkGfm from 'remark-gfm';
 import {
   generateRowHeaders,
   SectionRowHeader,
-} from '../../ProgressiveDelivery/SharedComponent/CanaryRowHeader';
+} from '../../RowHeader';
 import { useFeatureFlags } from '@weaveworks/weave-gitops';
 
 function HeaderSection({

ui-cra/src/components/PolicyViolations/ViolationDetails/ViolationDetails.tsx

@@ -7,7 +7,7 @@ import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Link } from 'react-router-dom';
-import { generateRowHeaders } from '../../ProgressiveDelivery/SharedComponent/CanaryRowHeader';
+import { generateRowHeaders } from '../../RowHeader';
 
 interface IViolationDetailsProps {
   violation: PolicyValidation | undefined;

ui-cra/src/components/ProgressiveDelivery/CanaryDetails/Details/DetailsSection.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { getKindRoute } from '../../../../utils/nav';
 import { useCanaryStyle } from '../../CanaryStyles';
 import { getDeploymentStrategyIcon } from '../../ListCanaries/Table';
-import CanaryRowHeader from '../../SharedComponent/CanaryRowHeader';
+import RowHeader from '../../../RowHeader';
 import DynamicTable from '../../SharedComponent/DynamicTable';
 
 const DetailsSection = ({
@@ -29,13 +29,13 @@ const DetailsSection = ({
   };
   return (
     <>
-      <CanaryRowHeader rowkey="Cluster" value={canary.clusterName} />
-      <CanaryRowHeader rowkey="Namespace" value={canary.namespace} />
-      <CanaryRowHeader
+      <RowHeader rowkey="Cluster" value={canary.clusterName} />
+      <RowHeader rowkey="Namespace" value={canary.namespace} />
+      <RowHeader
         rowkey="Target"
         value={`${canary.targetReference?.kind}/${canary.targetReference?.name}`}
       />
-      <CanaryRowHeader
+      <RowHeader
         rowkey="Application"
         value={
           automation?.kind && automation?.name ? (
@@ -53,15 +53,15 @@ const DetailsSection = ({
           )
         }
       />
-      <CanaryRowHeader rowkey="Deployment Strategy" value={undefined}>
+      <RowHeader rowkey="Deployment Strategy" value={undefined}>
         {!!canary.deploymentStrategy && (
           <span className={classes.straegyIcon}>
             {canary.deploymentStrategy}{' '}
             {getDeploymentStrategyIcon(canary.deploymentStrategy)}
           </span>
         )}
-      </CanaryRowHeader>
-      <CanaryRowHeader rowkey="Provider" value={canary.provider} />
+      </RowHeader>
+      <RowHeader rowkey="Provider" value={canary.provider} />
 
       <div className={`${classes.sectionHeaderWrapper} ${classes.cardTitle}`}>
         STATUS

ui-cra/src/components/ProgressiveDelivery/SharedComponent/DynamicTable.tsx

@@ -1,5 +1,5 @@
 import { Size, Table, TableBody } from '@material-ui/core';
-import { KeyValueRow } from './CanaryRowHeader';
+import { KeyValueRow } from '../../RowHeader';
 
 const DynamicTable = ({
   obj,

ui-cra/src/components/ProgressiveDelivery/SharedComponent/CanaryRowHeader.tsx → ui-cra/src/components/RowHeader.tsx

@@ -6,7 +6,7 @@ const { normal } = theme.fontSizes;
 const { small, xs } = theme.spacing;
 const { neutral30, neutral40 } = theme.colors;
 
-const RowHeader = styled.div`
+const RowHeaderWrapper = styled.div`
   margin: ${small} 0;
   display: flex;
   justify-content: start;
@@ -34,9 +34,9 @@ export const generateRowHeaders = (rows: Array<SectionRowHeader>) => {
   return rows.map(r => {
 
     return r.hidden === true ? null : (
-      <CanaryRowHeader rowkey={r.rowkey} value={r.value} key={r.rowkey}>
+      <RowHeader rowkey={r.rowkey} value={r.value} key={r.rowkey}>
         {r.children}
-      </CanaryRowHeader>
+      </RowHeader>
     );
   });
 };
@@ -74,7 +74,7 @@ export function KeyValueRow({
   );
 }
 
-function CanaryRowHeader({
+function RowHeader({
   children,
   rowkey,
   value,
@@ -84,11 +84,11 @@ function CanaryRowHeader({
   value: string | JSX.Element | undefined;
 }) {
   return (
-    <RowHeader data-testid={rowkey}>
+    <RowHeaderWrapper data-testid={rowkey}>
       <RowTitle>{rowkey} :</RowTitle>
       <RowBody>{children || value || '--'}</RowBody>
-    </RowHeader>
+    </RowHeaderWrapper>
   );
 }
 
-export default CanaryRowHeader;
+export default RowHeader;