deepfence · milan-deepfence · Feb 7, 2023 · Feb 6, 2023
diff --git a/deepfence_frontend/packages/ui-components/src/components/button/Button.stories.tsx b/deepfence_frontend/packages/ui-components/src/components/button/Button.stories.tsx
@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
 import { FaAmazon } from 'react-icons/fa';
 
 import Button from '@/components/button/Button';
@@ -192,3 +193,20 @@ NormalOutlineButton.args = {
   color: 'normal',
   outline: true,
 };
+
+export const ButtonWithLoaderAndStartIcon = () => {
+  const [state, setState] = useState(false);
+  return (
+    <div>
+      <Button
+        onClick={() => setState(true)}
+        loading={state}
+        color="primary"
+        size="lg"
+        startIcon={<FaAmazon />}
+      >
+        Click to refresh
+      </Button>
+    </div>
+  );
+};
diff --git a/deepfence_frontend/packages/ui-components/src/components/button/Button.tsx b/deepfence_frontend/packages/ui-components/src/components/button/Button.tsx
@@ -1,3 +1,4 @@
+import cx from 'classnames';
 import { cva, VariantProps } from 'cva';
 import React, { ComponentProps, useId } from 'react';
 import { IconContext } from 'react-icons';
@@ -9,7 +10,7 @@ import { ObjectWithNonNullableValues } from '@/types/utils';
 export type ColorType = 'default' | 'primary' | 'danger' | 'success' | 'normal';
 export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-const Loader = ({
+export const Loader = ({
   color,
   size,
   outline,
@@ -246,9 +247,9 @@ const iconCva = cva('', {
     size: {
       xs: 'w-3 h-3',
       sm: 'w-3.5 h-3.5',
-      md: 'w-4.5 h-4.5',
-      lg: 'w-5.5 h-5.5',
-      xl: 'w-5.5 h-5.5',
+      md: 'w-4 h-4',
+      lg: 'w-[18px] h-[18px]',
+      xl: 'w-5 h-5',
     },
     withStartIcon: {
       true: '',
@@ -310,26 +311,54 @@ const iconCva = cva('', {
 });
 
 interface IconProps extends VariantProps<typeof iconCva> {
+  size?: SizeType;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
   id?: string;
+  loading?: boolean;
+  outline?: boolean;
+  color?: ColorType;
 }
 
-const StartIcon = ({ id, startIcon, endIcon, size }: IconProps) => {
+const iconLoaderCva = cva('flex justify-center');
+const StartIcon = ({
+  id,
+  startIcon,
+  endIcon,
+  loading,
+  color,
+  outline,
+  size,
+}: IconProps) => {
   return (
-    <span data-testid={`button-icon-start-${id}`}>
-      <IconContext.Provider
-        value={{
-          className: iconCva({
-            size,
-            withStartIcon: !!startIcon,
-            withEndIcon: !!endIcon,
-          }),
-        }}
-      >
-        {startIcon}
-      </IconContext.Provider>
-    </span>
+    <div data-testid={`button-icon-start-${id}`}>
+      {loading ? (
+        <div
+          className={cx(
+            iconLoaderCva({}),
+            iconCva({
+              size,
+              withStartIcon: !!startIcon,
+              withEndIcon: !!endIcon,
+            }),
+          )}
+        >
+          <Loader color={color} size={size} outline={outline} />
+        </div>
+      ) : (
+        <IconContext.Provider
+          value={{
+            className: iconCva({
+              size,
+              withStartIcon: !!startIcon,
+              withEndIcon: !!endIcon,
+            }),
+          }}
+        >
+          {startIcon}
+        </IconContext.Provider>
+      )}
+    </div>
   );
 };
 
@@ -390,12 +419,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {startIcon && (
-          <StartIcon startIcon={startIcon} endIcon={endIcon} id={_id} size={size} />
-        )}
-        {loading && (
-          <div className="mr-3 flex justify-center">
-            <Loader color={color} size={size} outline={outline} />
-          </div>
+          <StartIcon
+            startIcon={startIcon}
+            endIcon={endIcon}
+            id={_id}
+            size={size}
+            loading={loading}
+            color={color}
+          />
         )}
         {children}
         {endIcon && (

diff --git a/deepfence_frontend/packages/ui-components/src/components/button/IconButton.stories.tsx b/deepfence_frontend/packages/ui-components/src/components/button/IconButton.stories.tsx
@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
 
 import IconButton from '@/components/button/IconButton';
@@ -38,6 +39,22 @@ PrimaryIconSm.args = {
   color: 'primary',
 };
 
+export const IconButtonWithLoader = () => {
+  const [state, setState] = useState(false);
+  return (
+    <div>
+      <IconButton
+        onClick={() => setState(true)}
+        loading={state}
+        color="primary"
+        icon={<FaPlus />}
+      >
+        Click to refresh
+      </IconButton>
+    </div>
+  );
+};
+
 export const PrimaryIconLg = Template.bind({});
 PrimaryIconLg.args = {
   icon: <FaPlus />,

diff --git a/deepfence_frontend/packages/ui-components/src/components/button/IconButton.tsx b/deepfence_frontend/packages/ui-components/src/components/button/IconButton.tsx
@@ -3,6 +3,7 @@ import { ComponentProps, forwardRef, useId } from 'react';
 import { IconContext } from 'react-icons';
 import { twMerge } from 'tailwind-merge';
 
+import { Loader } from '@/components/button/Button';
 import { ObjectWithNonNullableValues } from '@/types/utils';
 
 export type ColorType = 'default' | 'primary' | 'danger' | 'success' | 'normal';
@@ -171,22 +172,26 @@ interface IconButtonProps
     ObjectWithNonNullableValues<Omit<VariantProps<typeof iconButtonCVA>, 'withOutline'>> {
   icon?: React.ReactNode;
   outline?: boolean;
+  loading?: boolean;
 }
 
 const iconCva = cva('', {
   variants: {
     size: {
-      xs: 'w-2.5 h-2.5',
-      sm: 'w-2.5 h-2.5',
-      md: 'w-2.5 h-2.5',
-      lg: 'w-3 h-3',
-      xl: 'w-3 h-3',
+      xs: 'w-3 h-3',
+      sm: 'w-3.5 h-3.5',
+      md: 'w-4 h-4',
+      lg: 'w-[18px] h-[18px]',
+      xl: 'w-5 h-5',
     },
   },
 });
 
 const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ size = 'md', color, disabled, outline, icon, id, className, ...props }, ref) => {
+  (
+    { size = 'md', color, disabled, outline, icon, id, className, loading, ...props },
+    ref,
+  ) => {
     const internalId = useId();
     const _id = id ? id : internalId;
 
@@ -206,7 +211,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         )}
         {...props}
       >
-        {icon && (
+        {icon && !loading && (
           <IconContext.Provider
             value={{
               className: iconCva({
@@ -217,6 +222,11 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             {icon}
           </IconContext.Provider>
         )}
+        {loading && (
+          <div className="flex justify-center">
+            <Loader color={color} size={size} outline={outline} />
+          </div>
+        )}
       </button>
     );
   },

diff --git a/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.stories.tsx b/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.stories.tsx
@@ -11,15 +11,30 @@ const Template: ComponentStory<typeof CircleSpinner> = (args) => (
   <CircleSpinner {...args} />
 );
 
-export const DefaultXS = Template.bind({});
-DefaultXS.args = {
+export const XS = Template.bind({});
+XS.args = {
   size: 'xs',
 };
 
-export const DefaultSM = Template.bind({});
-DefaultSM.args = {
+export const SM = Template.bind({});
+SM.args = {
   size: 'sm',
 };
 
+export const MD = Template.bind({});
+MD.args = {
+  size: 'md',
+};
+
+export const LG = Template.bind({});
+LG.args = {
+  size: 'lg',
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl',
+};
+
 export const Default = Template.bind({});
 Default.args = {};
diff --git a/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.tsx b/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.tsx
@@ -12,11 +12,11 @@ const spinnerCVA = cva(['text-gray-200 animate-spin dark:text-gray-600 fill-blue
   variants: {
     size: {
       default: 'w-8 h-8',
-      xs: 'w-4 h-4',
-      sm: 'w-[18px] h-[18px]',
-      md: 'w-5 h-5',
-      lg: 'w-6 h-6',
-      xl: 'w-7 h-7',
+      xs: 'w-3 h-3',
+      sm: 'w-3.5 h-3.5',
+      md: 'w-4 h-4',
+      lg: 'w-[18px] h-[18px]',
+      xl: 'w-5 h-5',
     },
   },
 });