From 790ea98748d9f2218d59260c3570e3b9e9a1bba9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
 <320272+Traxmaxx@users.noreply.github.com>
Date: Fri, 3 Nov 2023 14:13:47 +0100
Subject: [PATCH 1/4] feat: add Tailwarden banner when costs explorer is empty

---
 dashboard/components/button/Button.mocks.tsx  | 27 ++++++++++-
 .../components/button/Button.stories.tsx      | 12 +++++
 dashboard/components/button/Button.tsx        | 44 ++++++++++++-----
 .../DashboardCostExplorerCard.tsx             | 47 +++++++++++++------
 dashboard/components/icons/CloudIcon.tsx      | 29 ++++++++++++
 dashboard/components/icons/Icons.stories.tsx  |  2 +-
 dashboard/components/icons/index.tsx          |  1 +
 dashboard/styles/globals.css                  | 10 +++-
 dashboard/tailwind.config.js                  |  7 ++-
 9 files changed, 147 insertions(+), 32 deletions(-)
 create mode 100644 dashboard/components/icons/CloudIcon.tsx

diff --git a/dashboard/components/button/Button.mocks.tsx b/dashboard/components/button/Button.mocks.tsx
index 736305a2a..a2251e8ac 100644
--- a/dashboard/components/button/Button.mocks.tsx
+++ b/dashboard/components/button/Button.mocks.tsx
@@ -8,7 +8,9 @@ const base: ButtonProps = {
   size: 'lg',
   disabled: false,
   loading: false,
-  onClick: () => {}
+  onClick: () => {},
+  href: '',
+  target: ''
 };
 
 const secondary: ButtonProps = {
@@ -63,13 +65,34 @@ const deleteButton: ButtonProps = {
   onClick: () => {}
 };
 
+const linkButton: ButtonProps = {
+  children: 'Link button',
+  asLink: true,
+  style: 'primary',
+  size: 'lg',
+  loading: false,
+  href: 'https://komiser.io'
+};
+
+const newTabLinkButton: ButtonProps = {
+  children: 'New Tab Link button',
+  asLink: true,
+  style: 'secondary',
+  size: 'lg',
+  loading: false,
+  href: 'https://komiser.io',
+  target: '_blank'
+};
+
 const mockButtonProps = {
   base,
   secondary,
   ghost,
   text,
   dropdown,
-  deleteButton
+  deleteButton,
+  linkButton,
+  newTabLinkButton
 };
 
 export default mockButtonProps;
diff --git a/dashboard/components/button/Button.stories.tsx b/dashboard/components/button/Button.stories.tsx
index a83a23872..87e6eab4d 100644
--- a/dashboard/components/button/Button.stories.tsx
+++ b/dashboard/components/button/Button.stories.tsx
@@ -65,3 +65,15 @@ export const Delete: Story = {
     ...mockButtonProps.deleteButton
   }
 };
