Merge pull request #1498 from devtron-labs/feat/dependencies

feat: add application dependencies

Author: eshankvaish

src/components/app/Overview/Overview.tsx

@@ -11,6 +11,7 @@ import {
     stopPropagation,
     useAsync,
     getRandomColor,
+    noop,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { EditableTextArea, RadioGroup, handleUTCTime, importComponentFromFELibrary } from '../../common'
 import { AppOverviewProps, EditAppRequest, JobPipeline } from '../types'
@@ -33,10 +34,10 @@ import { getAppConfig, getGitProviderIcon } from './utils'
 import { EnvironmentList } from './EnvironmentList'
 import { MAX_LENGTH_350 } from '../../../config/constantMessaging'
 import { getModuleInfo } from '../../v2/devtronStackManager/DevtronStackManager.service'
-import { OVERVIEW_TABS, TAB_SEARCH_KEY } from './constants'
+import { MODAL_STATE, OVERVIEW_TABS, TAB_SEARCH_KEY } from './constants'
 const MandatoryTagWarning = importComponentFromFELibrary('MandatoryTagWarning')
 const Catalog = importComponentFromFELibrary('Catalog')
-// const DependencyList = importComponentFromFELibrary('DependencyList')
+const DependencyList = importComponentFromFELibrary('DependencyList')
 
 type AvailableTabs = typeof OVERVIEW_TABS[keyof typeof OVERVIEW_TABS]
 
@@ -46,6 +47,8 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
     const history = useHistory()
     const searchParams = new URLSearchParams(location.search)
     const activeTab = searchParams.get(TAB_SEARCH_KEY) as AvailableTabs
+    const isUpdateDependencyModalOpen =
+        activeTab === OVERVIEW_TABS.DEPENDENCIES && searchParams.get(MODAL_STATE.key) === MODAL_STATE.value
     const config = getAppConfig(appType)
     const isJobOverview = appType === 'job'
     const isHelmChart = appType === 'helm-chart'
@@ -61,11 +64,10 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
     const [newUpdatedOn, setNewUpdatedOn] = useState<string>()
     const [newUpdatedBy, setNewUpdatedBy] = useState<string>()
     const [jobPipelines, setJobPipelines] = useState<JobPipeline[]>([])
+    // Added this state to handle the disabled and hidden state basis the loading of the dependency list inside DependencyList component
+    const [isEditDependencyButtonDisabled, setIsEditDependencyButtonDisabled] = useState(false)
     const [reloadMandatoryProjects, setReloadMandatoryProjects] = useState<boolean>(true)
-    const [, isArgoInstalled] = useAsync(
-        () => getModuleInfo(ModuleNameMap.ARGO_CD),
-        [],
-    )
+    const [, isArgoInstalled] = useAsync(() => getModuleInfo(ModuleNameMap.ARGO_CD), [])
     const resourceName = config.resourceName
 
     let _moment: moment.Moment
@@ -76,6 +78,15 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
         history.replace({ search: searchParams.toString() })
     }
 
+    const toggleUpdateDependencyModal = () => {
+        if (isUpdateDependencyModalOpen) {
+            searchParams.delete(MODAL_STATE.key)
+        } else {
+            searchParams.set(MODAL_STATE.key, MODAL_STATE.value)
+        }
+        history.replace({ search: searchParams.toString() })
+    }
+
     useEffect(() => {
         // add a default tab if not set
         if (!activeTab || !Object.values(OVERVIEW_TABS).includes(activeTab)) {
@@ -460,24 +471,49 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
             const contentToRender = {
                 [OVERVIEW_TABS.ABOUT]: renderAppDescription,
                 [OVERVIEW_TABS.ENVIRONMENTS]: () => <EnvironmentList appId={+appId} filteredEnvIds={filteredEnvIds} />,
-                // [OVERVIEW_TABS.DEPENDENCIES]: () => DependencyList ? <DependencyList appId={+appId} isArgoInstalled={isArgoInstalled} /> : null,
+                [OVERVIEW_TABS.DEPENDENCIES]: () =>
+                    DependencyList ? (
+                        <DependencyList
+                            resourceId={+appId}
+                            resourceType={appType}
+                            isArgoInstalled={isArgoInstalled}
+                            resourceName={appMetaInfo.appName}
+                            isUpdateModalOpen={isUpdateDependencyModalOpen}
+                            toggleUpdateModalOpen={toggleUpdateDependencyModal}
+                            toggleButtonDisabledState={setIsEditDependencyButtonDisabled}
+                        />
+                    ) : null,
             }
 
             return (
                 <div className="app-overview-wrapper flexbox-col dc__gap-12">
-                    <RadioGroup
-                        className="gui-yaml-switch gui-yaml-switch--lg gui-yaml-switch-window-bg flex-justify-start dc__no-background-imp"
-                        name="overview-tabs"
-                        initialTab={activeTab}
-                        disabled={false}
-                        onChange={(e) => {
-                            setActiveTab(e.target.value)
-                        }}
-                    >
-                        <RadioGroup.Radio value={OVERVIEW_TABS.ABOUT}>About</RadioGroup.Radio>
-                        <RadioGroup.Radio value={OVERVIEW_TABS.ENVIRONMENTS}>Environments</RadioGroup.Radio>
-                        {/* {DependencyList && <RadioGroup.Radio value={OVERVIEW_TABS.DEPENDENCIES}>Dependencies</RadioGroup.Radio>} */}
-                    </RadioGroup>
+                    <div className="flex flex-justify dc__gap-8">
+                        <RadioGroup
+                            className="gui-yaml-switch gui-yaml-switch--lg gui-yaml-switch-window-bg flex-justify-start dc__no-background-imp"
+                            name="overview-tabs"
+                            initialTab={activeTab}
+                            disabled={false}
+                            onChange={(e) => {
+                                setActiveTab(e.target.value)
+                            }}
+                        >
+                            <RadioGroup.Radio value={OVERVIEW_TABS.ABOUT}>About</RadioGroup.Radio>
+                            <RadioGroup.Radio value={OVERVIEW_TABS.ENVIRONMENTS}>Environments</RadioGroup.Radio>
+                            {DependencyList && (
+                                <RadioGroup.Radio value={OVERVIEW_TABS.DEPENDENCIES}>Dependencies</RadioGroup.Radio>
+                            )}
+                        </RadioGroup>
+                        {activeTab === OVERVIEW_TABS.DEPENDENCIES && (
+                            <button
+                                type="button"
+                                className={`cta flex h-28 dc__gap-4 ${isEditDependencyButtonDisabled ? 'disabled-opacity' : ''}`}
+                                onClick={isEditDependencyButtonDisabled ? noop : toggleUpdateDependencyModal}
+                            >
+                                <EditIcon className="mw-14 icon-dim-14 scn-0 dc__no-svg-fill" />
+                                Edit Dependency
+                            </button>
+                        )}
+                    </div>
                     <div className="flexbox-col dc__gap-12">{contentToRender[activeTab]?.()}</div>
                 </div>
             )

src/components/app/Overview/constants.ts

@@ -18,7 +18,18 @@ export const OVERVIEW_TABS = {
     ABOUT: 'about',
     ENVIRONMENTS: 'environments',
     JOB_PIPELINES: 'job-pipelines',
-    // DEPENDENCIES: 'dependencies',
+    DEPENDENCIES: 'dependencies',
 } as const
 
 export const TAB_SEARCH_KEY = 'tab'
+
+export const MODAL_STATE = {
+    /**
+     * Search param key for the modal
+     */
+    key: 'modal',
+    /**
+     * Value when the modal is open
+     */
+    value: 'open'
+} as const