Web/Teleterm: Add status state to shared unified resources view (#53748)

- Only supported for database atm
- Adds info guide side panel for unified resources view in Teleterm

Author: kimlisa

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

@@ -38,24 +38,22 @@ export function CardsView({
 }: ResourceViewProps) {
   return (
     <CardsContainer className="CardsContainer" gap={2}>
-      {mappedResources.map(({ item, key }) => (
-        <ResourceCard
-          key={key}
-          name={item.name}
-          ActionButton={item.ActionButton}
-          primaryIconName={item.primaryIconName}
-          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)}
-        />
-      ))}
+      {mappedResources.map(
+        ({ item, key, onShowStatusInfo, showingStatusInfo }) => (
+          <ResourceCard
+            key={key}
+            viewItem={item}
+            onLabelClick={onLabelClick}
+            pinned={pinnedResources.includes(key)}
+            pinningSupport={pinningSupport}
+            selected={selectedResources.includes(key)}
+            selectResource={() => onSelectResource(key)}
+            pinResource={() => onPinResource(key)}
+            onShowStatusInfo={onShowStatusInfo}
+            showingStatusInfo={showingStatusInfo}
+          />
+        )
+      )}
       {isProcessing && (
         <LoadingSkeleton count={FETCH_MORE_SIZE} Element={<LoadingCard />} />
       )}

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

@@ -134,12 +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}
+                showingStatusInfo={false}
+                viewItem={res}
               />
             ))}
           </Grid>

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

