Address Crs

Author: kimlisa

web/packages/shared/components/SlidingSidePanel/InfoGuide/InfoGuide.tsx

@@ -48,9 +48,9 @@ const InfoGuideHeader = ({
   title: customTitle,
 }: {
   onClose(): void;
-  title?: string | JSX.Element;
+  title?: React.ReactNode;
 }) => {
-  let title = <Text bold>Page Info</Text>;
+  let title: React.ReactNode = <Text bold>Page Info</Text>;
   if (customTitle) {
     if (typeof customTitle === 'string') {
       title = <Text bold>{customTitle}</Text>;

web/packages/shared/components/UnifiedResources/CardsView/CardsView.tsx

@@ -39,25 +39,18 @@ export function CardsView({
   return (
     <CardsContainer className="CardsContainer" gap={2}>
       {mappedResources.map(
-        ({ item, key, onShowStatusInfo, viewingUnhealthyStatus }) => (
+        ({ item, key, onShowStatusInfo, showingStatusInfo }) => (
           <ResourceCard
             key={key}
-            name={item.name}
-            ActionButton={item.ActionButton}
-            primaryIconName={item.primaryIconName}
+            viewItem={item}
             onLabelClick={onLabelClick}
-            SecondaryIcon={item.SecondaryIcon}
-            cardViewProps={item.cardViewProps}
-            labels={item.labels}
             pinned={pinnedResources.includes(key)}
-            requiresRequest={item.requiresRequest}
             pinningSupport={pinningSupport}
             selected={selectedResources.includes(key)}
             selectResource={() => onSelectResource(key)}
             pinResource={() => onPinResource(key)}
-            status={item.status}
             onShowStatusInfo={onShowStatusInfo}
-            viewingUnhealthyStatus={viewingUnhealthyStatus}
+            showingStatusInfo={showingStatusInfo}
           />
         )
       )}

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.story.tsx

@@ -134,15 +134,9 @@ export const Cards: Story = {
                 selectResource={() => {}}
                 selected={false}
                 pinningSupport={PinningSupport.Supported}
-                name={res.name}
-                primaryIconName={res.primaryIconName}
-                SecondaryIcon={res.SecondaryIcon}
-                cardViewProps={res.cardViewProps}
-                labels={res.labels}
-                ActionButton={res.ActionButton}
                 onShowStatusInfo={() => null}
-                viewingUnhealthyStatus={false}
-                status={res.status}
+                showingStatusInfo={false}
+                viewItem={res}
               />
             ))}
           </Grid>

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx

@@ -30,12 +30,12 @@ import { CopyButton } from '../shared/CopyButton';
 import {
   BackgroundColorProps,
   getBackgroundColor,
+  getStatusBackgroundColor,
 } from '../shared/getBackgroundColor';
 import { PinButton } from '../shared/PinButton';
 import { SingleLineBox } from '../shared/SingleLineBox';
-import { getStatusBackgroundColor } from '../shared/StatusInfo';
 import { ResourceItemProps } from '../types';
-import { WarningRightEdgeBadgeSvg } from './WarningSideBadgeSvg';
+import { WarningRightEdgeBadgeSvg } from './WarningRightEdgeBadgeSvg';
 
 // Since we do a lot of manual resizing and some absolute positioning, we have
 // to put some layout constants in place here.
@@ -54,23 +54,26 @@ const ResTypeIconBox = styled(Box)`
 `;
 
 export function ResourceCard({
-  name,
-  primaryIconName,
-  SecondaryIcon,
   onLabelClick,
-  cardViewProps,
-  ActionButton,
-  labels,
   pinningSupport,
   pinned,
   pinResource,
   selectResource,
-  requiresRequest,
   selected,
-  status,
   onShowStatusInfo,
-  viewingUnhealthyStatus,
-}: Omit<ResourceItemProps, 'listViewProps' | 'expandAllLabels'>) {
+  showingStatusInfo,
+  viewItem,
+}: Omit<ResourceItemProps, 'expandAllLabels'>) {
+  const {
+    name,
+    primaryIconName,
+    SecondaryIcon,
+    cardViewProps,
+    ActionButton,
+    labels,
+    requiresRequest,
+    status,
+  } = viewItem;
   const { primaryDesc, secondaryDesc } = cardViewProps;
 
   const [showMoreLabelsButton, setShowMoreLabelsButton] = useState(false);
@@ -83,10 +86,20 @@ export function ResourceCard({
   const labelsInnerContainer = useRef<HTMLDivElement>(null);
   const collapseTimeout = useRef<ReturnType<typeof setTimeout>>(null);
 
+  // This saves the height of the card on initial render. It's the full
+  // height when all contents fill up the card.
+  // This was required for the WarningRightEdgeBadgeIcon to stay in place
+  // when we "showAllLabels". Showing all labels makes the inner container
+  // pop out, and the container (where the svg is held) shrunk in size
+  // resulting in the auto-sizing svg to lose its place.
+  const [baseCardHeight, setBaseCardHeight] = useState(0);
+
   // This effect installs a resize observer whose purpose is to detect the size
   // of the component that contains all the labels. If this component is taller
   // than the height of a single label row, we show a "+x more" button.
   useLayoutEffect(() => {
+    setBaseCardHeight(innerContainer.current?.getBoundingClientRect().height);
+
     if (!labelsInnerContainer.current) return;
 
     // TODO(ravicious): Use useResizeObserver instead. Ensure that the callback passed to
@@ -169,7 +182,7 @@ export function ResourceCard({
     <CardContainer
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      viewingUnhealthyStatus={viewingUnhealthyStatus}
+      showingStatusInfo={showingStatusInfo}
     >
       <CardOuterContainer
         showAllLabels={showAllLabels}
@@ -186,9 +199,12 @@ export function ResourceCard({
           pinned={pinned}
           requiresRequest={requiresRequest}
           selected={selected}
-          viewingUnhealthyStatus={viewingUnhealthyStatus}
+          showingStatusInfo={showingStatusInfo}
           hasUnhealthyStatus={hasUnhealthyStatus}
+          // we set extra padding to push contents to the right to make
+          // space for the WarningRightEdgeBadgeIcon.
           {...(hasUnhealthyStatus && !showAllLabels && { pr: '35px' })}
+          {...(hasUnhealthyStatus && showAllLabels && { pr: '7px' })}
         >
           <HoverTooltip tipContent={selected ? 'Deselect' : 'Select'}>
             <CheckboxInput
@@ -257,7 +273,10 @@ export function ResourceCard({
               )}
             </Flex>
             <LabelsContainer showAll={showAllLabels}>
-              <LabelsInnerContainer ref={labelsInnerContainer}>
+              <LabelsInnerContainer
+                ref={labelsInnerContainer}
+                hasUnhealthyStatus={hasUnhealthyStatus}
+              >
                 <MoreLabelsButton
                   style={{
                     visibility:
@@ -293,23 +312,25 @@ export function ResourceCard({
           )}
         </CardInnerContainer>
       </CardOuterContainer>
-      {/* This is to let the StatusWarningEdgeIcon stay in place while inner
+      {/* This is to let the WarningRightEdgeBadgeIcon stay in place while inner
       container expands vertically from rendering all labels. */}
       {hasUnhealthyStatus && showAllLabels && (
-        <WarningRightEdgeBadgeIcon onClick={onShowStatusInfo} />
+        <Box height={`${baseCardHeight}px`} css={{ position: 'relative' }}>
+          <WarningRightEdgeBadgeIcon />
+        </Box>
       )}
     </CardContainer>
   );
 }
 
-const WarningRightEdgeBadgeIcon = ({ onClick }: { onClick(): void }) => {
+const WarningRightEdgeBadgeIcon = ({ onClick }: { onClick?(): void }) => {
   return (
     <Box
       onClick={onClick}
       css={`
         position: absolute;
         top: 0;
-        right: 0px;
+        right: 0;
         cursor: pointer;
         height: 100%;
       `}
@@ -331,12 +352,15 @@ const WarningRightEdgeBadgeIcon = ({ onClick }: { onClick(): void }) => {
  * outer container.
  */
 const CardContainer = styled(Box)<{
-  viewingUnhealthyStatus: boolean;
+  showingStatusInfo: boolean;
 }>`
   position: relative;
   .resource-health-status-svg {
+    width: 100%;
+    height: 100%;
+
     fill: ${p =>
-      p.viewingUnhealthyStatus
+      p.showingStatusInfo
         ? p.theme.colors.interactive.solid.alert.active
         : p.theme.colors.interactive.solid.alert.default};
   }
@@ -358,7 +382,7 @@ const CardOuterContainer = styled(Box)<{
     css`
       position: absolute;
       left: 0;
-      // The padding is required to show the StatusWarningEdgeIcon
+      // The padding is required to show the WarningRightEdgeBadgeIcon
       right: ${props.hasUnhealthyStatus ? '28px' : 0};
       z-index: 1;
     `}
@@ -404,15 +428,15 @@ const CardInnerContainer = styled(Flex)<BackgroundColorProps>`
     css`
       border: 2px solid ${p.theme.colors.interactive.solid.alert.default};
       background-color: ${getStatusBackgroundColor({
-        viewingUnhealthyStatus: p.viewingUnhealthyStatus,
+        showingStatusInfo: p.showingStatusInfo,
         theme: p.theme,
         action: '',
         viewType: 'card',
       })};
     `}
 
   ${p =>
-    p.viewingUnhealthyStatus &&
+    p.showingStatusInfo &&
     css`
       border: 2px solid ${p.theme.colors.interactive.solid.alert.active};
     `}
@@ -426,7 +450,7 @@ const CardInnerContainer = styled(Flex)<BackgroundColorProps>`
       css`
         border-color: ${p.theme.colors.interactive.solid.alert.hover};
         background-color: ${getStatusBackgroundColor({
-          viewingUnhealthyStatus: p.viewingUnhealthyStatus,
+          showingStatusInfo: p.showingStatusInfo,
           theme: p.theme,
           action: 'hover',
           viewType: 'card',
@@ -459,12 +483,16 @@ const StyledLabel = styled(Label)`
  * The inner labels container always adapts to the size of labels.  Its height
  * is measured by the resize observer.
  */
-const LabelsInnerContainer = styled(Flex)`
+const LabelsInnerContainer = styled(Flex)<{ hasUnhealthyStatus: boolean }>`
   position: relative;
   flex-wrap: wrap;
   align-items: start;
   gap: ${props => props.theme.space[1]}px;
-  padding-right: 60px;
+  // Padding is required to prevent the more label button to not collide
+  // with the rendered labels. Just a tiny bit more padding needed to
+  // accomodate contents getting pushed more to the right when a
+  // WarningRightEdgeBadgeIcon renders.
+  padding-right: ${p => (p.hasUnhealthyStatus ? '75px' : '74px')};
 `;
 
 /**

web/packages/shared/components/UnifiedResources/CardsView/WarningSideBadgeSvg.tsx renamed to web/packages/shared/components/UnifiedResources/CardsView/WarningRightEdgeBadgeSvg.tsx

@@ -16,6 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/**
+ * This svg is different from existing warning svg's in that it's specifically
+ * tailored to fit the design of unified ResourceCard.tsx to the right edge
+ * of the component.
+ */
 export function WarningRightEdgeBadgeSvg() {
   return (
     <svg
@@ -25,10 +30,6 @@ export function WarningRightEdgeBadgeSvg() {
       viewBox="0 0 32 102"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
       preserveAspectRatio="none"
     >
       <path d="M24 0H0V2C3.31371 2 6 4.68629 6 8H32C32 3.58172 28.4183 0 24 0Z" />

web/packages/shared/components/UnifiedResources/ListView/ListView.tsx

@@ -38,26 +38,19 @@ export function ListView({
   return (
     <Flex className="ListContainer">
       {mappedResources.map(
-        ({ item, key, onShowStatusInfo, viewingUnhealthyStatus }) => (
+        ({ item, key, onShowStatusInfo, showingStatusInfo }) => (
           <ResourceListItem
             key={key}
-            name={item.name}
-            ActionButton={item.ActionButton}
-            primaryIconName={item.primaryIconName}
+            viewItem={item}
             onLabelClick={onLabelClick}
-            SecondaryIcon={item.SecondaryIcon}
-            listViewProps={item.listViewProps}
-            labels={item.labels}
             pinned={pinnedResources.includes(key)}
             pinningSupport={pinningSupport}
-            requiresRequest={item.requiresRequest}
             selected={selectedResources.includes(key)}
             selectResource={() => onSelectResource(key)}
             pinResource={() => onPinResource(key)}
             expandAllLabels={expandAllLabels}
-            status={item.status}
             onShowStatusInfo={onShowStatusInfo}
-            viewingUnhealthyStatus={viewingUnhealthyStatus}
+            showingStatusInfo={showingStatusInfo}
           />
         )
       )}

web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.story.tsx

@@ -117,16 +117,10 @@ export const ListItems: Story = {
             selectResource={() => {}}
             selected={false}
             pinningSupport={PinningSupport.Supported}
-            name={res.name}
-            primaryIconName={res.primaryIconName}
-            SecondaryIcon={res.SecondaryIcon}
-            listViewProps={res.listViewProps}
-            labels={res.labels}
-            ActionButton={res.ActionButton}
             expandAllLabels={false}
             onShowStatusInfo={() => null}
-            viewingUnhealthyStatus={false}
-            status={res.status}
+            showingStatusInfo={false}
+            viewItem={res}
           />
         ))}
       </Flex>