From 6e530d45bcb8a79ead58096a71900723951320d6 Mon Sep 17 00:00:00 2001
From: Maria Alexandra <239999+axelavargas@users.noreply.github.com>
Date: Wed, 4 May 2022 18:36:14 +0200
Subject: [PATCH] grafana/ui: Add default type="button" to <Button> (#48183)

---
 .../src/components/Button/Button.tsx           | 18 ++++++++++++++++--
 .../ForgottenPassword/ForgottenPassword.tsx    |  2 +-
 public/app/core/components/Login/LoginForm.tsx |  7 ++++++-
 .../SharedPreferences/SharedPreferences.tsx    |  6 +++++-
 .../app/core/components/Signup/VerifyEmail.tsx |  2 +-
 public/app/features/admin/AdminEditOrgPage.tsx |  4 +++-
 .../app/features/admin/CrawlerStartButton.tsx  |  4 +++-
 .../components/admin/AddAlertManagerModal.tsx  |  4 +++-
 .../components/receivers/ReceiversSection.tsx  |  4 +++-
 .../components/receivers/TemplateForm.tsx      |  6 +++++-
 public/app/features/api-keys/ApiKeysForm.tsx   |  4 +++-
 public/app/features/canvas/elements/button.tsx |  6 +++++-
 .../DashboardSettings/DashboardSettings.tsx    |  4 +++-
 .../DashboardSettings/JsonEditorSettings.tsx   |  4 +++-
 .../forms/SaveProvisionedDashboardForm.tsx     |  4 +++-
 .../features/profile/ChangePasswordForm.tsx    |  2 +-
 .../features/profile/UserProfileEditForm.tsx   |  1 +
 17 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index bfe0ad73563..978d7dea8fa 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -23,12 +23,26 @@ type CommonProps = {
   className?: string;
   children?: React.ReactNode;
   fullWidth?: boolean;
+  type?: string;
 };
 
 export type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'primary', size = 'md', fill = 'solid', icon, fullWidth, children, className, ...otherProps }, ref) => {
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      fill = 'solid',
+      icon,
+      fullWidth,
+      children,
+      className,
+      type = 'button',
+      ...otherProps
+    },
+    ref
+  ) => {
     const theme = useTheme2();
     const styles = getButtonStyles({
       theme,
@@ -45,7 +59,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
 
     return (
-      <button className={cx(styles.button, className)} {...otherProps} ref={ref}>
+      <button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
         {icon && <Icon name={icon} size={size} className={styles.icon} />}
         {children && <span className={styles.content}>{children}</span>}
       </button>
diff --git a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
index c375b9bcff1..23f68a715c2 100644
--- a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
+++ b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
@@ -59,7 +59,7 @@ export const ForgottenPassword: FC = () => {
             />
           </Field>
           <HorizontalGroup>
-            <Button>Send reset email</Button>
+            <Button type="submit">Send reset email</Button>
             <LinkButton fill="text" href={loginHref}>
               Back to login
             </LinkButton>
diff --git a/public/app/core/components/Login/LoginForm.tsx b/public/app/core/components/Login/LoginForm.tsx
index 9364c5a0c13..7798b75a748 100644
--- a/public/app/core/components/Login/LoginForm.tsx
+++ b/public/app/core/components/Login/LoginForm.tsx
@@ -49,7 +49,12 @@ export const LoginForm: FC<Props> = ({ children, onSubmit, isLoggingIn, password
                 {...register('password', { required: 'Password is required' })}
               />
             </Field>
-            <Button aria-label={selectors.pages.Login.submit} className={submitButton} disabled={isLoggingIn}>
+            <Button
+              type="submit"
+              aria-label={selectors.pages.Login.submit}
+              className={submitButton}
+              disabled={isLoggingIn}
+            >
               {isLoggingIn ? 'Logging in...' : 'Log in'}
             </Button>
             {children}
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 376bcfc41d7..de072f5189c 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -207,7 +207,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
               </Field>
 
               <div className="gf-form-button-row">
-                <Button variant="primary" data-testid={selectors.components.UserProfile.preferencesSaveButton}>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  data-testid={selectors.components.UserProfile.preferencesSaveButton}
+                >
                   <Trans id="common.save">Save</Trans>
                 </Button>
               </div>
diff --git a/public/app/core/components/Signup/VerifyEmail.tsx b/public/app/core/components/Signup/VerifyEmail.tsx
index 81eab2cc66b..f01684bb50c 100644
--- a/public/app/core/components/Signup/VerifyEmail.tsx
+++ b/public/app/core/components/Signup/VerifyEmail.tsx
@@ -61,7 +61,7 @@ export const VerifyEmail: FC = () => {
             />
           </Field>
           <HorizontalGroup>
-            <Button>Send verification email</Button>
+            <Button type="submit">Send verification email</Button>
             <LinkButton fill="text" href={getConfig().appSubUrl + '/login'}>
               Back to login
             </LinkButton>
diff --git a/public/app/features/admin/AdminEditOrgPage.tsx b/public/app/features/admin/AdminEditOrgPage.tsx
index 9afb7c4484c..44bc10e0134 100644
--- a/public/app/features/admin/AdminEditOrgPage.tsx
+++ b/public/app/features/admin/AdminEditOrgPage.tsx
@@ -85,7 +85,9 @@ export default function AdminEditOrgPage({ match }: Props) {
                   <Field label="Name" invalid={!!errors.orgName} error="Name is required" disabled={!canWriteOrg}>
                     <Input {...register('orgName', { required: true })} id="org-name-input" />
                   </Field>
-                  <Button disabled={!canWriteOrg}>Update</Button>
+                  <Button type="submit" disabled={!canWriteOrg}>
+                    Update
+                  </Button>
                 </>
               )}
             </Form>
diff --git a/public/app/features/admin/CrawlerStartButton.tsx b/public/app/features/admin/CrawlerStartButton.tsx
index 3cceb47b7f3..69824c08f0f 100644
--- a/public/app/features/admin/CrawlerStartButton.tsx
+++ b/public/app/features/admin/CrawlerStartButton.tsx
@@ -39,7 +39,9 @@ export const CrawlerStartButton = () => {
           />
         </div>
         <Modal.ButtonRow>
-          <Button onClick={doStart}>Start</Button>
+          <Button type="submit" onClick={doStart}>
+            Start
+          </Button>
           <Button variant="secondary" onClick={onDismiss}>
             Cancel
           </Button>
diff --git a/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx b/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx
index 05cdfebf444..4549e02be71 100644
--- a/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx
+++ b/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx
@@ -82,7 +82,9 @@ export const AddAlertManagerModal: FC<Props> = ({ alertmanagers, onChangeAlertma
               )}
             </FieldArray>
             <div>
-              <Button onSubmit={() => onSubmit}>Add Alertmanagers</Button>
+              <Button type="submit" onSubmit={() => onSubmit}>
+                Add Alertmanagers
+              </Button>
             </div>
           </div>
         )}
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
index 93c14ce10cd..9c096dc8b60 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
@@ -33,7 +33,9 @@ export const ReceiversSection: FC<Props> = ({
         </div>
         {showButton && (
           <Link to={addButtonTo}>
-            <Button icon="plus">{addButtonLabel}</Button>
+            <Button type="button" icon="plus">
+              {addButtonLabel}
+            </Button>
           </Link>
         )}
       </div>
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index 6d66b8ad83f..1777b4cfe35 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -152,7 +152,11 @@ export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, conf
             Saving...
           </Button>
         )}
-        {!loading && <Button variant="primary">Save template</Button>}
+        {!loading && (
+          <Button type="submit" variant="primary">
+            Save template
+          </Button>
+        )}
         <LinkButton
           disabled={loading}
           href={makeAMLink('alerting/notifications', alertManagerSourceName)}
diff --git a/public/app/features/api-keys/ApiKeysForm.tsx b/public/app/features/api-keys/ApiKeysForm.tsx
index d8a50a02b9f..973c4a9004f 100644
--- a/public/app/features/api-keys/ApiKeysForm.tsx
+++ b/public/app/features/api-keys/ApiKeysForm.tsx
@@ -99,7 +99,9 @@ export const ApiKeysForm: FC<Props> = ({ show, onClose, onKeyAdded, disabled })
               </InlineField>
             </div>
             <div className="gf-form">
-              <Button disabled={disabled}>Add</Button>
+              <Button type="submit" disabled={disabled}>
+                Add
+              </Button>
             </div>
           </div>
         </form>
diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx
index 03f413012c4..1aebc39d5f9 100644
--- a/public/app/features/canvas/elements/button.tsx
+++ b/public/app/features/canvas/elements/button.tsx
@@ -27,7 +27,11 @@ class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, Butto
       }
     };
 
-    return <Button onClick={onClick}>{data?.text}</Button>;
+    return (
+      <Button type="submit" onClick={onClick}>
+        {data?.text}
+      </Button>
+    );
   }
 }
 
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 886716a6af1..1137e6de801 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -41,7 +41,9 @@ const onClose = () => locationService.partial({ editview: null });
 const MakeEditable = (props: { onMakeEditable: () => any }) => (
   <div>
     <div className="dashboard-settings__header">Dashboard not editable</div>
-    <Button onClick={props.onMakeEditable}>Make editable</Button>
+    <Button type="submit" onClick={props.onMakeEditable}>
+      Make editable
+    </Button>
   </div>
 );
 
diff --git a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
index 55e9317942e..7dea62f90a5 100644
--- a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
@@ -54,7 +54,9 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
       </div>
       {dashboard.meta.canSave && (
         <HorizontalGroup>
-          <Button onClick={onClick}>Save changes</Button>
+          <Button type="submit" onClick={onClick}>
+            Save changes
+          </Button>
         </HorizontalGroup>
       )}
     </div>
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index 8fc0075998e..8fdb65546d6 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -67,7 +67,9 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
           <ClipboardButton getText={() => dashboardJSON} onClipboardCopy={onCopyToClipboardSuccess}>
             Copy JSON to clipboard
           </ClipboardButton>
-          <Button onClick={saveToFile}>Save JSON to file</Button>
+          <Button type="submit" onClick={saveToFile}>
+            Save JSON to file
+          </Button>
         </HorizontalGroup>
       </Stack>
     </>
diff --git a/public/app/features/profile/ChangePasswordForm.tsx b/public/app/features/profile/ChangePasswordForm.tsx
index d86dcd1e8e9..07f2553f6eb 100644
--- a/public/app/features/profile/ChangePasswordForm.tsx
+++ b/public/app/features/profile/ChangePasswordForm.tsx
@@ -69,7 +69,7 @@ export const ChangePasswordForm: FC<Props> = ({ user, onChangePassword, isSaving
                 />
               </Field>
               <HorizontalGroup>
-                <Button variant="primary" disabled={isSaving}>
+                <Button variant="primary" disabled={isSaving} type="submit">
                   Change Password
                 </Button>
                 <LinkButton variant="secondary" href={`${config.appSubUrl}/profile`} fill="outline">
diff --git a/public/app/features/profile/UserProfileEditForm.tsx b/public/app/features/profile/UserProfileEditForm.tsx
index f3c8927fbe9..c5748eb515f 100644
--- a/public/app/features/profile/UserProfileEditForm.tsx
+++ b/public/app/features/profile/UserProfileEditForm.tsx
@@ -74,6 +74,7 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
                 variant="primary"
                 disabled={isSavingUser}
                 data-testid={selectors.components.UserProfile.profileSaveButton}
+                type="submit"
               >
                 <Trans id="common.save">Save</Trans>
               </Button>