Task/WP-762--Use-Core-Component-Buttons (#381)

* react-strap buttons * submit attribute for formik * edit record modal submit attribute --------- Co-authored-by: Chandra Y <[email protected]>
TACC · Dec 9, 2024 · af08cb6 · af08cb6
1 parent d9633d8
commit af08cb6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 20 deletions.
diff --git a/apcd_cms/src/client/src/components/Admin/ViewUsers/EditRecordModal.tsx b/apcd_cms/src/client/src/components/Admin/ViewUsers/EditRecordModal.tsx
@@ -8,6 +8,7 @@ import {
   Row,
   Col,
 } from 'reactstrap';
+import Button from 'core-components/Button';
 import { Formik, Field, Form, ErrorMessage } from 'formik';
 import { fetchUtil } from 'utils/fetchUtil';
 import * as Yup from 'yup';
@@ -236,9 +237,9 @@ const EditRecordModal: React.FC<EditRecordModalProps> = ({
                 </Row>
                 <br />
                 <Button
-                  type="primary"
                   attr="submit"
                   disabled={isSubmitting || !dirty}
+                  className={styles.customSubmitButton}
                 >
                   Submit
                 </Button>

diff --git a/apcd_cms/src/client/src/components/Forms/Registrations/RegistrationForm.tsx b/apcd_cms/src/client/src/components/Forms/Registrations/RegistrationForm.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
-import { FormGroup, Label, Button, FormFeedback } from 'reactstrap';
-import { useSearchParams } from 'react-router-dom';
+import { FormGroup, Label, FormFeedback } from 'reactstrap';
+import Button from 'core-components/Button';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   RegistrationFormValues,
   transformToRegistrationFormValues,
@@ -214,6 +215,10 @@ export const RegistrationForm: React.FC<{
       : `register/request-to-submit/api/`;
     submitForm({ url, body: values });
   };
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate('/workbench/dashboard');
+  };
 
   if (isLoading) {
     return (
@@ -284,19 +289,15 @@ export const RegistrationForm: React.FC<{
                 </div>
                 {isModal ? (
                   <Button
-                    type="button"
-                    className="c-button c-button--primary"
                     disabled={registrationSubmissionPending}
                     onClick={onSuccessCallback}
                   >
                     Close
                   </Button>
                 ) : (
                   <Button
-                    type="button"
-                    className="c-button c-button--primary"
                     disabled={registrationSubmissionPending}
-                    href="/workbench/dashboard"
+                    onClick={handleClick}
                   >
                     Go to Dashboard
                   </Button>
@@ -436,8 +437,6 @@ export const RegistrationForm: React.FC<{
                 <div className="button-wrapper">
                   <Button
                     className={`c-button c-button--primary ${styles.contactsAndEntitiesButtons}`}
-                    type="button"
-                    color="primary"
                     disabled={values.entities.length === 5}
                     onClick={() =>
                       setFieldValue('entities', [
@@ -467,13 +466,10 @@ export const RegistrationForm: React.FC<{
                     + Add Another Entity
                   </Button>{' '}
                   <Button
-                    className="c-button c-button--secondary"
-                    type="button"
                     onClick={() =>
                       values.entities.length > 1 &&
                       setFieldValue('entities', values.entities.slice(0, -1))
                     }
-                    color="secondary"
                     disabled={values.entities.length === 1}
                   >
                     - Remove Last Entity
@@ -487,8 +483,6 @@ export const RegistrationForm: React.FC<{
                 <div className="button-wrapper">
                   <Button
                     className={`c-button c-button--primary ${styles.contactsAndEntitiesButtons}`}
-                    type="button"
-                    color="primary"
                     disabled={values.contacts.length === 5}
                     onClick={() =>
                       setFieldValue('contacts', [
@@ -506,22 +500,18 @@ export const RegistrationForm: React.FC<{
                     + Add Another Contact
                   </Button>{' '}
                   <Button
-                    className="c-button c-button--secondary"
-                    type="button"
                     onClick={() =>
                       values.contacts.length > 1 &&
                       setFieldValue('contacts', values.contacts.slice(0, -1))
                     }
-                    color="secondary"
                     disabled={values.contacts.length === 1}
                   >
                     - Remove Last Contact
                   </Button>
                 </div>
                 <div className="button-wrapper submit">
                   <Button
-                    type="submit"
-                    color="primary"
+                    attr="submit"
                     className="form-button"
                     disabled={registrationSubmissionPending || !dirty}
                   >