From eef4e18b629c214cbc8108ebfa16f0232b46e309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 27 Apr 2021 15:36:48 +0200
Subject: [PATCH] Theme: Use outline buttons for Cancel & Back actions (#33418)

* Buttons: Use new outline button for cancel & back buttons

* More buttons

* More tweaks

* Updated row snapshot
---
 .../components/ConfirmModal/ConfirmModal.tsx  |  2 +-
 .../components/RowOptions/RowOptionsForm.tsx  |  4 +-
 .../SaveDashboard/SaveDashboardErrorProxy.tsx |  6 +--
 .../SaveDashboard/UnsavedChangesModal.tsx     |  2 +-
 .../forms/SaveDashboardAsForm.tsx             |  2 +-
 .../SaveDashboard/forms/SaveDashboardForm.tsx |  2 +-
 .../forms/SaveProvisionedDashboardForm.tsx    |  2 +-
 .../components/ShareModal/ShareExport.tsx     |  2 +-
 .../components/ShareModal/ShareSnapshot.tsx   |  2 +-
 .../datasources/NewDataSourcePage.tsx         |  4 +-
 .../datasources/settings/ButtonRow.tsx        | 24 ++++-----
 .../settings/DataSourceSettingsPage.tsx       |  2 +-
 .../__snapshots__/ButtonRow.test.tsx.snap     | 50 ++++++++++---------
 .../AddLibraryPanelModal.tsx                  |  6 +--
 .../DeleteLibraryPanelModal.tsx               |  2 +-
 .../SaveLibraryPanelModal.tsx                 |  2 +-
 16 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index 0f4301ad727..c70146cb196 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -69,7 +69,7 @@ export const ConfirmModal = ({
         ) : null}
       </div>
       <Modal.ButtonRow>
-        <Button variant="secondary" onClick={onDismiss}>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
           {dismissText}
         </Button>
         <Button
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
index 343db6beb78..b64453845e5 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
@@ -34,10 +34,10 @@ export const RowOptionsForm: FC<Props> = ({ repeat, title, onUpdate, onCancel })
           </Field>
 
           <Modal.ButtonRow>
-            <Button type="submit">Update</Button>
-            <Button variant="secondary" onClick={onCancel}>
+            <Button variant="secondary" onClick={onCancel} fill="outline">
               Cancel
             </Button>
+            <Button type="submit">Update</Button>
           </Modal.ButtonRow>
         </>
       )}
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
index d6b731edd94..cdbc570937d 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
@@ -90,6 +90,9 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
           </small>
         </div>
         <Modal.ButtonRow>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
+            Cancel
+          </Button>
           <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onDismiss} />
           <Button
             variant="destructive"
@@ -100,9 +103,6 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
           >
             Overwrite
           </Button>
-          <Button variant="secondary" onClick={onDismiss}>
-            Cancel
-          </Button>
         </Modal.ButtonRow>
       </div>
     </Modal>
diff --git a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
index 8f6142a62af..b50b921ca3d 100644
--- a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
@@ -29,7 +29,7 @@ export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
     >
       <h5>Do you want to save your changes?</h5>
       <Modal.ButtonRow>
-        <Button variant="secondary" onClick={onDismiss}>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
           Cancel
         </Button>
         <Button
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
index 79ee49c8cb0..b9f4fedeebd 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
@@ -115,7 +115,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
             <Switch name="copyTags" ref={register} />
           </Field>
           <Modal.ButtonRow>
-            <Button variant="secondary" onClick={onCancel}>
+            <Button variant="secondary" onClick={onCancel} fill="outline">
               Cancel
             </Button>
             <Button type="submit" aria-label="Save dashboard button">
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index 932cca130d6..5ff73d637f2 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -59,7 +59,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
           </div>
 
           <Modal.ButtonRow>
-            <Button variant="secondary" onClick={onCancel}>
+            <Button variant="secondary" onClick={onCancel} fill="outline">
               Cancel
             </Button>
             <Button type="submit" aria-label={selectors.pages.SaveDashboardModal.save}>
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index 9c7791bf639..511518359c7 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -58,7 +58,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
           className={styles.json}
         />
         <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onCancel}>
+          <Button variant="secondary" onClick={onCancel} fill="outline">
             Cancel
           </Button>
           <CopyToClipboard text={() => dashboardJSON} elType={Button} onSuccess={onCopyToClipboardSuccess}>
