From e750cdbf027a36574f43196e4df8c21f42b10709 Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Wed, 22 Apr 2020 00:36:52 +0900
Subject: [PATCH] Port CopyTextButton to TypeScript

---
 ...Button.test.js => CopyTextButton.test.tsx} |  0
 .../{CopyTextButton.js => CopyTextButton.tsx} | 36 +++++++++++--------
 .../CopyTextButton/{index.ts => index.tsx}    |  0
 3 files changed, 21 insertions(+), 15 deletions(-)
 rename packages/core/src/components/CopyTextButton/{CopyTextButton.test.js => CopyTextButton.test.tsx} (100%)
 rename packages/core/src/components/CopyTextButton/{CopyTextButton.js => CopyTextButton.tsx} (81%)
 rename packages/core/src/components/CopyTextButton/{index.ts => index.tsx} (100%)

diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.js b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
similarity index 100%
rename from packages/core/src/components/CopyTextButton/CopyTextButton.test.js
rename to packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.js b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
similarity index 81%
rename from packages/core/src/components/CopyTextButton/CopyTextButton.js
rename to packages/core/src/components/CopyTextButton/CopyTextButton.tsx
index 2df978ab2d..719a872361 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.js
+++ b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useRef, FC } from 'react';
 import { IconButton, Tooltip, makeStyles } from '@material-ui/core';
 import CopyIcon from '@material-ui/icons/FileCopy';
+import { BackstageTheme } from '@backstage/theme';
 import { errorApiRef, useApi } from 'api';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   button: {
     '&:hover': {
       backgroundColor: theme.palette.highlight,
@@ -44,12 +44,24 @@ const useStyles = makeStyles(theme => ({
  * Example:
  *    <CopyTextButton text="My text that I want to be copied to the clipboard" />
  */
-const CopyTextButton = ({
-  text,
-  tooltipDelay = 1000,
-  tooltipText = 'Text copied to clipboard',
-}) => {
-  const classes = useStyles();
+type Props = {
+  text: string;
+  tooltipDelay?: number;
+  tooltipText?: string;
+};
+
+const defaultProps = {
+  tooltipDelay: 1000,
+  tooltipText: 'Text copied to clipboard',
+}
+
+const CopyTextButton: FC<Props> = props => {
+
+  const { text, tooltipDelay, tooltipText } = {
+    ...defaultProps,
+    ...props
+  };
+  const classes = useStyles(props);
   const errorApi = useApi(errorApiRef);
   const inputRef = useRef();
   const [open, setOpen] = useState(false);
@@ -90,10 +102,4 @@ const CopyTextButton = ({
   );
 };
 
-CopyTextButton.propTypes = {
-  text: PropTypes.string.isRequired,
-  tooltipDelay: PropTypes.number,
-  tooltipText: PropTypes.string,
-};
-
 export default CopyTextButton;
diff --git a/packages/core/src/components/CopyTextButton/index.ts b/packages/core/src/components/CopyTextButton/index.tsx
similarity index 100%
rename from packages/core/src/components/CopyTextButton/index.ts
rename to packages/core/src/components/CopyTextButton/index.tsx