Modals: Be more consistent with Modal cancel button styling (#68302)

* Modals: Be more consistent with Modal cancel button styling

* Update docs

* Fix tests

* fixing tests

public/app/features/alerting/unified/components/notification-policies/Modals.tsx

@@ -62,10 +62,10 @@ const useAddPolicyModal = (
             onSubmit={(newRoute) => parentRoute && handleAdd(newRoute, parentRoute)}
             actionButtons={
               <Modal.ButtonRow>
-                <Button type="submit">Save policy</Button>
-                <Button type="button" variant="secondary" onClick={handleDismiss}>
+                <Button type="button" variant="secondary" onClick={handleDismiss} fill="outline">
                   Cancel
                 </Button>
+                <Button type="submit">Save policy</Button>
               </Modal.ButtonRow>
             }
           />
@@ -121,10 +121,10 @@ const useEditPolicyModal = (
               route={route}
               actionButtons={
                 <Modal.ButtonRow>
-                  <Button type="submit">Update default policy</Button>
-                  <Button type="button" variant="secondary" onClick={handleDismiss}>
+                  <Button type="button" variant="secondary" onClick={handleDismiss} fill="outline">
                     Cancel
                   </Button>
+                  <Button type="submit">Update default policy</Button>
                 </Modal.ButtonRow>
               }
             />
@@ -136,10 +136,10 @@ const useEditPolicyModal = (
               onSubmit={handleSave}
               actionButtons={
                 <Modal.ButtonRow>
-                  <Button type="submit">Update policy</Button>
-                  <Button type="button" variant="secondary" onClick={handleDismiss}>
+                  <Button type="button" variant="secondary" onClick={handleDismiss} fill="outline">
                     Cancel
                   </Button>
+                  <Button type="submit">Update policy</Button>
                 </Modal.ButtonRow>
               }
             />

public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx

@@ -230,6 +230,9 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
         </div>
       </div>
       <Modal.ButtonRow>
+        <Button type="button" variant="secondary" onClick={onDismiss} fill="text">
+          Cancel
+        </Button>
         <Button
           type="button"
           variant="primary"
@@ -242,9 +245,6 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
         >
           Confirm
         </Button>
-        <Button type="button" variant="secondary" onClick={onDismiss}>
-          Cancel
-        </Button>
       </Modal.ButtonRow>
     </Modal>
   );

public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx

@@ -374,6 +374,15 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
             )}
             <div className={styles.modalButtons}>
               <Modal.ButtonRow>
+                <Button
+                  variant="secondary"
+                  type="button"
+                  disabled={loading}
+                  onClick={() => onClose(false)}
+                  fill="outline"
+                >
+                  Cancel
+                </Button>
                 <Button
                   type="button"
                   disabled={!isDirty || loading}
@@ -381,9 +390,6 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
                 >
                   {loading ? 'Saving...' : 'Save evaluation interval'}
                 </Button>
-                <Button variant="secondary" type="button" disabled={loading} onClick={() => onClose(false)}>
-                  Cancel
-                </Button>
               </Modal.ButtonRow>
             </div>
             {!hasSomeNoRecordingRules && <div>This group does not contain alert rules.</div>}

public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx

@@ -45,7 +45,7 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
         <FolderPicker allowEmpty onChange={({ uid }) => setMoveTarget(uid)} />
       </Field>
       <Modal.ButtonRow>
-        <Button onClick={onDismiss} variant="secondary">
+        <Button onClick={onDismiss} variant="secondary" fill="outline">
           Cancel
         </Button>
         <Button disabled={moveTarget === undefined} onClick={onMove} variant="primary">

public/app/features/dimensions/editors/ResourcePickerPopover.tsx

@@ -99,7 +99,7 @@ export const ResourcePickerPopover = (props: Props) => {
           <div className={styles.resourcePickerPopoverContent}>
             {renderPicker()}
             <ButtonGroup className={styles.buttonGroup}>
-              <Button className={styles.button} variant={'secondary'} onClick={() => onClose()}>
+              <Button className={styles.button} variant={'secondary'} onClick={() => onClose()} fill="outline">
                 Cancel
               </Button>
               <Button

public/app/features/search/page/components/MoveToFolderModal.tsx

@@ -129,12 +129,12 @@ export const MoveToFolderModal = ({ results, onMoveItems, onDismiss }: Props) =>
         </div>
 
         <HorizontalGroup justify="flex-end">
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
+            Cancel
+          </Button>
           <Button icon={moving ? 'fa fa-spinner' : undefined} variant="primary" onClick={moveTo}>
             Move
           </Button>
-          <Button variant="secondary" onClick={onDismiss}>
-            Cancel
-          </Button>
         </HorizontalGroup>
       </>
     </Modal>