refactor(ui): remove some duplication with buttons (#3615)

flipt-io · Nov 14, 2024 · 3b647a4 · 3b647a4
1 parent 39ef97c
commit 3b647a4
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 133 deletions.
diff --git a/ui/src/app/flags/Flags.tsx b/ui/src/app/flags/Flags.tsx
@@ -1,12 +1,11 @@
-import { PlusIcon } from '@heroicons/react/24/outline';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
 import { selectReadonly } from '~/app/meta/metaSlice';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import EmptyState from '~/components/EmptyState';
 import FlagTable from '~/components/flags/FlagTable';
-import Button from '~/components/forms/buttons/Button';
+import { ButtonWithPlus } from '~/components/forms/buttons/Button';
 import { useError } from '~/data/hooks/error';
 import { useListFlagsQuery } from './flagsApi';
 
@@ -43,17 +42,13 @@ export default function Flags() {
         </div>
         <div className="mt-4">
           <Link to={`${path}/new`}>
-            <Button
+            <ButtonWithPlus
               variant="primary"
               disabled={readOnly}
               title={readOnly ? 'Not allowed in Read-Only mode' : undefined}
             >
-              <PlusIcon
-                className="-ml-1.5 mr-1 h-5 w-5 text-white"
-                aria-hidden="true"
-              />
-              <span>New Flag</span>
-            </Button>
+              New Flag
+            </ButtonWithPlus>
           </Link>
         </div>
       </div>

diff --git a/ui/src/app/flags/rules/Rules.tsx b/ui/src/app/flags/rules/Rules.tsx
@@ -13,7 +13,7 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy
 } from '@dnd-kit/sortable';
-import { PlusIcon, StarIcon } from '@heroicons/react/24/outline';
+import { StarIcon } from '@heroicons/react/24/outline';
 import { Form, Formik } from 'formik';
 import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -27,7 +27,7 @@ import { selectReadonly } from '~/app/meta/metaSlice';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import { useListSegmentsQuery } from '~/app/segments/segmentsApi';
 import EmptyState from '~/components/EmptyState';
-import Button from '~/components/forms/buttons/Button';
+import { ButtonWithPlus, TextButton } from '~/components/forms/buttons/Button';
 
 import Loading from '~/components/Loading';
 import Modal from '~/components/Modal';
@@ -50,7 +50,6 @@ import {
 } from '~/types/Variant';
 import { useUpdateFlagMutation } from '~/app/flags/flagsApi';
 import { INamespace } from '~/types/Namespace';
-import TextButton from '~/components/forms/buttons/TextButton';
 import SingleDistributionFormInput from '~/components/rules/forms/SingleDistributionForm';
 
 type RulesProps = {
@@ -415,19 +414,15 @@ export default function Rules() {
           </div>
           {((rules && rules.length > 0) || showDefaultVariant) && (
             <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-              <Button
+              <ButtonWithPlus
                 variant="primary"
                 type="button"
                 onClick={() => setShowRuleForm(true)}
                 disabled={readOnly}
                 title={readOnly ? 'Not allowed in Read-Only mode' : undefined}
               >
-                <PlusIcon
-                  className="-ml-1.5 mr-1 h-5 w-5 text-white"
-                  aria-hidden="true"
-                />
                 New Rule
-              </Button>
+              </ButtonWithPlus>
             </div>
           )}
         </div>

diff --git a/ui/src/app/namespaces/Namespaces.tsx b/ui/src/app/namespaces/Namespaces.tsx
@@ -1,9 +1,8 @@
-import { PlusIcon } from '@heroicons/react/24/outline';
 import { useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { selectReadonly } from '~/app/meta/metaSlice';
 import EmptyState from '~/components/EmptyState';
-import Button from '~/components/forms/buttons/Button';
+import { ButtonWithPlus } from '~/components/forms/buttons/Button';
 import Modal from '~/components/Modal';
 import NamespaceForm from '~/components/namespaces/NamespaceForm';
 import NamespaceTable from '~/components/namespaces/NamespaceTable';
@@ -88,7 +87,7 @@ export default function Namespaces() {
             </p>
           </div>
           <div className="mt-4">
-            <Button
+            <ButtonWithPlus
               variant="primary"
               disabled={readOnly}
               title={readOnly ? 'Not allowed in Read-Only mode' : undefined}
@@ -97,12 +96,8 @@ export default function Namespaces() {
                 setShowNamespaceForm(true);
               }}
             >
-              <PlusIcon
-                className="-ml-1.5 mr-1 h-5 w-5 text-white"
-                aria-hidden="true"
-              />
-              <span>New Namespace</span>
-            </Button>
+              New Namespace
+            </ButtonWithPlus>
           </div>
         </div>
 

diff --git a/ui/src/app/segments/Segments.tsx b/ui/src/app/segments/Segments.tsx
@@ -1,12 +1,11 @@
-import { PlusIcon } from '@heroicons/react/24/outline';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
 import { selectReadonly } from '~/app/meta/metaSlice';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import { useListSegmentsQuery } from '~/app/segments/segmentsApi';
 import EmptyState from '~/components/EmptyState';
-import Button from '~/components/forms/buttons/Button';
+import { ButtonWithPlus } from '~/components/forms/buttons/Button';
 import SegmentTable from '~/components/segments/SegmentTable';
 import { useError } from '~/data/hooks/error';
 
@@ -43,17 +42,13 @@ export default function Segments() {
         </div>
         <div className="mt-4">
           <Link to={`${path}/new`}>
-            <Button
+            <ButtonWithPlus
               variant="primary"
               disabled={readOnly}
               title={readOnly ? 'Not allowed in Read-Only mode' : undefined}
             >
-              <PlusIcon
-                className="-ml-1.5 mr-1 h-5 w-5 text-white"
-                aria-hidden="true"
-              />
-              <span>New Segment</span>
-            </Button>
+              New Segment
+            </ButtonWithPlus>
           </Link>
         </div>
       </div>

diff --git a/ui/src/app/tokens/Tokens.tsx b/ui/src/app/tokens/Tokens.tsx
@@ -1,12 +1,11 @@
-import { PlusIcon } from '@heroicons/react/24/outline';
 import { useMemo, useRef, useState } from 'react';
 import { useListAuthProvidersQuery } from '~/app/auth/authApi';
 import {
   useDeleteTokensMutation,
   useListTokensQuery
 } from '~/app/tokens/tokensApi';
 import EmptyState from '~/components/EmptyState';
-import Button from '~/components/forms/buttons/Button';
+import { ButtonWithPlus } from '~/components/forms/buttons/Button';
 import Loading from '~/components/Loading';
 import Modal from '~/components/Modal';
 import DeletePanel from '~/components/panels/DeletePanel';
@@ -143,13 +142,12 @@ export default function Tokens() {
           </div>
           {tokenAuthEnabled && tokens?.length > 0 && (
             <div className="mt-4">
-              <Button variant="primary" onClick={() => setShowTokenForm(true)}>
-                <PlusIcon
-                  className="-ml-1.5 mr-1 h-5 w-5 text-white"
-                  aria-hidden="true"
-                />
-                <span>New Token</span>
-              </Button>
+              <ButtonWithPlus
+                variant="primary"
+                onClick={() => setShowTokenForm(true)}
+              >
+                New Token
+              </ButtonWithPlus>
             </div>
           )}
         </div>

diff --git a/ui/src/components/forms/SegmentsPicker.tsx b/ui/src/components/forms/SegmentsPicker.tsx
@@ -1,8 +1,9 @@
-import { MinusSmallIcon, PlusSmallIcon } from '@heroicons/react/24/outline';
+import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
 import { useEffect, useRef, useState } from 'react';
 import Combobox from '~/components/forms/Combobox';
 import { FilterableSegment, ISegment } from '~/types/Segment';
-import { cls, truncateKey } from '~/utils/helpers';
+import { truncateKey } from '~/utils/helpers';
+import { ButtonIcon } from './buttons/Button';
 
 type SegmentPickerProps = {
   readonly?: boolean;
@@ -97,31 +98,17 @@ export default function SegmentsPicker({
             />
           </div>
           {editing && parentSegments.length - 1 === index ? (
-            <div>
-              <button
-                type="button"
-                className={cls('mt-2 text-gray-400 hover:text-gray-500', {
-                  'hover:text-gray-400': readonly
-                })}
-                onClick={() => setEditing(false)}
-                title={readonly ? 'Not allowed in Read-Only mode' : undefined}
-                disabled={readonly}
-              >
-                <PlusSmallIcon className="h-6 w-6" aria-hidden="true" />
-              </button>
-            </div>
+            <ButtonIcon
+              icon={faPlus}
+              onClick={() => setEditing(false)}
+              disabled={readonly}
+            />
           ) : (
-            <div>
-              <button
-                type="button"
-                className="mt-2 text-gray-400 hover:text-gray-500"
-                onClick={() => handleSegmentRemove(index)}
-                title={readonly ? 'Not allowed in Read-Only mode' : undefined}
-                disabled={readonly}
-              >
-                <MinusSmallIcon className="h-6 w-6" aria-hidden="true" />
-              </button>
-            </div>
+            <ButtonIcon
+              icon={faMinus}
+              onClick={() => handleSegmentRemove(index)}
+              disabled={readonly}
+            />
           )}
         </div>
       ))}

diff --git a/ui/src/components/forms/buttons/Button.tsx b/ui/src/components/forms/buttons/Button.tsx
@@ -1,10 +1,13 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { cls } from '~/utils/helpers';
 
 export type ButtonProps = {
   children: React.ReactNode;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'secondary' | 'soft';
+  variant?: 'primary' | 'secondary' | 'soft' | 'link';
   className?: string;
   title?: string;
   disabled?: boolean;
@@ -37,7 +40,9 @@ export default function Button(props: ButtonProps) {
           'border border-violet-300 bg-white text-gray-500 shadow-sm enabled:hover:bg-gray-50 enabled:focus:ring-gray-500':
             variant === 'secondary',
           'border-violet-300 text-violet-600 enabled:hover:bg-violet-100 enabled:focus:ring-violet-500':
-            variant === 'soft'
+            variant === 'soft',
+          'enabled:cursor-hand enabled:cursor mb-1 inline-flex items-center justify-center border-0 px-0 py-0 text-sm font-medium text-gray-300 focus:outline-none focus:ring-0 enabled:text-gray-500 enabled:hover:text-gray-600 disabled:cursor-not-allowed':
+            variant === 'link'
         }
       )}
       disabled={disabled}
@@ -47,3 +52,42 @@ export default function Button(props: ButtonProps) {
     </button>
   );
 }
+
+export const ButtonWithPlus = (props: ButtonProps) => {
+  return (
+    <Button {...props}>
+      <FontAwesomeIcon
+        icon={faPlus}
+        className="-ml-1.5 mr-1.5 h-4 w-4 text-gray-200"
+        aria-hidden="true"
+      />
+      {props.children}
+    </Button>
+  );
+};
+
+export const TextButton = (props: ButtonProps) => {
+  return <Button {...props} variant="link" />;
+};
+
+export const ButtonIcon = ({
+  icon,
+  onClick,
+  disabled = false
+}: {
+  icon: IconProp;
+  onClick: () => void;
+  disabled: boolean;
+}) => (
+  <button
+    type="button"
+    className={cls('p-1 text-gray-300 hover:text-gray-500', {
+      'hover:text-gray-400': disabled
+    })}
+    onClick={onClick}
+    title={disabled ? 'Not allowed in Read-Only mode' : undefined}
+    disabled={disabled}
+  >
+    <FontAwesomeIcon icon={icon} className="h-4 w-4" aria-hidden="true" />
+  </button>
+);
diff --git a/ui/src/components/forms/buttons/TextButton.tsx b/ui/src/components/forms/buttons/TextButton.tsx
diff --git a/ui/src/components/notifications/ErrorNotification.tsx b/ui/src/components/notifications/ErrorNotification.tsx
@@ -32,7 +32,7 @@ export default function ErrorNotification() {
                   onClick={() => {
                     clearError();
                   }}
-                  className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                  className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-red-50"
                 >
                   <span className="sr-only">Dismiss</span>
                   <XMarkIcon className="h-4 w-4" aria-hidden="true" />