chore: move copyToClipboard to common

AbhishekA1509 · AbhishekA1509 · commit e7bf4447247a · 2023-10-03T16:29:14.000+05:30
diff --git a/src/components/ClusterNodes/NodeDetails.tsx b/src/components/ClusterNodes/NodeDetails.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { copyToClipboard, ToastBodyWithButton } from '../common'
+import { ToastBodyWithButton } from '../common'
 import {
     showError,
     Progressing,
     toastAccessDenied,
     ServerErrors,
     ErrorScreenManager,
+    copyToClipboard,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Info } from '../../assets/icons/ic-info-filled.svg'
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useReducer, useRef } from 'react'
 import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor';
-import { useJsonYaml, Select, RadioGroup, useWindowSize, copyToClipboard } from '../common'
-import { Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import { useJsonYaml, Select, RadioGroup, useWindowSize } from '../common'
+import { Progressing, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ClipboardIcon } from '../../assets/icons/ic-copy.svg';
 import { ReactComponent as Info } from '../../assets/icons/ic-info-filled.svg';
 import { ReactComponent as ErrorIcon } from '../../assets/icons/ic-error-exclamation.svg';
diff --git a/src/components/apiTokens/EditAPIToken.tsx b/src/components/apiTokens/EditAPIToken.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { showError, Progressing, InfoColourBar, RadioGroup, RadioGroupItem } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, Progressing, InfoColourBar, RadioGroup, RadioGroupItem, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as InfoIcon } from '../../assets/icons/info-filled.svg'
 import RegeneratedModal from './RegenerateModal'
 import { EditDataType, EditTokenType } from './authorization.type'
@@ -11,7 +11,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom'
 import { useParams } from 'react-router'
 import moment from 'moment'
 import {  MomentDateFormat } from '../../config'
-import { ButtonWithLoader, copyToClipboard } from '../common'
+import { ButtonWithLoader } from '../common'
 import { deleteGeneratedAPIToken, updateGeneratedAPIToken } from './service'
 import { toast } from 'react-toastify'
 import Tippy from '@tippyjs/react'
diff --git a/src/components/apiTokens/GenerateModal.tsx b/src/components/apiTokens/GenerateModal.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
+import { VisibleModal, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Success } from '../../assets/icons/ic-success-outline.svg'
 import { ReactComponent as Clipboard } from '../../assets/icons/ic-copy.svg'
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as Key } from '../../assets/icons/ic-key-bulb.svg'
 import { GenerateTokenModalType } from './authorization.type'
 import Tippy from '@tippyjs/react'
