grafana/ui: Add default type="button" to <Button> (#48183)

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>

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>

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}

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>

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>

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>

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>

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>
         )}

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>

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)}

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>

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>
+    );
   }
 }
 

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>
 );
 

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>

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>
     </>

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">

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>