Fleet UI: Info banner component, uses Card as base component, tests (#…

…26276)
fleetdm · Feb 19, 2025 · 20033a8 · 20033a8
1 parent 739ca1e
commit 20033a8
Show file tree

Hide file tree

Showing 19 changed files with 70 additions and 76 deletions.
diff --git a/frontend/components/Card/Card.tsx b/frontend/components/Card/Card.tsx
@@ -1,3 +1,5 @@
+// Base component to reusable <InfoBanner/>, <HostCountCard/>, <SectionCard/>, etc
+// and countless single use components
 import React from "react";
 import classnames from "classnames";
 
@@ -6,13 +8,13 @@ import { Link } from "react-router";
 const baseClass = "card";
 
 type BorderRadiusSize = "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type CardColor = "white" | "gray" | "purple" | "yellow";
+type CardColor = "white" | "grey" | "purple" | "yellow";
 
 interface ICardProps {
   children?: React.ReactNode;
   /** The size of the border radius. Defaults to `small`.
    *
-   * These correspond to the boarder radius in the design system. Look at
+   * These correspond to the border radius in the design system. Look at
    * `var/_global.scss` for values */
   borderRadiusSize?: BorderRadiusSize;
   /** Includes the card shadows. Defaults to `false` */

diff --git a/frontend/components/Card/_styles.scss b/frontend/components/Card/_styles.scss
@@ -67,7 +67,7 @@
     background-color: $core-white;
   }
 