-import { VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
-import { copyToClipboard } from '../common'
 
 function GenerateModal({ close, token, reload, redirectToTokenList, isRegenerationModal }: GenerateTokenModalType) {
     const [copied, setCopied] = useState(false)
diff --git a/src/components/app/ResourceTreeNodes.tsx b/src/components/app/ResourceTreeNodes.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import dots from '../../assets/icons/appstatus/ic-menu-dots.svg'
 import emptyPageIcon from '../../assets/icons/ic-empty-data.svg'
-import { Pod as PodIcon, Trash, copyToClipboard } from '../common';
-import { showError, PopupMenu, not, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { Pod as PodIcon, Trash } from '../common';
+import { showError, PopupMenu, not, useSearchString, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import { NavLink } from 'react-router-dom'
 import { useRouteMatch, useParams, generatePath, useHistory, useLocation } from 'react-router';
 import { toast } from 'react-toastify'
diff --git a/src/components/app/details/cicdHistory/Artifacts.tsx b/src/components/app/details/cicdHistory/Artifacts.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { showError, GenericEmptyState, ImageTagsContainer } from '@devtron-labs/devtron-fe-common-lib'
-import { copyToClipboard, importComponentFromFELibrary } from '../../../common'
+import { showError, GenericEmptyState, ImageTagsContainer, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
+import { importComponentFromFELibrary } from '../../../common'
 import { useParams } from 'react-router'
 import { ReactComponent as CopyIcon } from '../../../../assets/icons/ic-copy.svg'
 import { ReactComponent as Download } from '../../../../assets/icons/ic-download.svg'
diff --git a/src/components/app/list/TriggerUrl.tsx b/src/components/app/list/TriggerUrl.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { copyToClipboard } from '../../common'
-import { Progressing, VisibleModal, GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
+import { Progressing, VisibleModal, GenericEmptyState, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
 import { ReactComponent as CopyText } from '../../../assets/icons/ic-copy.svg'
 import Tippy from '@tippyjs/react'
diff --git a/src/components/ciConfig/CICreateDockerfileOption.tsx b/src/components/ciConfig/CICreateDockerfileOption.tsx
@@ -3,8 +3,7 @@ import Tippy from '@tippyjs/react'
 import ReactSelect from 'react-select'
 import { MODES } from '../../config'
 import CodeEditor from '../CodeEditor/CodeEditor'
-import { copyToClipboard } from '../common'
-import { showError, Progressing, CIBuildType } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, Progressing, CIBuildType, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import {
     DropdownIndicator,
     Option,
diff --git a/src/components/ciPipeline/ExternalCIPipeline.tsx b/src/components/ciPipeline/ExternalCIPipeline.tsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { getInitDataWithCIPipeline, saveCIPipeline, deleteCIPipeline, getPipelineMetaConfiguration } from './ciPipeline.service';
-import { SourceTypeMap, TriggerType, ViewType } from '../../config';
+import { SourceTypeMap, TriggerType, ViewType, URLS } from '../../config';
 import { CIPipelineProps, ExternalCIPipelineState } from './types';
-import { CopyButton } from '../common';
+import { CopyButton, ButtonWithLoader } from '../common';
 import {
     ServerErrors,
     showError,
@@ -15,11 +15,9 @@ import { toast } from 'react-toastify';
 import error from '../../assets/icons/misc/errorInfo.svg'
 import Tippy from '@tippyjs/react';
 import { ValidationRules } from './validationRules';
-import { ButtonWithLoader } from '../common';
 import { NavLink } from 'react-router-dom';
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg';
 import { getHostURLConfiguration } from '../../services/service';
-import { URLS } from '../../config';
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg';
 import { SourceMaterials } from './SourceMaterials';
 import './ciPipeline.scss';
diff --git a/src/components/ciPipeline/SourceMaterials.tsx b/src/components/ciPipeline/SourceMaterials.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
 import { SourceTypeMap, URLS } from '../../config'
-import { components } from 'react-select'
+import ReactSelect, { components } from 'react-select'
 import { Link, useLocation } from 'react-router-dom'
-import ReactSelect from 'react-select'
 import error from '../../assets/icons/misc/errorInfo.svg'
 import git from '../../assets/icons/git/git.svg'
 import { getCustomOptionSelectionStyle } from '../v2/common/ReactSelect.utils'
diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
-import { ButtonWithLoader, copyToClipboard } from '../../common'
-import { showError, Progressing, Drawer, InfoColourBar, Reload } from '@devtron-labs/devtron-fe-common-lib'
+import { ButtonWithLoader } from '../../common'
+import { showError, Progressing, Drawer, InfoColourBar, Reload, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Help } from '../../../assets/icons/ic-help.svg'
 import { ReactComponent as Question } from '../../../assets/icons/ic-help-outline.svg'
 import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
@@ -11,9 +11,8 @@ import { ReactComponent as Clipboard } from '../../../assets/icons/ic-copy.svg'
 import { ReactComponent as AlertTriangle } from '../../../assets/icons/ic-alert-triangle.svg'
 import { ReactComponent as Tag } from '../../../assets/icons/ic-tag.svg'
 import './webhookDetails.scss'
-import ReactSelect from 'react-select'
+import ReactSelect, { components } from 'react-select'
 import { Option } from '../../v2/common/ReactSelect.utils'
-import { components } from 'react-select'
 import { getUserRole, saveUser } from '../../userGroups/userGroup.service'
 import { ACCESS_TYPE_MAP, DOCUMENTATION, MODES } from '../../../config'
 import { createGeneratedAPIToken } from '../../apiTokens/service'
diff --git a/src/components/cluster/ClusterInfoStepsModal.tsx b/src/components/cluster/ClusterInfoStepsModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { copyToClipboard } from '../common'
+import { copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import 'tippy.js/themes/light.css'
 import { ReactComponent as Help } from '../../assets/icons/ic-help.svg'
 import './cluster.scss'
diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx
@@ -770,42 +770,6 @@ export function useSize(): UseSize {
     }
 }
 
-const unsecureCopyToClipboard = (str, callback = noop) => {
-    const listener = function (ev) {
-        ev.preventDefault()
-        ev.clipboardData.setData('text/plain', str)
-    }
-    document.addEventListener('copy', listener)
-    document.execCommand('copy')
-    document.removeEventListener('copy', listener)
-    callback()
-}
-
-/**
- * It will copy the passed content to clipboard and invoke the callback function, in case of error it will show the toast message.
- * On HTTP system clipboard is not supported, so it will use the unsecureCopyToClipboard function
- * @param str
- * @param callback
- */
-export function copyToClipboard(str, callback = noop) {
-    if (!str) {
-        return
-    }
-
-    if (window.isSecureContext && navigator.clipboard) {
-        navigator.clipboard
-            .writeText(str)
-            .then(() => {
-                callback()
-            })
-            .catch(() => {
-                toast.error('Failed to copy to clipboard')
-            })
-    } else {
-        unsecureCopyToClipboard(str, callback)
-    }
-}
-
 export function getRandomString() {
     return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
 }
diff --git a/src/components/notifications/WebhookConfigModal.tsx b/src/components/notifications/WebhookConfigModal.tsx
@@ -1,7 +1,12 @@
 import React, { Component } from 'react';
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg';
-import { copyToClipboard } from '../common';
-import { showError, Progressing, getTeamListMin as getProjectListMin, Drawer } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    showError,
+    Progressing,
+    getTeamListMin as getProjectListMin,
+    Drawer,
+    copyToClipboard,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { ViewType } from '../../config/constants';
 import { toast } from 'react-toastify';
 import { getWebhookAttributes, getWebhookConfiguration, saveUpdateWebhookConfiguration } from './notifications.service';
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CopyToast.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CopyToast.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { copyToClipboard } from '../../../../../common';
+import { copyToClipboard } from '@devtron-labs/devtron-fe-common-lib';
 import { ReactComponent as CheckIcon } from '../../../../assets/icons/ic-check.svg';
 import '../../../../../../../node_modules/xterm/css/xterm.css';
 import '../../../../../LogViewer/LogViewer.scss';
diff --git a/src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx b/src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useRouteMatch, useParams, useHistory } from 'react-router'
+import { TippyCustomized, TippyTheme, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
 import IndexStore from '../../index.store'
 import Tippy from '@tippyjs/react'
-import { copyToClipboard, getElapsedTime } from '../../../../common'
+import { getElapsedTime } from '../../../../common'
 import { ReactComponent as DropDown } from '../../../../../assets/icons/ic-dropdown-filled.svg'
 import { ReactComponent as Clipboard } from '../../../../../assets/icons/ic-copy.svg'
 import { ReactComponent as Check } from '../../../../../assets/icons/ic-check.svg'
@@ -20,7 +21,6 @@ import { getMonitoringToolIcon } from '../../../../externalLinks/ExternalLinks.u
 import { NoPod } from '../../../../app/ResourceTreeNodes'
 import './nodeType.scss'
 import { COPIED_MESSAGE } from '../../../../../config/constantMessaging'
-import { TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
 
 function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevtronApp }: NodeComponentProps) {
     const { url } = useRouteMatch()
