Fleet UI: Fleet Free shows premium message when clicking to add software (#21065)

changes/20897-add-software-premium-message

@@ -0,0 +1 @@
+- Fleet Free users see a Premium feature message when clicking to add Add software

frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.tsx

@@ -6,10 +6,23 @@ import Icon from "components/Icon";
 
 interface IPremiumFeatureMessage {
   className?: string;
+  /** Aligns premium message, default: centered */
+  alignment?: "left";
 }
 
-const PremiumFeatureMessage = ({ className }: IPremiumFeatureMessage) => {
-  const classes = classnames("premium-feature-message-container", className);
+const baseClass = "premium-feature-message-container";
+
+const PremiumFeatureMessage = ({
+  className,
+  alignment,
+}: IPremiumFeatureMessage) => {
+  const classes = classnames(
+    baseClass,
+    {
+      [`${baseClass}__align-${alignment}`]: alignment !== undefined,
+    },
+    className
+  );
 
   return (
     <div className={classes}>

frontend/components/PremiumFeatureMessage/_styles.scss

@@ -4,6 +4,11 @@
   align-items: center;
   font-size: $x-small;
 
+  &__align-left {
+    justify-content: left;
+    align-items: left;
+  }
+
   .premium-feature-message {
     display: flex;
     gap: 4px;

frontend/pages/SoftwarePage/SoftwarePage.tsx

@@ -429,6 +429,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
             router={router}
             onExit={toggleAddSoftwareModal}
             setAddedSoftwareToken={setAddedSoftwareToken}
+            isFreeTier={isFreeTier}
           />
         )}
       </div>

frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx

@@ -7,6 +7,7 @@ import { APP_CONTEXT_ALL_TEAMS_ID } from "interfaces/team";
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
 import TabsWrapper from "components/TabsWrapper";
+import PremiumFeatureMessage from "components/PremiumFeatureMessage";
 
 import AppStoreVpp from "../AppStoreVpp";
 import AddPackage from "../AddPackage";
@@ -38,6 +39,7 @@ interface IAddSoftwareModalProps {
   router: InjectedRouter;
   onExit: () => void;
   setAddedSoftwareToken: (token: string) => void;
+  isFreeTier?: boolean;
 }
 
 const AddSoftwareModal = ({
@@ -45,7 +47,54 @@ const AddSoftwareModal = ({
   router,
   onExit,
   setAddedSoftwareToken,
+  isFreeTier,
 }: IAddSoftwareModalProps) => {
+  const renderModalContent = () => {
+    if (isFreeTier) {
+      return (
+        <>
+          <PremiumFeatureMessage alignment="left" />{" "}
+          <div className="modal-cta-wrap">
+            <Button variant="brand" onClick={onExit}>
+              Done
+            </Button>
+          </div>
+        </>
+      );
+    }
+
+    if (teamId === APP_CONTEXT_ALL_TEAMS_ID) {
+      return <AllTeamsMessage onExit={onExit} />;
+    }
+
+    return (
+      <TabsWrapper className={`${baseClass}__tabs`}>
+        <Tabs>
+          <TabList>
+            <Tab>Package</Tab>
+            <Tab>App Store (VPP)</Tab>
+          </TabList>
+          <TabPanel>
+            <AddPackage
+              teamId={teamId}
+              router={router}
+              onExit={onExit}
+              setAddedSoftwareToken={setAddedSoftwareToken}
+            />
+          </TabPanel>
+          <TabPanel>
+            <AppStoreVpp
+              teamId={teamId}
+              router={router}
+              onExit={onExit}
+              setAddedSoftwareToken={setAddedSoftwareToken}
+            />
+          </TabPanel>
+        </Tabs>
+      </TabsWrapper>
+    );
+  };
+
   return (
     <Modal
       title="Add software"
@@ -53,36 +102,7 @@ const AddSoftwareModal = ({
       width="large"
       className={baseClass}
     >
-      <>
-        {teamId === APP_CONTEXT_ALL_TEAMS_ID ? (
-          <AllTeamsMessage onExit={onExit} />
-        ) : (
-          <TabsWrapper className={`${baseClass}__tabs`}>
-            <Tabs>
-              <TabList>
-                <Tab>Package</Tab>
-                <Tab>App Store (VPP)</Tab>
-              </TabList>
-              <TabPanel>
-                <AddPackage
-                  teamId={teamId}
-                  router={router}
-                  onExit={onExit}
-                  setAddedSoftwareToken={setAddedSoftwareToken}
-                />
-              </TabPanel>
-              <TabPanel>
-                <AppStoreVpp
-                  teamId={teamId}
-                  router={router}
-                  onExit={onExit}
-                  setAddedSoftwareToken={setAddedSoftwareToken}
-                />
-              </TabPanel>
-            </Tabs>
-          </TabsWrapper>
-        )}
-      </>
+      {renderModalContent()}
     </Modal>
   );
 };