diff --git a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
index 581f5103c73..5a19a17b542 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
@@ -96,7 +96,7 @@ export class ShareExport extends PureComponent<Props, State> {
           <Switch value={shareExternally} onChange={this.onShareExternallyChange} />
         </Field>
         <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss}>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
             Cancel
           </Button>
           <Button variant="secondary" onClick={this.onViewJson}>
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index 62125bd4db1..6d52aee13c1 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -234,7 +234,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
         </Field>
 
         <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss}>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
             Cancel
           </Button>
           {externalEnabled && (
diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx
index 0a2befcad12..946c7dcefdd 100644
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/public/app/features/datasources/NewDataSourcePage.tsx
@@ -96,7 +96,9 @@ class NewDataSourcePage extends PureComponent<Props> {
           <div className="page-action-bar">
             <FilterInput value={searchQuery} onChange={this.onSearchQueryChange} placeholder="Filter by name or type" />
             <div className="page-action-bar__spacer" />
-            <LinkButton href="datasources">Cancel</LinkButton>
+            <LinkButton href="datasources" fill="outline" variant="secondary" icon="arrow-left">
+              Cancel
+            </LinkButton>
           </div>
           {!searchQuery && (
             <PluginsErrorsInfo>
diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
index 28e1e9e6067..7631b47bd40 100644
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -14,6 +14,18 @@ export interface Props {
 const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
   return (
     <div className="gf-form-button-row">
+      <LinkButton variant="secondary" fill="outline" href={`${config.appSubUrl}/datasources`}>
+        Back
+      </LinkButton>
+      <Button
+        type="button"
+        variant="destructive"
+        disabled={isReadOnly}
+        onClick={onDelete}
+        aria-label={selectors.pages.DataSource.delete}
+      >
+        Delete
+      </Button>
       {!isReadOnly && (
         <Button
           type="submit"
@@ -30,18 +42,6 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
           Test
         </Button>
       )}
-      <Button
-        type="button"
-        variant="destructive"
-        disabled={isReadOnly}
-        onClick={onDelete}
-        aria-label={selectors.pages.DataSource.delete}
-      >
-        Delete
-      </Button>
-      <LinkButton fill="text" href={`${config.appSubUrl}/datasources`}>
-        Back
-      </LinkButton>
     </div>
   );
 };
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index e128c4bf021..4b09df66fb3 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -174,7 +174,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
                   Delete
                 </Button>
               )}
-              <LinkButton variant="link" href="datasources">
+              <LinkButton variant="secondary" href="datasources" fill="outline">
                 Back
               </LinkButton>
             </div>
diff --git a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
index d553d347570..c9e5ccbaed7 100644
--- a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`Render should render component 1`] = `
 <div
   className="gf-form-button-row"
 >
-  <Button
-    onClick={[MockFunction]}
-    type="submit"
-    variant="primary"
+  <LinkButton
+    fill="outline"
+    href="/datasources"
+    variant="secondary"
   >
-    Test
-  </Button>
+    Back
+  </LinkButton>
   <Button
     aria-label="Data source settings page Delete button"
     disabled={true}
@@ -20,12 +20,13 @@ exports[`Render should render component 1`] = `
   >
     Delete
   </Button>
-  <LinkButton
-    fill="text"
-    href="/datasources"
+  <Button
+    onClick={[MockFunction]}
+    type="submit"
+    variant="primary"
   >
-    Back
-  </LinkButton>
+    Test
+  </Button>
 </div>
 `;
 
@@ -33,15 +34,13 @@ exports[`Render should render with buttons enabled 1`] = `
 <div
   className="gf-form-button-row"
 >
-  <Button
-    aria-label="Data source settings page Save and Test button"
-    disabled={false}
-    onClick={[Function]}
-    type="submit"
-    variant="primary"
+  <LinkButton
+    fill="outline"
+    href="/datasources"
+    variant="secondary"
   >
-    Save & test
-  </Button>
+    Back
+  </LinkButton>
   <Button
     aria-label="Data source settings page Delete button"
     disabled={false}
@@ -51,11 +50,14 @@ exports[`Render should render with buttons enabled 1`] = `
   >
     Delete
   </Button>
-  <LinkButton
-    fill="text"
-    href="/datasources"
+  <Button
+    aria-label="Data source settings page Save and Test button"
+    disabled={false}
+    onClick={[Function]}
+    type="submit"
+    variant="primary"
   >
-    Back
-  </LinkButton>
+    Save & test
+  </Button>
 </div>
 `;
diff --git a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
index b41ace7247c..46c61993f9f 100644
--- a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
@@ -24,6 +24,9 @@ export const AddLibraryPanelContents = ({ panel, initialFolderId, onDismiss }: A
       </Field>
 
       <Modal.ButtonRow>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
+          Cancel
+        </Button>
         <Button
           onClick={() => {
             panel.title = panelTitle;
@@ -32,9 +35,6 @@ export const AddLibraryPanelContents = ({ panel, initialFolderId, onDismiss }: A
         >
           Add panel to the panel library
         </Button>
-        <Button variant="secondary" onClick={onDismiss}>
-          Cancel
-        </Button>
       </Modal.ButtonRow>
     </>
   );
diff --git a/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx b/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
index 1264faf2f4c..87f8db6d10c 100644
--- a/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
@@ -36,7 +36,7 @@ export const DeleteLibraryPanelModal: FC<Props> = ({ libraryPanel, onDismiss, on
           {!connected ? <Confirm /> : null}
 
           <Modal.ButtonRow>
-            <Button variant="secondary" onClick={onDismiss}>
+            <Button variant="secondary" onClick={onDismiss} fill="outline">
               Cancel
             </Button>
             <Button variant="destructive" onClick={onConfirm} disabled={connected}>
diff --git a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
index 43a5ed21013..77417c16062 100644
--- a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
@@ -99,7 +99,7 @@ export const SaveLibraryPanelModal: React.FC<Props> = ({
           </table>
         )}
         <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss}>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
             Cancel
           </Button>
           <Button variant="destructive" onClick={discardAndClose}>