refactor: extract standard form actions into component

src/components/standardForm/StandardFormActions.module.css

@@ -0,0 +1,4 @@
+.submitButtonLoadingIcon {
+    display: block;
+    margin-right: 8px;
+}

src/components/standardForm/StandardFormActions.tsx

@@ -0,0 +1,36 @@
+import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui'
+import React from 'react'
+import classes from './StandardFormActions.module.css'
+
+function LoadingIcon() {
+    return (
+        <span className={classes.submitButtonLoadingIcon}>
+            <CircularLoader small />
+        </span>
+    )
+}
+
+export function StandardFormActions({
+    cancelLabel,
+    submitLabel,
+    submitting,
+    onCancelClick,
+}: {
+    cancelLabel: string
+    submitLabel: string
+    submitting: boolean
+    onCancelClick: () => void
+}) {
+    return (
+        <ButtonStrip>
+            <Button primary disabled={submitting} type="submit">
+                {submitting && <LoadingIcon />}
+                {submitLabel}
+            </Button>
+
+            <Button disabled={submitting} onClick={onCancelClick}>
+                {cancelLabel}
+            </Button>
+        </ButtonStrip>
+    )
+}

src/components/standardForm/index.ts

@@ -1,3 +1,4 @@
+export { StandardFormActions } from './StandardFormActions'
 export { StandardFormSection } from './StandardFormSection'
 export { StandardFormSectionTitle } from './StandardFormSectionTitle'
 export { StandardFormSectionDescription } from './StandardFormSectionDescription'

src/pages/dataElements/Edit.module.css

@@ -13,8 +13,3 @@
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
     background: var(--colors-white);
 }
-
-.saveButtonLoadingIcon {
-    display: block;
-    margin-right: 8px;
-}

src/pages/dataElements/Edit.tsx

@@ -1,11 +1,13 @@
 import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
-import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
 import { FormApi } from 'final-form'
 import React from 'react'
 import { withTypes } from 'react-final-form'
 import { useNavigate, useParams } from 'react-router-dom'
+import { StandardFormActions } from '../../components'
 import { SCHEMA_SECTIONS } from '../../constants'
 import { getSectionPath } from '../../lib'
+import { JsonPatchOperation } from '../../types'
 import { Attribute, DataElement } from '../../types/generated'
 import { formatFormValues } from './edit'
 import classes from './Edit.module.css'
@@ -120,7 +122,8 @@ export const Component = () => {
             resource: 'dataElements',
             id: dataElementId,
             type: 'json-patch',
-            data: ({ operations }: { operations: any[] }) => operations,
+            data: ({ operations }: { operations: JsonPatchOperation[] }) =>
+                operations,
         } as const
 
         return dataEngine.mutate(ADD_NEW_DATA_ELEMENT_MUTATION, {
@@ -142,27 +145,12 @@ export const Component = () => {
                     </div>
 
                     <div className={classes.formActions}>
-                        <ButtonStrip>
-                            <Button primary disabled={submitting} type="submit">
-                                {submitting && (
-                                    <span
-                                        className={
-                                            classes.saveButtonLoadingIcon
-                                        }
-                                    >
-                                        <CircularLoader small />
-                                    </span>
-                                )}
-                                Save and close
-                            </Button>
-
-                            <Button
-                                disabled={submitting}
-                                onClick={() => navigate(listPath)}
-                            >
-                                Cancel
-                            </Button>
-                        </ButtonStrip>
+                        <StandardFormActions
+                            cancelLabel={i18n.t('Cancel')}
+                            submitLabel={i18n.t('Save and close')}
+                            submitting={submitting}
+                            onCancelClick={() => navigate(listPath)}
+                        />
                     </div>
                 </form>
             )}

src/pages/dataElements/New.module.css

@@ -3,8 +3,3 @@
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
-
-.saveButtonLoadingIcon {
-    display: block;
-    margin-right: 8px;
-}

src/pages/dataElements/New.tsx

@@ -1,12 +1,13 @@
 import { useDataEngine } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
 import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { Form } from 'react-final-form'
 import { useNavigate } from 'react-router-dom'
-import { StandardFormSection } from '../../components'
+import { StandardFormActions, StandardFormSection } from '../../components'
 import { SCHEMA_SECTIONS } from '../../constants'
 import { getSectionPath } from '../../lib'
-import { Attribute, DataElement } from '../../types/generated'
+import { Attribute } from '../../types/generated'
 import { DataElementFormFields, useCustomAttributesQuery } from './form'
 import { FormValues } from './form/types'
 import classes from './New.module.css'
@@ -135,31 +136,12 @@ export const Component = () => {
                         <DataElementFormFields />
 
                         <StandardFormSection>
-                            <ButtonStrip>
-                                <Button
-                                    primary
-                                    disabled={submitting}
-                                    type="submit"
-                                >
-                                    {submitting && (
-                                        <span
-                                            className={
-                                                classes.saveButtonLoadingIcon
-                                            }
-                                        >
-                                            <CircularLoader small />
-                                        </span>
-                                    )}
-                                    Create data element
-                                </Button>
-
-                                <Button
-                                    disabled={submitting}
-                                    onClick={() => navigate(listPath)}
-                                >
-                                    Exit without saving
-                                </Button>
-                            </ButtonStrip>
+                            <StandardFormActions
+                                cancelLabel={i18n.t('Create data element')}
+                                submitLabel={i18n.t('Exit without saving')}
+                                submitting={submitting}
+                                onCancelClick={() => navigate(listPath)}
+                            />
                         </StandardFormSection>
                     </div>
                 </form>