Merge pull request #742 from tailwarden/develop

v3.0.13
tailwarden · Apr 21, 2023 · 37d2bfe · 37d2bfe
2 parents 982af51 + 930af4a
commit 37d2bfe
Show file tree

Hide file tree

Showing 65 changed files with 1,529 additions and 700 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,5 @@ bin
 .vscode/
 .env
 dist/
+
+*.go-e
diff --git a/dashboard/components/banner/Banner.tsx b/dashboard/components/banner/Banner.tsx
@@ -1,8 +1,9 @@
 import Image from 'next/image';
 import { useContext } from 'react';
+import classNames from 'classnames';
 import formatNumber from '../../utils/formatNumber';
-import Button from '../button/Button';
 import GlobalAppContext from '../layout/context/GlobalAppContext';
+import StarIcon from '../icons/StarIcon';
 
 type BannerProps = {
   githubStars: number | undefined;
@@ -13,9 +14,13 @@ function Banner({ githubStars }: BannerProps) {
 
   return (
     <div
-      className={`${
-        displayBanner ? 'fixed' : 'hidden'
-      } 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-0`}
+      className={classNames(
+        '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-0',
+        {
+          fixed: displayBanner,
+          hidden: !displayBanner
+        }
+      )}
     >
       <span className="text-sm font-medium text-white">
         Support Komiser by giving us a star on GitHub.
@@ -26,36 +31,23 @@ function Banner({ githubStars }: BannerProps) {
           href="https://github.com/tailwarden/komiser"
           target="_blank"
           rel="noreferrer"
-          className="group"
+          className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
         >
-          <Button style="bulk-outline" size="md">
-            <Image
-              src="./assets/img/others/github-white.svg"
-              width="18"
-              height="16"
-              alt="Github logo"
+          <Image
+            src="/assets/img/others/github-white.svg"
+            width="18"
+            height="16"
+            alt="Github logo"
+          />
+          <span>Star Komiser</span>
+          <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 py-2.5 px-3">
+            <StarIcon
+              width={16}
+              height={16}
+              className="group-hover:fill-warning-600 group-hover:text-warning-600"
             />
-            <span>Star Komiser</span>
-            <div className="ml-2 -mr-6 flex h-full w-16 items-center justify-center gap-2 border-l border-white/10 bg-white/10">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="none"
-                viewBox="0 0 16 16"
-                className="group-hover:fill-warning-600 group-hover:text-warning-600"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="1.5"
-                  d="M9.153 2.34l1.174 2.346c.16.327.586.64.946.7l2.127.354c1.36.226 1.68 1.213.7 2.186L12.447 9.58c-.28.28-.434.82-.347 1.206l.473 2.047c.374 1.62-.486 2.247-1.92 1.4l-1.993-1.18c-.36-.213-.953-.213-1.32 0l-1.993 1.18c-1.427.847-2.294.213-1.92-1.4l.473-2.047c.087-.386-.067-.926-.347-1.206L1.9 7.926c-.973-.973-.66-1.96.7-2.186l2.127-.354c.353-.06.78-.373.94-.7L6.84 2.34c.64-1.274 1.68-1.274 2.313 0z"
-                ></path>
-              </svg>
-              {formatNumber(githubStars)}
-            </div>
-          </Button>
+            {formatNumber(githubStars)}
+          </div>
         </a>
       )}
 

diff --git a/dashboard/components/button/Button.mocks.tsx b/dashboard/components/button/Button.mocks.tsx
@@ -1,3 +1,4 @@
+import EditIcon from '../icons/EditIcon';
 import { ButtonProps } from './Button';
 
 const base: ButtonProps = {
@@ -20,58 +21,33 @@ const secondary: ButtonProps = {
   onClick: () => {}
 };
 
-const bulk: ButtonProps = {
-  children: 'Bulk button',
-  type: 'button',
-  style: 'bulk',
-  size: 'lg',
-  disabled: false,
-  loading: false,
-  onClick: () => {}
-};
-
-const bulkOutline: ButtonProps = {
-  children: 'Bulk button',
+const ghost: ButtonProps = {
+  children: 'Ghost button',
   type: 'button',
-  style: 'bulk-outline',
+  style: 'ghost',
   size: 'lg',
   disabled: false,
   loading: false,
   onClick: () => {}
 };
 
-const outline: ButtonProps = {
-  children: 'Bulk button',
+const text: ButtonProps = {
+  children: 'Text button',
   type: 'button',
-  style: 'outline',
-  size: 'lg',
+  style: 'text',
   disabled: false,
   loading: false,
   onClick: () => {}
 };
-
-const ghost: ButtonProps = {
+const dropdown: ButtonProps = {
   children: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="M9.57 5.93L3.5 12l6.07 6.07M20.5 12H3.67"
-      ></path>
-    </svg>
+    <>
+      <EditIcon width={24} height={24} />
+      Dropdown button
+    </>
   ),
   type: 'button',
-  style: 'ghost',
-  size: 'sm',
+  style: 'dropdown',
   disabled: false,
   loading: false,
   onClick: () => {}
@@ -87,25 +63,13 @@ const deleteButton: ButtonProps = {
   onClick: () => {}
 };
 
-const deleteButtonGhost: ButtonProps = {
-  children: 'Delete button ghost',
-  type: 'button',
-  style: 'delete-ghost',
-  size: 'lg',
-  disabled: false,
-  loading: false,
-  onClick: () => {}
-};
-
 const mockButtonProps = {
   base,
   secondary,
-  bulk,
-  bulkOutline,
-  outline,
   ghost,
-  deleteButton,
-  deleteButtonGhost
+  text,
+  dropdown,
+  deleteButton
 };
 
 export default mockButtonProps;
diff --git a/dashboard/components/button/Button.stories.tsx b/dashboard/components/button/Button.stories.tsx
@@ -42,27 +42,21 @@ export const Secondary: Story = {
   }
 };
 
-export const Bulk: Story = {
+export const Ghost: Story = {
   args: {
-    ...mockButtonProps.bulk
+    ...mockButtonProps.ghost
   }
 };
 
-export const BulkOutline: Story = {
+export const Text: Story = {
   args: {
-    ...mockButtonProps.bulkOutline
+    ...mockButtonProps.text
   }
 };
 
-export const Outline: Story = {
+export const Dropdown: Story = {
   args: {
-    ...mockButtonProps.outline
-  }
-};
-
-export const Ghost: Story = {
-  args: {
-    ...mockButtonProps.ghost
+    ...mockButtonProps.dropdown
   }
 };
 
@@ -71,8 +65,3 @@ export const Delete: Story = {
     ...mockButtonProps.deleteButton
   }
 };
-export const DeleteGhost: Story = {
-  args: {
-    ...mockButtonProps.deleteButtonGhost
-  }
-};
diff --git a/dashboard/components/button/Button.tsx b/dashboard/components/button/Button.tsx
@@ -1,18 +1,11 @@
 import { ReactNode } from 'react';
+import LoadingSpinner from '../icons/LoadingSpinner';
 
 export type ButtonProps = {
   children: ReactNode;
   type?: 'button' | 'submit';
-  style?:
-    | 'primary'
-    | 'secondary'
-    | 'bulk'
-    | 'bulk-outline'
-    | 'outline'
-    | 'ghost'
-    | 'delete'
-    | 'delete-ghost';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  style?: 'primary' | 'secondary' | 'ghost' | 'text' | 'dropdown' | 'delete';
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
   disabled?: boolean;
   loading?: boolean;
   align?: 'left';
@@ -33,14 +26,16 @@ function Button({
   transition = true,
   onClick
 }: ButtonProps) {
-  const xs = 'p-1';
-  const sm = 'h-[2.5rem] px-3';
-  const md = 'h-[3rem] px-6';
-  const lg = 'h-[3.75rem] px-6';
+  const xxs = 'p-1';
+  const xs = 'py-2 px-4';
+  const sm = 'py-2.5 px-6';
+  const md = 'py-3.5 px-6';
+  const lg = 'py-4 px-6';
 
   function handleSize() {
     let buttonSize;
 
+    if (size === 'xxs') buttonSize = xxs;
     if (size === 'xs') buttonSize = xs;
     if (size === 'sm') buttonSize = sm;
     if (size === 'md') buttonSize = md;
@@ -49,78 +44,48 @@ function Button({
     return buttonSize;
   }
 
-  const base = `${handleSize()} ${
-    size === 'lg' ? 'rounded' : 'rounded-lg'
-  } flex items-center ${align ? 'justify-start' : 'justify-center '} ${
-    gap ? 'gap-3' : 'gap-2'
+  const base = `${handleSize()} rounded flex items-center ${
+    align ? 'justify-start' : 'justify-center '
+  } ${
+    gap ? 'gap-3' : 'gap-1'
   }  text-sm font-medium box-border w-full sm:w-auto disabled:cursor-not-allowed ${
     transition ? 'transition-colors' : ''
   }`;
 
-  const primary = `${base} bg-gradient-to-br from-primary bg-secondary hover:bg-primary active:from-secondary active:bg-secondary text-white disabled:from-primary disabled:bg-secondary disabled:opacity-50`;
+  const primary = `${base} font-semibold bg-gradient-to-br from-primary bg-secondary hover:bg-primary active:from-secondary active:bg-secondary text-white disabled:from-primary disabled:bg-secondary disabled:opacity-50`;
 
-  const secondary = `${base} hover:bg-black-100 text-black-900 active:bg-black-150 text-black-400 disabled:hover:bg-transparent disabled:opacity-30`;
+  const secondary = `${base} bg-transparent text-primary border-[1.5px] border-primary hover:bg-komiser-130 active:bg-komiser-200 active:text-primary disabled:bg-transparent disabled:opacity-50`;
 
-  const bulk = `${base} bg-white hover:bg-komiser-200 active:bg-komiser-300 text-secondary  disabled:bg-white disabled:opacity-50`;
+  const ghost = `${base} bg-transparent hover:bg-black-100 active:bg-black-400/20 text-black-800  disabled:bg-transparent disabled:opacity-50`;
 
-  const bulkOutline = `${base} bg-transparent text-white border-2 border-white hover:bg-komiser-100/10 active:bg-transparent active:border-white/50 active:text-white disabled:bg-transparent disabled:opacity-50`;
+  const text = `font-semibold text-sm text-komiser-700 hover:underline active:text-black-800`;
 
-  const outline = `${base} bg-transparent text-primary border-2 border-primary hover:bg-komiser-100 active:border-primary active:text-primary disabled:bg-transparent disabled:opacity-50`;
+  const dropdown = `text-sm font-medium flex items-center gap-2 justify-start p-2 bg-transparent text-black-400 hover:bg-black-150 active:bg-black-200 rounded disabled:bg-transparent disabled:opacity-50`;
 
-  const ghost = `${base} bg-transparent hover:bg-black-400/10 active:bg-black-400/20 text-black-900/60  disabled:bg-transparent disabled:opacity-50`;
-
-  const deleteStyle = `${base} border-2 border-error-600 text-error-600 hover:bg-error-600/5 active:bg-error-600/20 disabled:opacity-50`;
-
-  const deleteGhostStyle = `${base} bg-error-100 text-error-600 hover:bg-error-600 hover:text-white active:bg-error-100 active:text-error-600 disabled:bg-error-600 disabled:text-white`;
+  const deleteStyle = `${base} border-[1.5px] border-error-600 text-error-600 hover:bg-error-100 active:bg-error-600/20 disabled:opacity-50`;
 
   function handleStyle() {
     let buttonStyle;
 
     if (style === 'primary') buttonStyle = primary;
     if (style === 'secondary') buttonStyle = secondary;
-    if (style === 'bulk') buttonStyle = bulk;
-    if (style === 'bulk-outline') buttonStyle = bulkOutline;
-    if (style === 'outline') buttonStyle = outline;
     if (style === 'ghost') buttonStyle = ghost;
-    if (style === 'delete-ghost') buttonStyle = deleteGhostStyle;
+    if (style === 'text') buttonStyle = text;
+    if (style === 'dropdown') buttonStyle = dropdown;
     if (style === 'delete') buttonStyle = deleteStyle;
 
     return buttonStyle;
   }
 
   return (
     <button
-      onClick={onClick}
       type={type}
+      onClick={onClick}
       className={handleStyle()}
       disabled={disabled || loading}
       data-testid={style}
     >
-      {loading && (
-        <>
-          <svg
-            className="h-5 w-5 animate-spin text-inherit"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            data-testid="loading-spinner"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            ></circle>
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-        </>
-      )}
+      {loading && <LoadingSpinner />}
       {children}
     </button>
   );

diff --git a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx
@@ -15,7 +15,7 @@ function DashboardCloudMapError({ fetch }: DashboardCloudMapErrorProps) {
           There was an error loading the cloud map.
         </p>
         <div className="flex-shrink-0">
-          <Button style="outline" size="sm" onClick={fetch}>
+          <Button style="secondary" size="sm" onClick={fetch}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"

diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx
@@ -25,7 +25,7 @@ function DashboardCostExplorerError({
           There was an error loading the cost explorer.
         </p>
         <div className="flex-shrink-0">
-          <Button style="outline" size="sm" onClick={() => fetch()}>
+          <Button style="secondary" size="sm" onClick={() => fetch()}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"

diff --git a/...oard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx b/...oard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx
@@ -14,7 +14,7 @@ function DashboardResourcesManagerError({
           There was an error loading the resources manager.
         </p>
         <div className="flex-shrink-0">
-          <Button style="outline" size="sm" onClick={() => fetch()}>
+          <Button style="secondary" size="sm" onClick={() => fetch()}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,3 +14,5 @@ bin @@
     .vscode/
     .env
     dist/
+    *.go-e