Merge pull request #359 from devtron-labs/fix/cm-secret-bug-fixes

fix: cm secret bug fixes & UAT changes

Author: RohitRaj011

package-lock.json

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

package.json

@@ -12,6 +12,7 @@ export const DeploymentConfigDiff = ({
     navHeading,
     navHelpText,
     tabConfig,
+    errorConfig,
     ...resProps
 }: DeploymentConfigDiffProps) => (
     <div className="deployment-config-diff">
@@ -23,7 +24,13 @@ export const DeploymentConfigDiff = ({
             navHeading={navHeading}
             navHelpText={navHelpText}
             tabConfig={tabConfig}
+            errorConfig={errorConfig}
+        />
+        <DeploymentConfigDiffMain
+            isLoading={isLoading}
+            configList={configList}
+            errorConfig={errorConfig}
+            {...resProps}
         />
-        <DeploymentConfigDiffMain isLoading={isLoading} configList={configList} {...resProps} />
     </div>
 )

src/Assets/Icon/ic-file-code.svg

@@ -39,7 +39,7 @@
 
     &__tab-list {
         label {
-            flex-grow: 1
+            flex-grow: 1;
         }
 
         .radio__item-label {

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx

@@ -42,6 +42,7 @@ export type DeploymentConfigDiffSelectPickerProps =
       }
 
 export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem, 'href' | 'title' | 'onClick'> {
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
     hasDiff?: boolean
 }
 
@@ -84,7 +85,14 @@ export interface DeploymentConfigDiffProps {
 export interface DeploymentConfigDiffNavigationProps
     extends Pick<
         DeploymentConfigDiffProps,
-        'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'
+        | 'isLoading'
+        | 'navList'
+        | 'collapsibleNavList'
+        | 'goBackURL'
+        | 'navHeading'
+        | 'navHelpText'
+        | 'tabConfig'
+        | 'errorConfig'
     > {}
 
 export interface DeploymentConfigDiffMainProps

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

@@ -1,6 +1,7 @@
 import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
 import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
 import { ReactComponent as ICEditFile } from '@Icons/ic-edit-file.svg'
+import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
 import { stringComparatorBySortOrder, yamlComparatorBySortOrder } from '@Shared/Helpers'
 import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '@Shared/constants'
 import { YAMLStringify } from '@Common/Helper'
@@ -507,6 +508,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
                     const element = document.querySelector(`#${deploymentTemplateData.id}`)
                     element?.scrollIntoView({ block: 'start' })
                 },
+                Icon: ICFileCode,
             },
         ]
 

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts

@@ -169,6 +169,18 @@ export const DeploymentConfigDiffMain = ({
             )
         })
 
+    const renderContent = () => {
+        if (isLoading) {
+            return <Progressing fullHeight pageLoader />
+        }
+
+        if (errorConfig?.error) {
+            return <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />
+        }
+
+        return <div className="flexbox-col dc__gap-12 p-12">{renderDiffs()}</div>
+    }
+
     return (
         <div className="bcn-0 deployment-config-diff__main-top">
             <div className="dc__border-bottom-n1 flexbox dc__align-items-center dc__position-sticky dc__top-0 bcn-0 w-100 dc__zi-11">
@@ -183,15 +195,7 @@ export const DeploymentConfigDiffMain = ({
                     {renderSortButton()}
                 </div>
             </div>
-            <div className="deployment-config-diff__main-content">
-                {errorConfig?.error && <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />}
-                {!errorConfig?.error &&
-                    (isLoading ? (
-                        <Progressing fullHeight size={48} />
-                    ) : (
-                        <div className="flexbox-col dc__gap-12 p-12">{renderDiffs()}</div>
-                    ))}
-            </div>
+            <div className="deployment-config-diff__main-content">{renderContent()}</div>
         </div>
     )
 }

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx

@@ -25,6 +25,7 @@ export const DeploymentConfigDiffNavigation = ({
     navHeading,
     navHelpText,
     tabConfig,
+    errorConfig,
 }: DeploymentConfigDiffNavigationProps) => {
     // STATES
     const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({})
@@ -101,17 +102,18 @@ export const DeploymentConfigDiffNavigation = ({
         )
     }
 
-    const renderContent = () => (
+    const renderNavigation = () => (
         <>
-            {navList.map(({ title, href, onClick, hasDiff }) => (
+            {navList.map(({ title, href, onClick, hasDiff, Icon }) => (
                 <NavLink
                     key={title}
                     data-testid="env-deployment-template"
-                    className="dc__nav-item cursor dc__gap-8 fs-13 lh-32 cn-7 w-100 br-4 px-8 flexbox dc__align-items-center dc__content-space dc__no-decor"
+                    className="dc__nav-item cursor dc__gap-8 fs-13 lh-32 cn-7 w-100 br-4 px-8 flexbox dc__align-items-center dc__no-decor"
                     to={href}
                     onClick={onClick}
                 >
-                    <span className="dc__truncate">{title}</span>
+                    {Icon && <Icon className="icon-dim-16 dc__nav-item__start-icon dc__no-shrink" />}
+                    <span className="dc__truncate flex-grow-1">{title}</span>
                     {hasDiff && (
                         <Tippy className="default-tt" content="File has difference" arrow={false} placement="right">
                             <div className="flex">
@@ -125,21 +127,40 @@ export const DeploymentConfigDiffNavigation = ({
             {navHelpText && (
                 <div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
                     <span className="flex p-2 dc__align-self-start">
-                        <ICInfoOutlined className="icon-dim-16 fcn-6" />
+                        <ICInfoOutlined className="icon-dim-16 fcn-7" />
                     </span>
                     <p className="m-0 fs-12 lh-1-5 cn-9">{navHelpText}</p>
                 </div>
             )}
         </>
     )
 
-    const renderLoading = () => ['90', '70', '50'].map((item) => <ShimmerText key={item} width={item} />)
+    const renderContent = () => {
+        if (isLoading) {
+            return ['90', '70', '50'].map((item) => <ShimmerText key={item} width={item} />)
+        }
+
+        if (errorConfig?.error) {
+            return (
+                <div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
+                    <span className="flex p-2 dc__align-self-start">
+                        <ICInfoOutlined className="icon-dim-16 fcn-7" />
+                    </span>
+                    <p className="m-0 fs-12 lh-1-5 cn-9">
+                        Failed to load files. Please reload or select a different reference to compare with.
+                    </p>
+                </div>
+            )
+        }
+
+        return renderNavigation()
+    }
 
     return (
-        <div className="bcn-0 dc__border-right">
+        <div className="bcn-0 dc__border-right flexbox-col dc__overflow-hidden">
             {renderTopContent()}
             {!!tabConfig?.tabs.length && renderTabConfig()}
-            <div className="mw-none p-8">{isLoading ? renderLoading() : renderContent()}</div>
+            <div className="mw-none p-8 flex-grow-1 dc__overflow-auto">{renderContent()}</div>
         </div>
     )
 }