From cb72242d958cc0fe4129221de3552f808a38142e Mon Sep 17 00:00:00 2001
From: Giordano Ricci <gio.ricci@grafana.com>
Date: Wed, 14 Oct 2020 18:11:19 +0100
Subject: [PATCH] Chore: use new Input component in Share Modal (#28269)

* Chore: Add dashboard-alt icon

* Chore: use new Input component in Share Modal

* Update packages/grafana-ui/src/types/icon.ts

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

* Update public/app/features/dashboard/components/ShareModal/ShareLink.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

* Update packages/grafana-ui/src/types/icon.ts

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
---
 .../components/ShareModal/ShareLink.tsx       | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index 39abba1aab1..e2a1dc504b0 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { LegacyForms, ClipboardButton, Icon, InfoBox } from '@grafana/ui';
+import { LegacyForms, ClipboardButton, Icon, InfoBox, Input } from '@grafana/ui';
 const { Select, Switch } = LegacyForms;
 import { SelectableValue, PanelModel, AppEvents } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
@@ -136,12 +136,19 @@ export class ShareLink extends PureComponent<Props, State> {
               <div className="gf-form-group">
                 <div className="gf-form-inline">
                   <div className="gf-form gf-form--grow">
-                    <input type="text" className="gf-form-input" defaultValue={shareUrl} />
-                  </div>
-                  <div className="gf-form">
-                    <ClipboardButton variant="primary" getText={this.getShareUrl} onClipboardCopy={this.onShareUrlCopy}>
-                      Copy
-                    </ClipboardButton>
+                    <Input
+                      value={shareUrl}
+                      readOnly
+                      addonAfter={
+                        <ClipboardButton
+                          variant="primary"
+                          getText={this.getShareUrl}
+                          onClipboardCopy={this.onShareUrlCopy}
+                        >
+                          <Icon name="copy" /> Copy
+                        </ClipboardButton>
+                      }
+                    />
                   </div>
                 </div>
               </div>