fix(submit) use action button and remove duplicate submit button to h…

…ave a consistent loading button behaviour with vanilla guidelines Signed-off-by: David Edler <[email protected]>
canonical · Feb 26, 2024 · cc03dbd · cc03dbd
1 parent 95a38d3
commit cc03dbd
Show file tree

Hide file tree

Showing 27 changed files with 241 additions and 242 deletions.
diff --git a/src/components/RenameHeader.tsx b/src/components/RenameHeader.tsx
@@ -1,6 +1,10 @@
 import { FC, ReactNode } from "react";
-import { Button, Input, Tooltip } from "@canonical/react-components";
-import SubmitButton from "components/SubmitButton";
+import {
+  ActionButton,
+  Button,
+  Input,
+  Tooltip,
+} from "@canonical/react-components";
 import { FormikProps } from "formik/dist/types";
 import classnames from "classnames";
 
@@ -83,14 +87,14 @@ const RenameHeader: FC<Props> = ({
                     >
                       Cancel
                     </Button>
-                    <SubmitButton
-                      isSubmitting={formik.isSubmitting}
-                      isDisabled={
-                        !formik.isValid || name === formik.values.name
-                      }
-                      buttonLabel="Save"
+                    <ActionButton
+                      appearance="positive"
+                      loading={formik.isSubmitting}
+                      disabled={!formik.isValid || name === formik.values.name}
                       onClick={() => void formik.submitForm()}
-                    />
+                    >
+                      Save
+                    </ActionButton>
                   </div>
                 </li>
               ) : (

diff --git a/src/components/SubmitButton.tsx b/src/components/SubmitButton.tsx
diff --git a/src/components/forms/SnapshotForm.tsx b/src/components/forms/SnapshotForm.tsx
@@ -1,5 +1,6 @@
 import { FC, KeyboardEvent } from "react";
 import {
+  ActionButton,
   Button,
   Col,
   Form,
@@ -8,7 +9,6 @@ import {
   Row,
 } from "@canonical/react-components";
 import { getTomorrow } from "util/helpers";
-import SubmitButton from "components/SubmitButton";
 import { SnapshotFormValues } from "util/snapshots";
 import { FormikProps } from "formik/dist/types";
 
@@ -27,10 +27,6 @@ const SnapshotForm: FC<Props> = (props) => {
     }
   };
 
-  const submitForm = () => {
-    void formik.submitForm();
-  };
-
   return (
     <Modal
       className="snapshot-creation-modal"
@@ -46,12 +42,14 @@ const SnapshotForm: FC<Props> = (props) => {
           >
             Cancel
           </Button>
-          <SubmitButton
-            isSubmitting={formik.isSubmitting}
-            isDisabled={!formik.isValid}
-            buttonLabel={isEdit ? "Save" : "Create"}
-            onClick={submitForm}
-          />
+          <ActionButton
+            appearance="positive"
+            loading={formik.isSubmitting}
+            disabled={!formik.isValid}
+            onClick={() => void formik.submitForm()}
+          >
+            {isEdit ? "Save" : "Create"}
+          </ActionButton>
         </>
       }
       onKeyDown={handleEscKey}

diff --git a/src/pages/cluster/ClusterGroupForm.tsx b/src/pages/cluster/ClusterGroupForm.tsx
@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import {
+  ActionButton,
   Button,
   Col,
   Form,
@@ -18,7 +19,6 @@ import { LxdClusterGroup } from "types/cluster";
 import * as Yup from "yup";
 import { checkDuplicateName } from "util/helpers";
 import { useFormik } from "formik";
-import SubmitButton from "components/SubmitButton";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "@use-it/event-listener";
 import { useNavigate, useParams } from "react-router-dom";
@@ -172,12 +172,14 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
             <Button appearance="base" onClick={() => navigate(`/ui/cluster`)}>
               Cancel
             </Button>
-            <SubmitButton
-              isSubmitting={formik.isSubmitting}
-              isDisabled={!formik.isValid || !formik.values.name}
-              buttonLabel={group ? "Save changes" : "Create"}
+            <ActionButton
+              appearance="positive"
+              loading={formik.isSubmitting}
+              disabled={!formik.isValid || !formik.values.name}
               onClick={() => void formik.submitForm()}
-            />
+            >
+              {group ? "Save changes" : "Create"}
+            </ActionButton>
           </Col>
         </Row>
       </div>

diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactNode, useEffect, useState } from "react";
 import {
+  ActionButton,
   Button,
   Col,
   Form,
@@ -13,7 +14,6 @@ import * as Yup from "yup";
 import { createInstance, startInstance } from "api/instances";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import SubmitButton from "components/SubmitButton";
 import { LxdImageType, RemoteImage } from "types/image";
 import { isContainerOnlyImage, isVmOnlyImage, LOCAL_ISO } from "util/images";
 import { checkDuplicateName } from "util/helpers";
@@ -445,20 +445,23 @@ const CreateInstance: FC = () => {
         >
           Cancel
         </Button>
-        <SubmitButton
-          isSubmitting={formik.isSubmitting}
-          isDisabled={hasErrors}
-          buttonLabel="Create"
+        <ActionButton
+          loading={formik.isSubmitting}
+          disabled={hasErrors}
           appearance={isLocalIsoImage ? "positive" : "default"}
           onClick={() => submit(formik.values, false)}
-        />
+        >
+          Create
+        </ActionButton>
         {!isLocalIsoImage && (
-          <SubmitButton
-            isSubmitting={formik.isSubmitting}
-            isDisabled={hasErrors}
-            buttonLabel="Create and start"
+          <ActionButton
+            appearance="positive"
+            loading={formik.isSubmitting}
+            disabled={hasErrors}
             onClick={() => submit(formik.values)}
-          />
+          >
+            Create and start
+          </ActionButton>
         )}
       </FormFooterLayout>
     </BaseLayout>

diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import {
+  ActionButton,
   Button,
   Col,
   Form,
@@ -10,7 +11,6 @@ import { useFormik } from "formik";
 import { updateInstance } from "api/instances";
 import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import SubmitButton from "components/SubmitButton";
 import { dump as dumpYaml } from "js-yaml";
 import { yamlToObject } from "util/yaml";
 import { useNavigate, useParams } from "react-router-dom";
@@ -253,16 +253,18 @@ const EditInstance: FC<Props> = ({ instance }) => {
             >
               Cancel
             </Button>
-            <SubmitButton
-              isSubmitting={formik.isSubmitting}
-              isDisabled={
+            <ActionButton
+              appearance="positive"
+              loading={formik.isSubmitting}
+              disabled={
                 !formik.isValid ||
                 hasDiskError(formik) ||
                 hasNetworkError(formik)
               }
-              buttonLabel="Save changes"
               onClick={() => void formik.submitForm()}
-            />
+            >
+              Save changes
+            </ActionButton>
           </>
         )}
       </FormFooterLayout>

diff --git a/src/pages/instances/InstanceConsole.tsx b/src/pages/instances/InstanceConsole.tsx
@@ -1,5 +1,6 @@
 import { FC, useState } from "react";
 import {
+  ActionButton,
   Button,
   ContextualMenu,
   EmptyState,
@@ -10,7 +11,6 @@ import {
 import InstanceGraphicConsole from "./InstanceGraphicConsole";
 import { LxdInstance } from "types/instance";
 import InstanceTextConsole from "./InstanceTextConsole";
-import SubmitButton from "components/SubmitButton";
 import { useInstanceStart } from "util/instanceStart";
 import {
   sendAltF4,
@@ -116,12 +116,13 @@ const InstanceConsole: FC<Props> = ({ instance }) => {
           title="Instance stopped"
         >
           <p>Start the instance to access the graphic console.</p>
-          <SubmitButton
-            isSubmitting={isLoading}
-            isDisabled={false}
-            buttonLabel="Start instance"
+          <ActionButton
+            appearance="positive"
+            loading={isLoading}
             onClick={handleStart}
-          />
+          >
+            Start instance
+          </ActionButton>
         </EmptyState>
       )}
       {isGraphic && isRunning && (

diff --git a/src/pages/instances/InstanceTerminal.tsx b/src/pages/instances/InstanceTerminal.tsx
@@ -9,11 +9,15 @@ import { TerminalConnectPayload } from "types/terminal";
 import Loader from "components/Loader";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import { LxdInstance } from "types/instance";
-import SubmitButton from "components/SubmitButton";
 import { useInstanceStart } from "util/instanceStart";
 import Xterm from "components/Xterm";
 import { Terminal } from "xterm";
-import { EmptyState, Icon, useNotify } from "@canonical/react-components";
+import {
+  ActionButton,
+  EmptyState,
+  Icon,
+  useNotify,
+} from "@canonical/react-components";
 import NotificationRow from "components/NotificationRow";
 
 const XTERM_OPTIONS = {
@@ -219,12 +223,13 @@ const InstanceTerminal: FC<Props> = ({ instance }) => {
           title="Instance stopped"
         >
           <p>Start the instance to access the terminal.</p>
-          <SubmitButton
-            isSubmitting={isStartLoading}
-            isDisabled={false}
-            buttonLabel="Start instance"
+          <ActionButton
+            appearance="positive"
+            loading={isStartLoading}
             onClick={handleStart}
-          />
+          >
+            Start instance
+          </ActionButton>
         </EmptyState>
       )}
     </div>

diff --git a/src/pages/instances/MigrateInstanceForm.tsx b/src/pages/instances/MigrateInstanceForm.tsx
@@ -1,5 +1,11 @@
 import { FC, KeyboardEvent } from "react";
-import { Button, Form, Modal, Select } from "@canonical/react-components";
+import {
+  ActionButton,
+  Button,
+  Form,
+  Modal,
+  Select,
+} from "@canonical/react-components";
 import * as Yup from "yup";
 import { useFormik } from "formik";
 import { LxdClusterMember } from "types/cluster";
@@ -57,14 +63,14 @@ const MigrateInstanceForm: FC<Props> = ({
           >
             Cancel
           </Button>
-          <Button
-            className="u-no-margin--bottom"
+          <ActionButton
             appearance="positive"
-            onClick={formik.submitForm}
+            className="u-no-margin--bottom"
+            onClick={() => void formik.submitForm()}
             disabled={!formik.isValid}
           >
             Migrate
-          </Button>
+          </ActionButton>
         </>
       }
       onKeyDown={handleEscKey}

diff --git a/src/pages/instances/TerminalPayloadForm.tsx b/src/pages/instances/TerminalPayloadForm.tsx
@@ -1,5 +1,12 @@
 import { FC, KeyboardEvent, useEffect, useRef } from "react";
-import { Button, Form, Icon, Input, Modal } from "@canonical/react-components";
+import {
+  ActionButton,
+  Button,
+  Form,
+  Icon,
+  Input,
+  Modal,
+} from "@canonical/react-components";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "@use-it/event-listener";
 import { TerminalConnectPayload } from "types/terminal";
@@ -81,14 +88,14 @@ const TerminalPayloadForm: FC<Props> = ({ payload, close, reconnect }) => {
           >
             Cancel
           </Button>
-          <Button
+          <ActionButton
             className="u-no-margin--bottom"
             appearance="positive"
             aria-label="submit reconnect"
-            onClick={formik.submitForm}
+            onClick={() => void formik.submitForm()}
           >
             Reconnect
-          </Button>
+          </ActionButton>
         </>
       }
       onKeyDown={handleEscKey}