+
+export const Link: Story = {
+  args: {
+    ...mockButtonProps.linkButton
+  }
+};
+
+export const NewTabLink: Story = {
+  args: {
+    ...mockButtonProps.newTabLinkButton
+  }
+};
diff --git a/dashboard/components/button/Button.tsx b/dashboard/components/button/Button.tsx
index dedb7adec..6393f4673 100644
--- a/dashboard/components/button/Button.tsx
+++ b/dashboard/components/button/Button.tsx
@@ -12,10 +12,14 @@ export type ButtonProps = {
   gap?: 'md';
   transition?: boolean;
   onClick?: (e?: any) => void;
+  asLink?: boolean;
+  href?: string;
+  target?: string;
 };
 
 function Button({
   children,
+  asLink = false,
   type = 'button',
   style = 'primary',
   size = 'md',
@@ -24,7 +28,9 @@ function Button({
   align,
   gap,
   transition = true,
-  onClick
+  onClick,
+  href,
+  target
 }: ButtonProps) {
   const xxs = 'p-1';
   const xs = 'py-2 px-4';
@@ -73,21 +79,37 @@ function Button({
     if (style === 'text') buttonStyle = text;
     if (style === 'dropdown') buttonStyle = dropdown;
     if (style === 'delete') buttonStyle = deleteStyle;
+    if (asLink) buttonStyle = `${buttonStyle} inline-block sm:w-fit-content`;
 
     return buttonStyle;
   }
 
   return (
-    <button
-      type={type}
-      onClick={onClick}
-      className={handleStyle()}
-      disabled={disabled || loading}
-      data-testid={style}
-    >
-      {loading && <LoadingSpinner />}
-      {children}
-    </button>
+    <>
+      {asLink ? (
+        <a
+          onClick={onClick}
+          className={handleStyle()}
+          data-testid={style}
+          href={href}
+          target={target}
+        >
+          {loading && <LoadingSpinner />}
+          {children}
+        </a>
+      ) : (
+        <button
+          type={type}
+          onClick={onClick}
+          className={handleStyle()}
+          disabled={disabled || loading}
+          data-testid={style}
+        >
+          {loading && <LoadingSpinner />}
+          {children}
+        </button>
+      )}
+    </>
   );
 }
 
diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
index c536d4801..53f858080 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -10,8 +10,11 @@ import {
 import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';
 import { Bar } from 'react-chartjs-2';
-import SelectCheckbox from '../../../select-checkbox/SelectCheckbox';
-import Select from '../../../select/Select';
+
+import Button from '@components/button/Button';
+import SelectCheckbox from '@components/select-checkbox/SelectCheckbox';
+import Select from '@components/select/Select';
+import { CloudIcon } from '@components/icons';
 import {
   CostExplorerQueryDateProps,
   CostExplorerQueryGranularityProps,
@@ -113,19 +116,33 @@ function DashboardCostExplorerCard({
       </div>
       <div className="mt-8"></div>
       <div className="h-full min-h-[22rem]">
-        {chartData && <Bar data={chartData} options={options} />}
-        {!chartData && (
-          <div className="relative flex flex-col items-center">
-            <p className="mt-10 text-lg text-black-900">
-              No data for this time period
-            </p>
-            <Image
-              src="/assets/img/others/empty-state-cost-explorer.png"
-              width={940}
-              height={330}
-              alt="No data to display image"
-              className="absolute top-0"
-            />
+        {/* {chartData && <Bar data={chartData} options={options} />} */}
+        {chartData && (
+          <div className="relative flex flex-col items-center bg-empty-cost-explorer h-[330px] w-[940px]">
+            <div className="mt-10 text-lg text-black-900 border border-gray-200 px-8 py-6 flex bg-white">
+              <div>
+                <p className="text-lg">No data for this time period</p>
+                <p className="text-sm text-gray-400 mb-4">
+                  Our cloud version, Tailwarden, supports <br />
+                  historical costs from certain cloud providers
+                </p>
+                <Button
+                  size="sm"
+                  gap="md"
+                  asLink
+                  href="https://cloud.tailwarden.com/?utm_source=komiser"
+                  target="_blank"
+                >
+                  <CloudIcon width="24" /> Discover Tailwarden
+                </Button>
+              </div>
+              <Image
+                src="/assets/img/purplin/rocket.svg"
+                alt="Purplin on a Rocket"
+                width="115"
+                height="124"
+              />
+            </div>
           </div>
         )}
       </div>
diff --git a/dashboard/components/icons/CloudIcon.tsx b/dashboard/components/icons/CloudIcon.tsx
new file mode 100644
index 000000000..5ff0ca98f
--- /dev/null
+++ b/dashboard/components/icons/CloudIcon.tsx
@@ -0,0 +1,29 @@
+import { SVGProps } from 'react';
+
+const CloudIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M7.27004 13.01C6.74004 12.74 6.15004 12.6 5.55004 12.6C0.870039 12.93 0.870039 19.74 5.55004 20.07H16.64C17.99 20.08 19.29 19.58 20.28 18.67C23.57 15.8 21.81 10.03 17.48 9.48C15.92 0.110001 2.39004 3.67 5.60004 12.6"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.85 9.92001C16.37 9.66001 16.94 9.52001 17.52 9.51001"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default CloudIcon;
diff --git a/dashboard/components/icons/Icons.stories.tsx b/dashboard/components/icons/Icons.stories.tsx
index dc9fa689a..5c2da12fb 100644
--- a/dashboard/components/icons/Icons.stories.tsx
+++ b/dashboard/components/icons/Icons.stories.tsx
@@ -9,7 +9,7 @@ const IconsWrapper = (props: SVGProps<SVGSVGElement>) => (
   <div className="inline-flex w-full flex-wrap gap-2 p-2">
     {Object.entries(icons).map(([name, Icon]) => (
       <div key={name} className="relative">
-        <div className="peer flex h-full flex-col items-center justify-center gap-2 rounded-md border bg-white p-3">
+        <div className="peer flex h-full flex-col items-center justify-center gap-2 rounded-md border bg-gray-200 p-3">
           <Icon {...props} />
           <p className="text-sm">{name}</p>
         </div>
diff --git a/dashboard/components/icons/index.tsx b/dashboard/components/icons/index.tsx
index c309a0205..72f0b2681 100644
--- a/dashboard/components/icons/index.tsx
+++ b/dashboard/components/icons/index.tsx
@@ -7,6 +7,7 @@ export { default as ChevronDownIcon } from './ChevronDownIcon';
 export { default as ChevronRightIcon } from './ChevronRightIcon';
 export { default as ClearFilterIcon } from './ClearFilterIcon';
 export { default as CloseIcon } from './CloseIcon';
+export { default as CloudIcon } from './CloudIcon';
 export { default as DeleteIcon } from './DeleteIcon';
 export { default as DocumentTextIcon } from './DocumentTextIcon';
 export { default as DownloadIcon } from './DownloadIcon';
diff --git a/dashboard/styles/globals.css b/dashboard/styles/globals.css
index 1e62db64b..6846868b6 100644
--- a/dashboard/styles/globals.css
+++ b/dashboard/styles/globals.css
@@ -55,8 +55,14 @@
 }
 
 .popper-div {
-  text-shadow: 0 0 5px #f4f9f9, 0 0 5px #f4f9f9, 0 0 5px #f4f9f9,
-    0 0 5px #f4f9f9, 0 0 5px #f4f9f9, 0 0 5px #f4f9f9, 0 0 5px #f4f9f9,
+  text-shadow:
+    0 0 5px #f4f9f9,
+    0 0 5px #f4f9f9,
+    0 0 5px #f4f9f9,
+    0 0 5px #f4f9f9,
+    0 0 5px #f4f9f9,
+    0 0 5px #f4f9f9,
+    0 0 5px #f4f9f9,
     0 0 5px #f4f9f9;
   position: relative;
   color: #000;
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index 0744cc780..a90bf1875 100644
--- a/dashboard/tailwind.config.js
+++ b/dashboard/tailwind.config.js
@@ -172,7 +172,12 @@ module.exports = {
         scale: 'scale 250ms ease forwards'
       },
       backgroundImage: {
-        'dependency-graph': 'radial-gradient(#EDEBEE 2px, transparent 0)'
+        'dependency-graph': 'radial-gradient(#EDEBEE 2px, transparent 0)',
+        'empty-cost-explorer':
+          "url('/assets/img/others/empty-state-cost-explorer.png')"
+      },
+      width: {
+        'fit-content': 'fit-content'
       }
     }
   },

From f53381cdb03763fb0186deab4c417241305b3cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
 <320272+Traxmaxx@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:17:24 +0100
Subject: [PATCH 2/4] feat: add Tailwarden banner when more than 1 account is
 connected

---
 .../DashboardCostExplorerCard.tsx             |  4 +-
 dashboard/pages/cloud-accounts.tsx            | 42 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
index 53f858080..f1e7c28d9 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -116,8 +116,8 @@ function DashboardCostExplorerCard({
       </div>
       <div className="mt-8"></div>
       <div className="h-full min-h-[22rem]">
-        {/* {chartData && <Bar data={chartData} options={options} />} */}
-        {chartData && (
+        {chartData && <Bar data={chartData} options={options} />}
+        {!chartData && (
           <div className="relative flex flex-col items-center bg-empty-cost-explorer h-[330px] w-[940px]">
             <div className="mt-10 text-lg text-black-900 border border-gray-200 px-8 py-6 flex bg-white">
               <div>
diff --git a/dashboard/pages/cloud-accounts.tsx b/dashboard/pages/cloud-accounts.tsx
index 1b7568579..eb9638d8b 100644
--- a/dashboard/pages/cloud-accounts.tsx
+++ b/dashboard/pages/cloud-accounts.tsx
@@ -14,16 +14,32 @@ import CloudAccountDeleteContents from '@components/cloud-account/components/Clo
 import { useToast } from '@components/toast/ToastProvider';
 
 import EmptyState from '@components/empty-state/EmptyState';
+import Banner from '@components/banner/Banner';
+import Button from '@components/button/Button';
 
 function CloudAccounts() {
   const [editCloudAccount, setEditCloudAccount] = useState<boolean>(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
 
+  const [isTailwardenBannerDismissed, setIsTailwardenBannerDismissed] =
+    useState(true);
+
   const { toast, showToast, dismissToast } = useToast();
   const router = useRouter();
 
   const currentViewProvider = router.query.view as string;
 
+  const hideTailwardenBanner = () => {
+    setIsTailwardenBannerDismissed(true);
+    window.localStorage.setItem('tailwardenBannerDismissed', 'true');
+  };
+
+  useEffect(() => {
+    setIsTailwardenBannerDismissed(
+      window.localStorage.getItem('tailwardenBannerDismissed') === 'true'
+    );
+  }, []);
+
   const {
     cloudAccounts,
     setCloudAccounts,
@@ -75,7 +91,7 @@ function CloudAccounts() {
       {/* Wraps the cloud account page and handles the custom views sidebar */}
       <CloudAccountsLayout router={router} cloudAccounts={cloudAccounts}>
         <CloudAccountsHeader isNotCustomView={isNotCustomView} />
-
+        <div className="z-10 text-sm text-black-800 first-letter:top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-primary to-secondary py-3 opacity-1 fixed"></div>
         {filteredCloudAccounts.map(account => (
           <CloudAccountItem
             key={account.id}
@@ -135,6 +151,30 @@ function CloudAccounts() {
           goTo={goTo}
         />
       )}
+
+      {cloudAccounts.length >= 2 && !isTailwardenBannerDismissed && (
+        <div className="bg-white absolute bottom-0 left-0 right-0 z-20 px-28 border-black-170 border-t text-base py-3 flex gap-4 items-center justify-center">
+          For deeper insights and account-level alerts, make the switch to
+          Tailwarden — our recommended cloud version for production use.{' '}
+          <Button
+            size="xs"
+            gap="md"
+            asLink
+            href="https://cloud.tailwarden.com/?utm_source=komiser"
+            target="_blank"
+          >
+            Discover Tailwarden
+          </Button>
+          <Button
+            size="xs"
+            gap="md"
+            style="ghost"
+            onClick={() => hideTailwardenBanner()}
+          >
+            X
+          </Button>
+        </div>
+      )}
     </>
   );
 }

From dd14f6b653d3dea7435bd01bf45b2749b0c0cfbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
 <320272+Traxmaxx@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:22:02 +0100
Subject: [PATCH 3/4] fix: fix styling

---
 .../components/cost-explorer/DashboardCostExplorerCard.tsx      | 2 +-
 dashboard/utils/providerHelper.ts                               | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
index f1e7c28d9..02b56071f 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -118,7 +118,7 @@ function DashboardCostExplorerCard({
       <div className="h-full min-h-[22rem]">
         {chartData && <Bar data={chartData} options={options} />}
         {!chartData && (
-          <div className="relative flex flex-col items-center bg-empty-cost-explorer h-[330px] w-[940px]">
+          <div className="relative flex flex-col items-center bg-empty-cost-explorer h-[330px] w-full">
             <div className="mt-10 text-lg text-black-900 border border-gray-200 px-8 py-6 flex bg-white">
               <div>
                 <p className="text-lg">No data for this time period</p>
diff --git a/dashboard/utils/providerHelper.ts b/dashboard/utils/providerHelper.ts
index 56676dc27..e4155e737 100644
--- a/dashboard/utils/providerHelper.ts
+++ b/dashboard/utils/providerHelper.ts
@@ -142,7 +142,6 @@ const platform: Platform = {
     }
   },
 
-
   getImgSrc(providerName) {
     const key = providerName.toLowerCase();
     if (key in this.cloudProviders) return this.cloudProviders[key].imgSrc;

From 6e1dbe962983d106dd28c2442c0eea575b01b886 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20R=C3=B6sel?=
 <320272+Traxmaxx@users.noreply.github.com>
Date: Tue, 7 Nov 2023 17:53:23 +0100
Subject: [PATCH 4/4] fix: fix URLs until landing pages are in place

---
 .../components/cost-explorer/DashboardCostExplorerCard.tsx      | 2 +-
 dashboard/pages/cloud-accounts.tsx                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
index 02b56071f..cb6eb9a13 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -130,7 +130,7 @@ function DashboardCostExplorerCard({
                   size="sm"
                   gap="md"
                   asLink
-                  href="https://cloud.tailwarden.com/?utm_source=komiser"
+                  href="https://tailwarden.com/?utm_source=komiser"
                   target="_blank"
                 >
                   <CloudIcon width="24" /> Discover Tailwarden
diff --git a/dashboard/pages/cloud-accounts.tsx b/dashboard/pages/cloud-accounts.tsx
index eb9638d8b..79be7073b 100644
--- a/dashboard/pages/cloud-accounts.tsx
+++ b/dashboard/pages/cloud-accounts.tsx
@@ -160,7 +160,7 @@ function CloudAccounts() {
             size="xs"
             gap="md"
             asLink
-            href="https://cloud.tailwarden.com/?utm_source=komiser"
+            href="https://tailwarden.com/?utm_source=komiser"
             target="_blank"
           >
             Discover Tailwarden