-  &__gray {
+  &__grey {
     background-color: $ui-off-white;
   }
 

diff --git a/frontend/components/FileProgressModal/FileProgressModal.tsx b/frontend/components/FileProgressModal/FileProgressModal.tsx
@@ -26,7 +26,7 @@ const FileProgressModal = ({
     onExit={noop}
     disableClosingModal
   >
-    <Card color="gray" className={`${baseClass}__card`}>
+    <Card color="grey" className={`${baseClass}__card`}>
       <FileDetails
         graphicNames={graphicNames}
         fileDetails={fileDetails}

diff --git a/frontend/components/FileUploader/FileUploader.tsx b/frontend/components/FileUploader/FileUploader.tsx
@@ -147,7 +147,7 @@ export const FileUploader = ({
   };
 
   return (
-    <Card color="gray" className={classes}>
+    <Card color="grey" className={classes}>
       {isFileSelected && fileDetails ? (
         <FileDetails
           graphicNames={graphicNames}

diff --git a/frontend/components/InfoBanner/InfoBanner.stories.tsx b/frontend/components/InfoBanner/InfoBanner.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
+import CustomLink from "components/CustomLink";
 
 import InfoBanner from ".";
 
@@ -17,5 +18,13 @@ type Story = StoryObj<typeof InfoBanner>;
 export const Default: Story = {
   args: {
     children: <div>This is an Info Banner.</div>,
+    cta: (
+      <CustomLink
+        url="http://localhost:6006/"
+        text="Reopen Storybook"
+        newTab
+        // TODO: variant="info-banner" after merge
+      />
+    ),
   },
 };
diff --git a/frontend/components/InfoBanner/InfoBanner.tests.tsx b/frontend/components/InfoBanner/InfoBanner.tests.tsx
@@ -1,15 +1,41 @@
 import React from "react";
 
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 
 import InfoBanner from "./InfoBanner";
 
 describe("InfoBanner - component", () => {
-  it("info banner renders text", () => {
+  it("renders children content", () => {
     render(<InfoBanner>Info banner testing text</InfoBanner>);
 
     const title = screen.getByText("Info banner testing text");
 
     expect(title).toBeInTheDocument();
   });
+
+  it("renders as page-level banner", () => {
+    const { container } = render(<InfoBanner pageLevel />);
+    expect(container.firstChild).toHaveClass("info-banner__page-banner");
+  });
+
+  it("renders CTA element", () => {
+    const cta = <button>Click me</button>;
+    render(<InfoBanner cta={cta} />);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("renders closable button and hides banner on click", () => {
+    render(<InfoBanner closable>Test message</InfoBanner>);
+
+    const closeButton = screen.getByRole("button");
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+    expect(screen.queryByText("Test message")).not.toBeInTheDocument();
+  });
+
+  it("renders with icon class when icon prop is provided", () => {
+    const { container } = render(<InfoBanner icon="info" />);
+    expect(container.firstChild).toHaveClass("info-banner__icon");
+  });
 });
diff --git a/frontend/components/InfoBanner/InfoBanner.tsx b/frontend/components/InfoBanner/InfoBanner.tsx
@@ -4,23 +4,22 @@ import classNames from "classnames";
 import Icon from "components/Icon";
 import Button from "components/buttons/Button";
 import { IconNames } from "components/icons";
+import Card from "components/Card";
 
 const baseClass = "info-banner";
 
 export interface IInfoBannerProps {
   children?: React.ReactNode;
   className?: string;
   /** default light purple */
-  color?: "purple" | "purple-bold-border" | "yellow" | "grey";
+  color?: "purple" | "yellow" | "grey";
   /** default 4px  */
-  borderRadius?: "large" | "xlarge";
+  borderRadius?: "medium" | "xlarge";
   pageLevel?: boolean;
   /** Add this element to the end of the banner message. Mutually exclusive with `link`. */
   cta?: JSX.Element;
   /** closable and link are mutually exclusive */
   closable?: boolean;
-  /** Makes the entire banner clickable */
-  link?: string;
   icon?: IconNames;
 }
 
@@ -32,15 +31,11 @@ const InfoBanner = ({
   pageLevel,
   cta,
   closable,
-  link,
   icon,
 }: IInfoBannerProps) => {
   const wrapperClasses = classNames(
     baseClass,
-    `${baseClass}__${color}`,
     {
-      [`${baseClass}__${color}`]: !!color,
-      [`${baseClass}__border-radius-${borderRadius}`]: !!borderRadius,
       [`${baseClass}__page-banner`]: !!pageLevel,
       [`${baseClass}__icon`]: !!icon,
     },
@@ -75,23 +70,14 @@ const InfoBanner = ({
     return <></>;
   }
 
-  if (link) {
-    return (
-      <a
-        href={link}
-        target="_blank"
-        rel="noreferrer"
-        className={wrapperClasses}
-      >
-        {content}
-      </a>
-    );
-  }
-
   return (
-    <div className={wrapperClasses} role="status">
+    <Card
+      className={wrapperClasses}
+      color={color}
+      borderRadiusSize={borderRadius}
+    >
       {content}
-    </div>
+    </Card>
   );
 };
 

diff --git a/frontend/components/InfoBanner/_styles.scss b/frontend/components/InfoBanner/_styles.scss
@@ -2,45 +2,16 @@
   display: flex;
   justify-content: space-between;
   padding: $pad-medium;
-  border-radius: $border-radius;
-  border: 1px solid $ui-vibrant-blue-50;
   font-size: $x-small;
   font-weight: $regular;
   color: $core-fleet-black;
 
-  &__purple {
-    background-color: $ui-vibrant-blue-10;
-  }
-
-  &__purple-bold-border {
-    background-color: $ui-vibrant-blue-10;
-    border-color: $core-vibrant-blue;
-  }
-
-  &__yellow {
-    background-color: $ui-yellow-banner;
-    border-color: $ui-yellow-banner-outline;
-  }
-
-  &__grey {
-    background-color: $ui-off-white;
-    border-color: $ui-fleet-black-50;
-  }
-
   &__page-banner {
     padding: $pad-large $pad-xlarge;
     margin-bottom: $pad-large;
     width: auto;
   }
 
-  &__border-radius-large {
-    border-radius: $border-radius-medium;
-  }
-
-  &__border-radius-xlarge {
-    border-radius: $border-radius-xlarge;
-  }
-
   &__info {
     p {
       margin: $pad-small 0 0 0;
@@ -62,9 +33,8 @@
   }
 
   &__close {
-    margin-left: $pad-small;
-    padding: $xx-small;
-    padding-right: 0;
+    padding: $pad-small;
+    margin: -$pad-small; // Offset clickable padding from making banner taller
 
     &:hover {
       cursor: pointer;

diff --git a/frontend/components/MainContent/MainContent.tsx b/frontend/components/MainContent/MainContent.tsx
@@ -57,7 +57,7 @@ const MainContent = ({
         banner = <AppleBMTermsMessage />;
       } else if (isVppExpired || willVppExpire) {
         banner = <VppRenewalMessage expired={isVppExpired} />;
-      } else if (isFleetLicenseExpired) {
+      } else if (!isFleetLicenseExpired) {
         banner = <LicenseExpirationBanner />;
       }
     }

diff --git a/...ds/CustomSettings/components/ProfileUploader/components/AddProfileCard/AddProfileCard.tsx b/...ds/CustomSettings/components/ProfileUploader/components/AddProfileCard/AddProfileCard.tsx
@@ -11,7 +11,7 @@ interface IAddProfileCardProps {
 }
 
 const AddProfileCard = ({ setShowModal }: IAddProfileCardProps) => (
-  <Card color="gray" className={baseClass}>
+  <Card color="grey" className={baseClass}>
     <div className={`${baseClass}__card--content-wrap`}>
       <ProfileGraphic baseClass={baseClass} showMessage />
       <Button

diff --git a/.../CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx b/.../CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
@@ -208,7 +208,7 @@ const AddProfileModal = ({
         {isPremiumTier && !isLoadingLabels && isErrorLabels && <DataError />}
         {(!isPremiumTier || (!isLoadingLabels && !isErrorLabels)) && (
           <div className={`${baseClass}__modal-content-wrap`}>
-            <Card color="gray" className={`${baseClass}__file`}>
+            <Card color="grey" className={`${baseClass}__file`}>
               {!fileDetails ? (
                 <FileChooser isLoading={isLoading} onFileOpen={onFileOpen} />
               ) : (

diff --git a/...rience/cards/InstallSoftware/components/InstallSoftwarePreview/InstallSoftwarePreview.tsx b/...rience/cards/InstallSoftware/components/InstallSoftwarePreview/InstallSoftwarePreview.tsx
@@ -8,7 +8,7 @@ const baseClass = "install-software-preview";
 
 const InstallSoftwarePreview = () => {
   return (
-    <Card color="gray" paddingSize="xxlarge" className={baseClass}>
+    <Card color="grey" paddingSize="xxlarge" className={baseClass}>
       <h3>End user experience</h3>
       <p>
         After the <b>Remote Management</b> screen, the end user will see

diff --git a/...xperience/cards/SetupAssistant/components/SetupAssistantPreview/SetupAssistantPreview.tsx b/...xperience/cards/SetupAssistant/components/SetupAssistantPreview/SetupAssistantPreview.tsx
@@ -8,7 +8,7 @@ const baseClass = "setup-assistant-preview";
 
 const SetupAssistantPreview = () => {
   return (
-    <Card color="gray" paddingSize="xxlarge" className={baseClass}>
+    <Card color="grey" paddingSize="xxlarge" className={baseClass}>
       <h3>End user experience</h3>
       <p>
         After the end user continues past the <b>Remote Management</b> screen,

diff --git a/...ExperienceScript/components/SetupExperienceScriptPreview/SetupExperienceScriptPreview.tsx b/...ExperienceScript/components/SetupExperienceScriptPreview/SetupExperienceScriptPreview.tsx
@@ -8,7 +8,7 @@ const baseClass = "setup-experience-script-preview";
 
 const SetupExperienceScriptPreview = () => {
   return (
-    <Card color="gray" paddingSize="xxlarge" className={baseClass}>
+    <Card color="grey" paddingSize="xxlarge" className={baseClass}>
       <h3>End user experience</h3>
       <p>
         After software is installed, the end user will see the script being run.

diff --git a/...e/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx b/...e/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx
@@ -67,7 +67,7 @@ const FleetAppSummary = ({
     <Card
       className={`${baseClass}__fleet-app-summary`}
       borderRadiusSize="medium"
-      color="gray"
+      color="grey"
     >
       <div className={`${baseClass}__fleet-app-summary--left`}>
         <SoftwareIcon name={name} size="medium" />

diff --git a/...ges/SoftwarePage/SoftwareTitleDetailsPage/SoftwareInstallerCard/SoftwareInstallerCard.tsx b/...ges/SoftwarePage/SoftwareTitleDetailsPage/SoftwareInstallerCard/SoftwareInstallerCard.tsx
@@ -373,7 +373,7 @@ const SoftwareInstallerCard = ({
   return (
     <Card borderRadiusSize="xxlarge" includeShadow className={baseClass}>
       <div className={`${baseClass}__row-1`}>
-        {/* TODO: main-info could be a seperate component as its reused on a couple
+        {/* TODO: main-info could be a separate component as its reused on a couple
         pages already. Come back and pull this into a component */}
         <div className={`${baseClass}__main-info`}>
           {renderIcon()}

diff --git a/...end/pages/admin/IntegrationsPage/cards/MdmSettings/components/SectionCard/SectionCard.tsx b/...end/pages/admin/IntegrationsPage/cards/MdmSettings/components/SectionCard/SectionCard.tsx
@@ -25,7 +25,7 @@ const SectionCard = ({
   const cardClasses = classnames(baseClass, className);
 
   return (
-    <Card className={cardClasses} color="gray">
+    <Card className={cardClasses} color="grey">
       <div className={`${baseClass}__content-wrapper`}>
         {iconName && <Icon name={iconName} />}
         <div className={`${baseClass}__content`}>

diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/ExampleTicket.tsx b/frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/ExampleTicket.tsx
@@ -37,7 +37,7 @@ const ExampleTicket = ({
     );
 
   return (
-    <Card className={baseClass} color="gray">
+    <Card className={baseClass} color="grey">
       {screenshot}
     </Card>
   );

diff --git a/frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx b/frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx
@@ -1,3 +1,4 @@
+import Card from "components/Card";
 import Checkbox from "components/forms/fields/Checkbox";
 import Icon from "components/Icon";
 import InfoBanner from "components/InfoBanner";
@@ -67,12 +68,12 @@ const DiscardDataOption = ({
       {["differential", "differential_ignore_removals"].includes(
         selectedLoggingType
       ) && (
-        <InfoBanner color="purple-bold-border">
-          <>
+        <>
+          <InfoBanner color="purple">
             The <b>Discard data</b> setting is ignored when differential logging
             is enabled. This query&apos;s results will not be saved in Fleet.
-          </>
-        </InfoBanner>
+          </InfoBanner>
+        </>
       )}
       <Checkbox
         name="discardData"