Merge pull request #1269 from devtron-labs/feat(scoped-variables)/floater-suggestions

Feat(scoped variables): floater suggestions

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.26",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.26-beta-3",
         "@sentry/browser": "^7.3.1",
         "@sentry/integrations": "^7.3.1",
         "@sentry/tracing": "^7.3.1",
@@ -31,6 +31,7 @@
         "react-csv": "^2.2.2",
         "react-dates": "^21.8.0",
         "react-dom": "^17.0.2",
+        "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
         "react-gtm-module": "^2.0.11",
         "react-keybind": "^0.9.4",

src/assets/icons/ic-variable.svg

@@ -1,7 +1,12 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react'
 import { NavLink } from 'react-router-dom'
 import { Redirect, Route, Switch, useParams, useRouteMatch, useLocation } from 'react-router'
-import { ButtonWithLoader, importComponentFromFELibrary, sortObjectArrayAlphabetically } from '../common'
+import {
+    ButtonWithLoader,
+    FloatingVariablesSuggestions,
+    importComponentFromFELibrary,
+    sortObjectArrayAlphabetically,
+} from '../common'
 import {
     ServerErrors,
     showError,
@@ -37,7 +42,7 @@ import {
 import { toast } from 'react-toastify'
 import { ValidationRules } from '../ciPipeline/validationRules'
 import { CIBuildType, CIPipelineDataType, CIPipelineType } from '../ciPipeline/types'
-import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
+import { ReactComponent as Close } from '../../assets/icons/ic-cross.svg'
 import Tippy from '@tippyjs/react'
 import { PreBuild } from './PreBuild'
 import { Sidebar } from './Sidebar'
@@ -189,6 +194,7 @@ export default function CIPipeline({
                 list.push({
                     id: 0,
                     clusterName: '',
+                    clusterId: null,
                     name: DEFAULT_ENV,
                     active: false,
                     isClusterActive: false,
@@ -199,6 +205,7 @@ export default function CIPipeline({
                         list.push({
                             id: env.id,
                             clusterName: env.cluster_name,
+                            clusterId: env.cluster_id,
                             name: env.environment_name,
                             active: false,
                             isClusterActive: env.isClusterActive,
@@ -512,7 +519,7 @@ export default function CIPipeline({
         }
 
         let _ciPipeline = ciPipeline
-        if(selectedEnv && selectedEnv.id !== 0) {
+        if (selectedEnv && selectedEnv.id !== 0) {
             _ciPipeline.environmentId = selectedEnv.id
         } else {
             _ciPipeline.environmentId = undefined
@@ -692,6 +699,7 @@ export default function CIPipeline({
                     <h2 className="fs-16 fw-6 lh-1-43 m-0" data-testid="build-pipeline-heading">
                         {title}
                     </h2>
+
                     <button
                         type="button"
                         className="dc__transparent flex icon-dim-24"
@@ -702,6 +710,7 @@ export default function CIPipeline({
                         <Close className="icon-dim-24" />
                     </button>
                 </div>
+
                 {isAdvanced && (
                     <ul className="ml-20 tab-list w-90">
                         {isJobView ? (
@@ -719,9 +728,7 @@ export default function CIPipeline({
                     </ul>
                 )}
                 <hr className="divider m-0" />
-                <pipelineContext.Provider
-                    value={contextValue}
-                >
+                <pipelineContext.Provider value={contextValue}>
                     <div className={`ci-pipeline-advance ${isAdvanced ? 'pipeline-container' : ''}`}>
                         {isAdvanced && (
                             <div className="sidebar-container">
@@ -808,10 +815,31 @@ export default function CIPipeline({
         )
     }
 
+    const renderFloatingVariablesWidget = () => {
+        if (!window._env_.ENABLE_SCOPED_VARIABLES || activeStageName === BuildStageVariable.Build) return <></>
+
+        return (
+            <div className="flexbox">
+                <div className="floating-scoped-variables-widget">
+                    <FloatingVariablesSuggestions
+                        zIndex={21}
+                        appId={appId}
+                        envId={selectedEnv?.id ? String(selectedEnv.id) : null}
+                        clusterId={selectedEnv?.clusterId}
+                    />
+                </div>
+            </div>
+        )
+    }
+
     return ciPipelineId || isAdvanced ? (
-        <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
-            {renderCIPipelineModal()}
-        </Drawer>
+        <>
+            {renderFloatingVariablesWidget()}
+
+            <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
+                {renderCIPipelineModal()}
+            </Drawer>
+        </>
     ) : (
         <VisibleModal className="">{renderCIPipelineModal()}</VisibleModal>
     )

src/components/CIPipelineN/CIPipeline.tsx

@@ -17,7 +17,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { NavLink, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom'
 import { CDDeploymentTabText, DELETE_ACTION, SourceTypeMap, TriggerType, ViewType } from '../../config'
-import { ButtonWithLoader, sortObjectArrayAlphabetically } from '../common'
+import { ButtonWithLoader, FloatingVariablesSuggestions, sortObjectArrayAlphabetically } from '../common'
 import BuildCD from './BuildCD'
 import { CD_PATCH_ACTION, Environment, GeneratedHelmPush } from './cdPipeline.types'
 import {
@@ -121,6 +121,7 @@ export default function NewCDPipeline({
         isClusterCdActive: false,
         deploymentAppCreated: false,
         clusterName: '',
+        clusterId: null,
         runPreStageInEnv: false,
         runPostStageInEnv: false,
         allowedDeploymentTypes: [],
@@ -249,6 +250,7 @@ export default function NewCDPipeline({
                 list = list.map((env) => {
                     return {
                         id: env.id,
+                        clusterId: env.cluster_id,
                         clusterName: env.cluster_name,
                         name: env.environment_name,
                         namespace: env.namespace || '',
@@ -322,7 +324,10 @@ export default function NewCDPipeline({
                 validateStage(BuildStageVariable.PostBuild, result.form)
                 setIsAdvanced(true)
                 setIsVirtualEnvironment(pipelineConfigFromRes.isVirtualEnvironment)
-                setFormData(form)
+                setFormData({
+                    ...form,
+                    clusterId: result.form?.clusterId,
+                })
                 setPageState(ViewType.FORM)
             })
             .catch((error: ServerErrors) => {
@@ -1090,10 +1095,31 @@ export default function NewCDPipeline({
         )
     }
 
+    const renderFloatingVariablesWidget = () => {
+        if (!window._env_.ENABLE_SCOPED_VARIABLES || activeStageName === BuildStageVariable.Build) return <></>
+
+        return (
+            <div className="flexbox">
+                <div className="floating-scoped-variables-widget">
+                    <FloatingVariablesSuggestions
+                        zIndex={21}
+                        appId={appId}
+                        envId={formData?.environmentId ? String(formData.environmentId) : null}
+                        clusterId={formData?.clusterId}
+                    />
+                </div>
+            </div>
+        )
+    }
+
     return cdPipelineId || isAdvanced ? (
-        <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
-            {renderCDPipelineModal()}
-        </Drawer>
+        <>
+            {renderFloatingVariablesWidget()}
+
+            <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
+                {renderCDPipelineModal()}
+            </Drawer>
+        </>
     ) : (
         <VisibleModal className="">{renderCDPipelineModal()}</VisibleModal>
     )

src/components/cdPipeline/NewCDPipeline.tsx

@@ -58,14 +58,16 @@ export async function getCDPipelineConfig(appId: string, pipelineId: string): Pr
                 active: envId == env.id,
                 isClusterCdActive: env.isClusterCdActive,
                 allowedDeploymentTypes: env.allowedDeploymentTypes || [],
+                clusterId: env.cluster_id,
             }
         });
 
-        let env = environments.find((e) => e.id === cdPipeline.environmentId)
+        const env = environments.find((e) => e.id === cdPipeline.environmentId)
 
         const form = {
             name: cdPipeline.name,
             environmentId: cdPipeline.environmentId,
+            clusterId: env.clusterId,
             namespace: env.namespace,
             triggerType: cdPipeline.isManual ? TriggerType.Manual : TriggerType.Auto,
             preBuildStage: cdPipeline.preDeployStage || { id: 0, triggerType: TriggerType.Auto, steps: [] },

src/components/cdPipeline/cdPipeline.service.ts

@@ -54,6 +54,7 @@ export interface Environment {
     namespace: string
     active: boolean
     clusterName: string
+    clusterId: string
     isClusterCdActive: boolean
     isVirtualEnvironment?: boolean
     allowedDeploymentTypes?: DeploymentAppTypes[]
@@ -215,6 +216,7 @@ export interface CDFormType {
     }
     isClusterCdActive: boolean
     deploymentAppCreated: boolean,
+    clusterId: string,
     clusterName: string
     runPreStageInEnv: boolean,
     runPostStageInEnv: boolean,

src/components/cdPipeline/cdPipeline.types.ts

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import Tippy from '@tippyjs/react'
+import { copyToClipboard } from '../helpers/Helpers'
+import ClipboardProps from './types'
+import { ReactComponent as ICCopy } from '../../../assets/icons/ic-copy.svg'
+
+/**
+ * @param content - Content to be copied
+ * @param copiedTippyText - Text to be shown in the tippy when the content is copied
+ * @param duration - Duration for which the tippy should be shown
+ * @param trigger - To trigger the copy action, if set to true the content will be copied, use case being triggering the copy action from outside the component
+ * @param setTrigger - Callback function to set the trigger
+ */
+export default function ClipboardButton({ content, copiedTippyText, duration, trigger, setTrigger }: ClipboardProps) {
+    const [copied, setCopied] = useState<boolean>(false)
+    const [enableTippy, setEnableTippy] = useState<boolean>(false)
+
+    const handleTextCopied = () => setCopied(true)
+    const handleEnableTippy = () => setEnableTippy(true)
+    const handleDisableTippy = () => setEnableTippy(false)
+    const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
+
+    useEffect(() => {
+        if (!copied) return
+
+        const timeout = setTimeout(() => {
+            setCopied(false)
+            setTrigger(false)
+        }, duration)
+
+        return () => clearTimeout(timeout)
+    }, [copied, duration, setTrigger])
+
+    useEffect(() => {
+        if (!trigger) return
+
+        setCopied(true)
+        handleCopyContent()
+    }, [trigger, handleCopyContent])
+
+    return (
+        <div className="icon-dim-16 flex center">
+            <Tippy
+                className="default-tt"
+                content={copied ? copiedTippyText : 'Copy'}
+                placement="right"
+                visible={copied || enableTippy}
+            >
+                <button
+                    type="button"
+                    className="dc__hover-n100 dc__outline-none-imp p-0 flex bcn-0 dc__no-border"
+                    onMouseEnter={handleEnableTippy}
+                    onMouseLeave={handleDisableTippy}
+                    onClick={handleCopyContent}
+                >
+                    <ICCopy className="icon-dim-16" />
+                </button>
+            </Tippy>
+        </div>
+    )
+}

src/components/common/ClipboardButton/ClipboardButton.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ClipboardButton from '../ClipboardButton'
+
+jest.mock('../../helpers/Helpers', () => ({
+    copyToClipboard: jest.fn().mockImplementation((content, callback) => {
+        callback()
+    }),
+}))
+
+describe('When ClipboardButton mounts', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('should show the copy icon', () => {
+        render(
+            <ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger={false} setTrigger={null} />,
+        )
+        expect(screen.getByRole('button')).toBeTruthy()
+    })
+
+    it('should show tippy on hover', () => {
+        render(
+            <ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger={false} setTrigger={null} />,
+        )
+        fireEvent.mouseEnter(screen.getByRole('button'))
+        expect(screen.getByText('Copy')).toBeTruthy()
+    })
+
+    it('should show copiedTippyText when trigger is true', () => {
+        render(<ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger setTrigger={null} />)
+        expect(screen.getByText('test')).toBeTruthy()
+    })
+
+    it('should call copyToClipboard when clicked', () => {
+        render(
+            <ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger={false} setTrigger={null} />,
+        )
+        fireEvent.click(screen.getByRole('button'))
+        expect(screen.getByText('test')).toBeTruthy()
+    })
+})

src/components/common/ClipboardButton/__tests__/ClipboardButton.test.tsx

@@ -0,0 +1,7 @@
+export default interface ClipboardProps {
+    content: string
+    copiedTippyText: string
+    duration: number
+    trigger: boolean
+    setTrigger: React.Dispatch<React.SetStateAction<boolean>>
+}