Merge branch 'develop' into feat/spog-1

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.13-beta-8",
+    "version": "0.2.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import Tippy from '@tippyjs/react'
 import { AddCDButtonProps, TooltipContentProps } from './types'
 import { AddCDPositions } from '../Types'

src/Assets/Icon/ic-book-open.svg

@@ -33,11 +33,23 @@ export default function AppStatus({
     }
     const appStatusLowerCase = status?.toLowerCase()
     const isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower
-    const iconClass = isNotDeployed ? StatusConstants.NOT_DEPLOYED.lowerCase : appStatusLowerCase
+    const isNotReady = appStatus === StatusConstants.NOT_READY.normalCase
     const statusMessage = status || (isVirtualEnv ? StatusConstants.NOT_AVILABLE.normalCase : '-')
     const notDeployed = isJobView ? YET_TO_RUN : StatusConstants.NOT_DEPLOYED.normalCase
     const textContent = isNotDeployed ? notDeployed : statusMessage
 
+    const getIconClass = () => {
+        if (isNotDeployed) {
+            return StatusConstants.NOT_DEPLOYED.lowerCase
+        }
+        if (isNotReady) {
+            return StatusConstants.NOT_READY.lowerCase
+        }
+        return appStatusLowerCase
+    }
+
+    const iconClass = getIconClass()
+
     const renderIcon = () => {
         if (iconClass) {
             return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />

src/Assets/Icon/ic-caret-down.svg

@@ -20,6 +20,11 @@ export const StatusConstants = {
         normalCase: 'Not deployed',
         lowerCase: 'not-deployed',
     },
+    NOT_READY: {
+        noSpaceLower: 'notready',
+        normalCase: 'Not Ready',
+        lowerCase: 'not-ready',
+    },
     APP_STATUS: {
         noSpaceLower: 'appStatus',
         normalText: 'App status',

src/Assets/Icon/ic-circle.svg

@@ -280,14 +280,3 @@ export interface FormErrorObjectType {
         steps: TaskErrorObj[]
     }
 }
-
-export interface PluginDetailType {
-    id: number
-    name: string
-    type: string
-    description: string
-    icon: string
-    tags: string[]
-    inputVariables?: VariableType[]
-    outputVariables?: VariableType[]
-}

src/Assets/Icon/ic-exit-fullscreen.svg

@@ -70,7 +70,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
     return (
         <div className="flex">
             <div className="chart-type-options flex" data-testid="chart-type-options">
-                <span className="chart-type-options-label mr-4">Chart Type</span>
+                <span className="cn-7 mr-4">Chart Type</span>
                 <ReactSelect
                     value={selectedChartType ?? chartTypeOptions[0]}
                     options={chartTypeOptions}
@@ -79,7 +79,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
                 />
             </div>
             <div className="chart-version-options flex" data-testid="chart-version-options">
-                <span className="chart-version-options-label mr-4">Chart Version</span>
+                <span className="cn-7 mr-4">Chart Version</span>
                 <ReactSelect
                     value={selectedChartVersion ?? chartVersionOptions[0]}
                     options={chartVersionOptions}

src/Assets/Icon/ic-filter-applied.svg

@@ -16,7 +16,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import Tippy from '@tippyjs/react'
-import { copyToClipboard, noop } from '../Helper'
+import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import ClipboardProps from './types'
 import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
@@ -42,10 +42,17 @@ export default function ClipboardButton({
     const [copied, setCopied] = useState<boolean>(false)
     const [enableTippy, setEnableTippy] = useState<boolean>(false)
 
-    const handleTextCopied = () => setCopied(true)
+    const handleTextCopied = () => {setCopied(true)}
     const handleEnableTippy = () => setEnableTippy(true)
     const handleDisableTippy = () => setEnableTippy(false)
-    const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
+    const handleCopyContent = useCallback(
+        (e?) => {
+           if(e) stopPropagation(e)
+            copyToClipboard(content, handleTextCopied)
+        },
+        [content],
+    )
+    const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
 
     useEffect(() => {
         if (!copied) return
@@ -65,28 +72,22 @@ export default function ClipboardButton({
         }
     }, [trigger, handleCopyContent])
     return (
-        <div className="icon-dim-16 flex center">
-            <Tippy
-                className="default-tt"
-                content={copied ? copiedTippyText : 'Copy'}
-                placement="bottom"
-                visible={copied || enableTippy}
-                arrow={false}
+        <Tippy
+            className="default-tt"
+            content={copied ? copiedTippyText : 'Copy'}
+            placement="bottom"
+            visible={copied || enableTippy}
+            arrow={false}
+        >
+            <button
+                type="button"
+                className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
+                onMouseEnter={handleEnableTippy}
+                onMouseLeave={handleDisableTippy}
+                onClick={handleCopyContent}
             >
-                <button
-                    type="button"
-                    className={`dc__outline-none-imp p-0 flex bcn-0 dc__no-border ${rootClassName}`}
-                    onMouseEnter={handleEnableTippy}
-                    onMouseLeave={handleDisableTippy}
-                    onClick={handleCopyContent}
-                >
-                    {copied ? (
-                        <Check className={`icon-dim-${iconSize}`} />
-                    ) : (
-                        <ICCopy className={`icon-dim-${iconSize}`} />
-                    )}
-                </button>
-            </Tippy>
-        </div>
+                {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
+            </button>
+        </Tippy>
     )
 }