@@ -30,9 +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 { ResourceItemProps } from '../types';
+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.
@@ -51,20 +54,26 @@ const ResTypeIconBox = styled(Box)`
 `;
 
 export function ResourceCard({
-  name,
-  primaryIconName,
-  SecondaryIcon,
   onLabelClick,
-  cardViewProps,
-  ActionButton,
-  labels,
   pinningSupport,
   pinned,
   pinResource,
   selectResource,
-  requiresRequest,
   selected,
-}: Omit<ResourceItemProps, 'listViewProps' | 'expandAllLabels'>) {
+  onShowStatusInfo,
+  showingStatusInfo,
+  viewItem,
+}: Omit<ResourceItemProps, 'expandAllLabels'>) {
+  const {
+    name,
+    primaryIconName,
+    SecondaryIcon,
+    cardViewProps,
+    ActionButton,
+    labels,
+    requiresRequest,
+    status,
+  } = viewItem;
   const { primaryDesc, secondaryDesc } = cardViewProps;
 
   const [showMoreLabelsButton, setShowMoreLabelsButton] = useState(false);
@@ -157,12 +166,18 @@ export function ResourceCard({
     }
   };
 
+  const hasUnhealthyStatus = status && status !== 'healthy';
+
   return (
     <CardContainer
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
+      showingStatusInfo={showingStatusInfo}
     >
-      <CardOuterContainer showAllLabels={showAllLabels}>
+      <CardOuterContainer
+        showAllLabels={showAllLabels}
+        hasUnhealthyStatus={hasUnhealthyStatus}
+      >
         <CardInnerContainer
           ref={innerContainer}
           p={3}
@@ -174,6 +189,12 @@ export function ResourceCard({
           pinned={pinned}
           requiresRequest={requiresRequest}
           selected={selected}
+          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
@@ -242,7 +263,10 @@ export function ResourceCard({
               )}
             </Flex>
             <LabelsContainer showAll={showAllLabels}>
-              <LabelsInnerContainer ref={labelsInnerContainer}>
+              <LabelsInnerContainer
+                ref={labelsInnerContainer}
+                hasUnhealthyStatus={hasUnhealthyStatus}
+              >
                 <MoreLabelsButton
                   style={{
                     visibility:
@@ -271,36 +295,88 @@ export function ResourceCard({
               </LabelsInnerContainer>
             </LabelsContainer>
           </Flex>
+          {hasUnhealthyStatus && !showAllLabels && (
+            <HoverTooltip tipContent={'Show Connection Issue'} placement="left">
+              <WarningRightEdgeBadgeIcon onClick={onShowStatusInfo} />
+            </HoverTooltip>
+          )}
         </CardInnerContainer>
       </CardOuterContainer>
+      {/* This is to let the WarningRightEdgeBadgeIcon stay in place while the
+        InnerContainer pops out and expands vertically from rendering all
+        labels. */}
+      {hasUnhealthyStatus && showAllLabels && <WarningRightEdgeBadgeIcon />}
     </CardContainer>
   );
 }
 
+const WarningRightEdgeBadgeIcon = ({ onClick }: { onClick?(): void }) => {
+  return (
+    <Box
+      onClick={onClick}
+      css={`
+        position: absolute;
+        top: 0;
+        right: 0;
+        cursor: pointer;
+        height: 100%;
+      `}
+    >
+      <WarningRightEdgeBadgeSvg />
+    </Box>
+  );
+};
+
 /**
  * The outer container's purpose is to reserve horizontal space on the resource
  * grid. It holds the inner container that normally holds a regular layout of
  * the card, and is fully contained inside the outer container.  Once the user
  * clicks the "more" button, the inner container "pops out" by changing its
  * position to absolute.
  *
+ * The card height is fixed to allow the WarningRightEdgeBadgeIcon to stay in
+ * place when user clicks on "showAllLabels". Without the fixed height, the
+ * container's height shrinks when the inner container pops out, resulting in
+ * the svg to jump around (from size difference) and or disappearing.
+ *
  * TODO(bl-nero): Known issue: this doesn't really work well with one-column
- * layout; we may need to globally set the card height to fixed size on the
- * outer container.
+ * layout;
  */
-const CardContainer = styled(Box)`
+const CardContainer = styled(Box)<{
+  showingStatusInfo: boolean;
+}>`
+  height: 110px;
+
   position: relative;
+  .resource-health-status-svg {
+    width: 100%;
+    height: 100%;
+
+    fill: ${p =>
+      p.showingStatusInfo
+        ? p.theme.colors.interactive.solid.alert.active
+        : p.theme.colors.interactive.solid.alert.default};
+  }
+  &:hover {
+    .resource-health-status-svg {
+      fill: ${p => p.theme.colors.interactive.solid.alert.hover};
+    }
+  }
 `;
 
-const CardOuterContainer = styled(Box)<{ showAllLabels?: boolean }>`
+const CardOuterContainer = styled(Box)<{
+  showAllLabels?: boolean;
+  hasUnhealthyStatus: boolean;
+}>`
   border-radius: ${props => props.theme.radii[3]}px;
 
   ${props =>
     props.showAllLabels &&
     css`
       position: absolute;
       left: 0;
-      right: 0;
+      // The padding is required to show the WarningRightEdgeBadgeIcon
+      right: ${props.hasUnhealthyStatus ? '28px' : 0};
       z-index: 1;
     `}
   transition: all 150ms;
@@ -340,16 +416,40 @@ const CardInnerContainer = styled(Flex)<BackgroundColorProps>`
   border-radius: ${props => props.theme.radii[3]}px;
   background-color: ${props => getBackgroundColor(props)};
 
+  ${p =>
+    p.hasUnhealthyStatus &&
+    css`
+      border: 2px solid ${p.theme.colors.interactive.solid.alert.default};
+      background-color: ${getStatusBackgroundColor({
+        showingStatusInfo: p.showingStatusInfo,
+        theme: p.theme,
+        action: '',
+        viewType: 'card',
+      })};
+    `}
+
+  ${p =>
+    p.showingStatusInfo &&
+    css`
+      border: 2px solid ${p.theme.colors.interactive.solid.alert.active};
+    `}
+
   &:hover {
     // Make the border invisible instead of removing it, this is to prevent things from shifting due to the size change.
     border: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
-  }
-`;
 
-const SingleLineBox = styled(Box)`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+    ${p =>
+      p.hasUnhealthyStatus &&
+      css`
+        border-color: ${p.theme.colors.interactive.solid.alert.hover};
+        background-color: ${getStatusBackgroundColor({
+          showingStatusInfo: p.showingStatusInfo,
+          theme: p.theme,
+          action: 'hover',
+          viewType: 'card',
+        })};
+      `}
+  }
 `;
 
 /**
@@ -376,12 +476,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')};
 `;
 
 /**
@@ -397,10 +501,14 @@ const MoreLabelsButton = styled(ButtonLink)`
   margin: ${labelVerticalMargin}px 0;
   min-height: 0;
 
-  background-color: ${props => getBackgroundColor(props)};
+  background-color: transparent;
   color: ${props => props.theme.colors.text.slightlyMuted};
   font-style: italic;
 
   transition: visibility 0s;
   transition: background 150ms;
+
+  &:hover {
+    background-color: transparent;
+  }
 `;

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

@@ -0,0 +1,60 @@
+/**
+ * Teleport
+ * Copyright (C) 2025  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * 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
+      /**
+       * "className" is used instead of "fill" to style (color) the svg.
+       * The svg needs to change style when user hovers anywhere in the
+       * container the svg is a part of. This required the use of "className"
+       * to target the svg as part of a container.
+       */
+      className="resource-health-status-svg"
+      width="32"
+      height="102"
+      viewBox="0 0 32 102"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="none"
+    >
+      <path d="M24 0H0V2C3.31371 2 6 4.68629 6 8H32C32 3.58172 28.4183 0 24 0Z" />
+      <path d="M6 7H32V95H6V8Z" />
+      <path d="M32 94H6C6 97.3137 3.31371 100 0 100V102H24C28.4183 102 32 98.4183 32 94Z" />
+      <path
+        d="M19 49.0007C19.2761 49.0007 19.5 49.2245 19.5 49.5007V52.0007C19.5 52.2768 19.2761 52.5007 19 52.5007C18.7239 52.5007 18.5 52.2768 18.5 52.0007V49.5007C18.5 49.2245 18.7239 49.0007 19 49.0007Z"
+        fill="black"
+      />
+      <path
+        d="M19 54.8757C19.3452 54.8757 19.625 54.5958 19.625 54.2507C19.625 53.9055 19.3452 53.6257 19 53.6257C18.6548 53.6257 18.375 53.9055 18.375 54.2507C18.375 54.5958 18.6548 54.8757 19 54.8757Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.7267 45.2292L12.254 54.8064C11.6953 55.7842 12.4013 57.0007 13.5274 57.0007H24.4728C25.5989 57.0007 26.3049 55.7842 25.7462 54.8064L20.2735 45.2292C19.7105 44.2439 18.2897 44.2439 17.7267 45.2292ZM13.1222 55.3025L18.5949 45.7254C18.7741 45.4119 19.2261 45.4119 19.4053 45.7254L24.8779 55.3025C25.0557 55.6136 24.8311 56.0007 24.4728 56.0007H13.5274C13.1691 56.0007 12.9445 55.6136 13.1222 55.3025Z"
+        fill="black"
+      />
+    </svg>
+  );
+}