Merge pull request #2028 from devtron-labs/refactor/application-group-overview-table-phase-2

EnvironmentOverview - add support for individual app action

Author: RohitRaj011

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx

@@ -1,7 +1,5 @@
 import { ChangeEvent, Fragment, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import Tippy from '@tippyjs/react'
-import { followCursor } from 'tippy.js'
 
 import {
     AppStatus,
@@ -16,6 +14,7 @@ import {
     PopupMenu,
     stringComparatorBySortOrder,
     handleRelativeDateSorting,
+    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
@@ -42,23 +41,31 @@ const renderPopUpMenu = (items: EnvironmentOverviewTableRow['popUpMenuItems']) =
         <PopupMenu.Button isKebab rootClassName="p-4 flex dc__no-border cursor">
             <ICMoreOption className="icon-dim-16 fcn-6 rotateBy--90" />
         </PopupMenu.Button>
-        <PopupMenu.Body rootClassName="dc__border py-4 w-150">
-            {items.map(({ label, onClick, disabled, Icon, iconType = 'fill' }) => (
-                <button
-                    key={label}
-                    type="button"
-                    className="dc__transparent w-100 py-6 px-8 flexbox dc__align-items-center dc__gap-8 dc__hover-n50"
-                    onClick={onClick}
-                    disabled={disabled}
-                >
-                    {Icon && (
-                        <Icon
-                            className={`icon-dim-16 ${iconType === 'fill' ? 'fcn-7' : ''} ${iconType === 'stroke' ? 'scn-7' : ''}`}
-                        />
-                    )}
-                    <span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
-                </button>
-            ))}
+        <PopupMenu.Body rootClassName="dc__border py-4 w-180">
+            {items.map((popUpMenuItem) => {
+                if ('label' in popUpMenuItem) {
+                    const { label, onClick, disabled, Icon, iconType = 'fill' } = popUpMenuItem
+
+                    return (
+                        <button
+                            key={label}
+                            type="button"
+                            className={`dc__transparent w-100 py-6 px-8 flexbox dc__align-items-center dc__gap-8 ${disabled ? ' dc__opacity-0_5 cursor-not-allowed' : 'dc__hover-n50'}`}
+                            onClick={onClick}
+                            disabled={disabled}
+                        >
+                            {Icon && (
+                                <Icon
+                                    className={`icon-dim-16 ${iconType === 'fill' ? 'fcn-7' : ''} ${iconType === 'stroke' ? 'scn-7' : ''}`}
+                                />
+                            )}
+                            <span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
+                        </button>
+                    )
+                }
+
+                return popUpMenuItem
+            })}
         </PopupMenu.Body>
     </PopupMenu>
 )
@@ -199,25 +206,23 @@ export const EnvironmentOverviewTable = ({
                         value="CHECKED"
                         rootClassName={`mb-0 ml-2 ${!isPartialChecked ? 'dc__visible-hover--child' : ''}`}
                     />
-                    {!isVirtualEnv && <AppStatus appStatus={status} hideStatusMessage />}
+                    {!isVirtualEnv && (
+                        <AppStatus
+                            appStatus={deployedAt ? status : StatusConstants.NOT_DEPLOYED.noSpaceLower}
+                            hideStatusMessage
+                        />
+                    )}
                     <div className="flexbox dc__align-items-center dc__content-space dc__gap-8">
-                        <Tippy
-                            className="default-tt"
-                            arrow={false}
-                            placement="bottom"
-                            content={name}
-                            followCursor="horizontal"
-                            plugins={[followCursor]}
-                        >
+                        <Tooltip content={name}>
                             <Link
-                                className="py-2 dc__truncate flex-grow-1"
+                                className="py-2 dc__truncate dc__no-decor"
                                 to={redirectLink}
                                 target="_blank"
                                 rel="noreferrer"
                             >
                                 {name}
                             </Link>
-                        </Tippy>
+                        </Tooltip>
                         {!!popUpMenuItems?.length && renderPopUpMenu(popUpMenuItems)}
                     </div>
                 </div>
@@ -250,9 +255,9 @@ export const EnvironmentOverviewTable = ({
                                 >
                                     {deployedBy[0]}
                                 </span>
-                                <Tippy className="default-tt" arrow={false} placement="bottom" content={deployedBy}>
+                                <Tooltip content={deployedBy}>
                                     <span className="dc__truncate">{deployedBy}</span>
-                                </Tippy>
+                                </Tooltip>
                             </div>
                         </>
                     )}

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.types.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, MouseEvent, SVGProps } from 'react'
+import { FunctionComponent, MouseEvent, ReactElement, SVGProps } from 'react'
 import { EnvironmentOverviewTableHeaderKeys } from './EnvironmentOverview.constants'
 
 export interface EnvironmentOverviewTableRowData {
@@ -12,13 +12,15 @@ export interface EnvironmentOverviewTableRowData {
     [EnvironmentOverviewTableHeaderKeys.DEPLOYED_BY]: string
 }
 
-export interface EnvironmentOverviewTablePopUpMenuItem {
-    label: string
-    Icon?: FunctionComponent<SVGProps<SVGSVGElement>>
-    iconType?: 'fill' | 'stroke'
-    disabled?: boolean
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void
-}
+export type EnvironmentOverviewTablePopUpMenuItem =
+    | {
+          label: string
+          Icon?: FunctionComponent<SVGProps<SVGSVGElement>>
+          iconType?: 'fill' | 'stroke'
+          disabled?: boolean
+          onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+      }
+    | ReactElement
 
 export interface EnvironmentOverviewTableRow {
     environment: EnvironmentOverviewTableRowData

src/Pages/Shared/EnvironmentOverviewTable/index.ts

@@ -1,2 +1,3 @@
 export * from './EnvironmentOverviewTable.component'
 export * from './EnvironmentOverviewTable.types'
+export { EnvironmentOverviewTableSortableKeys } from './EnvironmentOverview.constants'

src/components/ApplicationGroup/AppGroup.types.ts

@@ -473,7 +473,7 @@ type HibernateModalType = MODAL_TYPE.HIBERNATE | MODAL_TYPE.UNHIBERNATE
 
 export interface HibernateModalProps {
     setOpenedHibernateModalType: React.Dispatch<React.SetStateAction<HibernateModalType>>
-    selectedAppDetailsList: AppInfoListType[]
+    selectedAppDetailsList: AppInfoListType | AppInfoListType[]
     appDetailsList: AppGroupListType['apps']
     envName: string
     envId: string
@@ -502,7 +502,7 @@ export interface ManageAppsResponse {
 }
 
 export interface RestartWorkloadModalProps {
-    selectedAppDetailsList: AppInfoListType[]
+    selectedAppDetailsList: AppInfoListType | AppInfoListType[]
     envName: string
     envId: string
     restartLoader: boolean

src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx

@@ -53,7 +53,7 @@ import { ReactComponent as HibernateIcon } from '../../../../assets/icons/ic-hib
 import { ReactComponent as UnhibernateIcon } from '../../../../assets/icons/ic-unhibernate.svg'
 import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
 import { renderCIListHeader } from '../../../app/details/cdDetails/utils'
-import { EnvironmentOverviewTable, EnvironmentOverviewTableProps } from '@Pages/Shared/EnvironmentOverviewTable'
+import { EnvironmentOverviewTable, EnvironmentOverviewTableRow } from '@Pages/Shared/EnvironmentOverviewTable'
 import './envOverview.scss'
 
 const processDeploymentWindowAppGroupOverviewMap = importComponentFromFELibrary(
@@ -62,6 +62,8 @@ const processDeploymentWindowAppGroupOverviewMap = importComponentFromFELibrary(
     'function',
 )
 const ClonePipelineButton = importComponentFromFELibrary('ClonePipelineButton', null, 'function')
+const ClonePipelineMenuButton = importComponentFromFELibrary('ClonePipelineMenuButton', null, 'function')
+const ClonePipelineModal = importComponentFromFELibrary('ClonePipelineModal', null, 'function')
 
 export default function EnvironmentOverview({
     appGroupListData,
@@ -82,8 +84,10 @@ export default function EnvironmentOverview({
     const [appStatusResponseList, setAppStatusResponseList] = useState<ManageAppsResponse[]>([])
     const timerId = useRef(null)
     const [selectedAppDetailsList, setSelectedAppDetailsList] = useState<AppInfoListType[]>([])
+    const [selectedAppDetails, setSelectedAppDetails] = useState<AppInfoListType>(null)
     const [openedHibernateModalType, setOpenedHibernateModalType] =
         useState<HibernateModalProps['openedHibernateModalType']>(null)
+    const [openClonePipelineConfig, setOpenClonePipelineConfig] = useState(false)
     const [commitInfoModalConfig, setCommitInfoModalConfig] = useState<Pick<
         ArtifactInfoModalProps,
         'ciArtifactId' | 'envId'
@@ -121,6 +125,8 @@ export default function EnvironmentOverview({
 
     const { searchParams } = useSearchString()
     const history = useHistory()
+    const isAppSelected = selectedAppDetails ?? !!selectedAppDetailsList.length
+    const selectedApps = selectedAppDetails ?? selectedAppDetailsList
 
     useEffect(() => {
         return () => {
@@ -131,7 +137,7 @@ export default function EnvironmentOverview({
     }, [])
 
     async function getDeploymentWindowEnvOverrideMetaData() {
-        const appEnvTuples = selectedAppDetailsList.map((appDetail) => ({
+        const appEnvTuples = (selectedAppDetails ? [selectedAppDetails] : selectedAppDetailsList).map((appDetail) => ({
             appId: +appDetail.appId,
             envId: +appDetail.envId,
         }))
@@ -144,13 +150,14 @@ export default function EnvironmentOverview({
     useEffect(() => {
         if (
             processDeploymentWindowAppGroupOverviewMap &&
+            isAppSelected &&
             (openedHibernateModalType ||
                 showHibernateStatusDrawer.showStatus ||
                 location.search.includes(URL_SEARCH_PARAMS.BULK_RESTART_WORKLOAD))
         ) {
             getDeploymentWindowEnvOverrideMetaData()
         }
-    }, [openedHibernateModalType, showHibernateStatusDrawer.showStatus, location.search])
+    }, [openedHibernateModalType, showHibernateStatusDrawer.showStatus, location.search, isAppSelected])
 
     useEffect(() => {
         setLoading(true)
@@ -247,10 +254,12 @@ export default function EnvironmentOverview({
     }
 
     const openHibernateModalPopup = () => {
+        setIsDeploymentLoading(true)
         setOpenedHibernateModalType(MODAL_TYPE.HIBERNATE)
     }
 
     const openUnHibernateModalPopup = () => {
+        setIsDeploymentLoading(true)
         setOpenedHibernateModalType(MODAL_TYPE.UNHIBERNATE)
     }
 
@@ -282,25 +291,66 @@ export default function EnvironmentOverview({
         })
     }
 
-    const environmentOverviewTableRows: EnvironmentOverviewTableProps['rows'] = appListData?.appInfoList?.map(
-        (appInfo) => ({
-            environment: {
-                id: appInfo.appId,
-                name: appInfo.application,
-                commits: appInfo.commits,
-                deployedAt: appInfo.lastDeployed,
-                status: appInfo.appStatus,
-                deploymentStatus: appInfo.deploymentStatus,
-                deployedBy: appInfo.lastDeployedBy,
-                lastDeployedImage: appInfo.lastDeployedImage,
+    const environmentOverviewTableRows: EnvironmentOverviewTableRow[] = appListData?.appInfoList?.map((appInfo) => ({
+        environment: {
+            id: appInfo.appId,
+            name: appInfo.application,
+            commits: appInfo.commits,
+            deployedAt: appInfo.lastDeployed,
+            status: appInfo.appStatus,
+            deploymentStatus: appInfo.deploymentStatus,
+            deployedBy: appInfo.lastDeployedBy,
+            lastDeployedImage: appInfo.lastDeployedImage,
+        },
+        popUpMenuItems: [
+            ...((ClonePipelineMenuButton && appListData.environment
+                ? [
+                      <ClonePipelineMenuButton
+                          sourceEnvironmentName={appListData.environment}
+                          onClick={() => {
+                              setSelectedAppDetails(appInfo)
+                              setOpenClonePipelineConfig(true)
+                          }}
+                      />,
+                  ]
+                : []) as EnvironmentOverviewTableRow['popUpMenuItems']),
+            {
+                label: 'Hibernate',
+                Icon: HibernateIcon,
+                iconType: null,
+                disabled: !appInfo.lastDeployed,
+                onClick: () => {
+                    setSelectedAppDetails(appInfo)
+                    openHibernateModalPopup()
+                },
             },
-            isChecked: selectedAppDetailsList.some(({ appId }) => appId === appInfo.appId),
-            onLastDeployedImageClick: openCommitInfoModal(appInfo.ciArtifactId),
-            onCommitClick: openCommitInfoModal(appInfo.ciArtifactId),
-            deployedAtLink: getDeploymentHistoryLink(appInfo.appId, appInfo.pipelineId),
-            redirectLink: getAppRedirectLink(appInfo.appId, +envId),
-        }),
-    )
+            {
+                label: 'Unhibernate',
+                Icon: UnhibernateIcon,
+                iconType: null,
+                disabled: !appInfo.lastDeployed,
+                onClick: () => {
+                    setSelectedAppDetails(appInfo)
+                    openUnHibernateModalPopup()
+                },
+            },
+            {
+                label: 'Restart Workload',
+                Icon: RotateIcon,
+                iconType: 'stroke',
+                disabled: !appInfo.lastDeployed,
+                onClick: () => {
+                    setSelectedAppDetails(appInfo)
+                    onClickShowBulkRestartModal()
+                },
+            },
+        ],
+        isChecked: selectedAppDetailsList.some(({ appId }) => appId === appInfo.appId),
+        onLastDeployedImageClick: openCommitInfoModal(appInfo.ciArtifactId),
+        onCommitClick: openCommitInfoModal(appInfo.ciArtifactId),
+        deployedAtLink: getDeploymentHistoryLink(appInfo.appId, appInfo.pipelineId),
+        redirectLink: getAppRedirectLink(appInfo.appId, +envId),
+    }))
 
     const renderSideInfoColumn = () => {
         return (
@@ -378,10 +428,10 @@ export default function EnvironmentOverview({
     }
 
     const renderOverviewModal = () => {
-        if (location.search?.includes(URL_SEARCH_PARAMS.BULK_RESTART_WORKLOAD)) {
+        if (isAppSelected && location.search?.includes(URL_SEARCH_PARAMS.BULK_RESTART_WORKLOAD)) {
             return (
                 <RestartWorkloadModal
-                    selectedAppDetailsList={selectedAppDetailsList}
+                    selectedAppDetailsList={selectedApps}
                     envName={appListData.environment}
                     envId={envId}
                     setRestartLoader={setRestartLoader}
@@ -393,10 +443,10 @@ export default function EnvironmentOverview({
             )
         }
 
-        if (openedHibernateModalType) {
+        if (isAppSelected && openedHibernateModalType) {
             return (
                 <HibernateModal
-                    selectedAppDetailsList={selectedAppDetailsList}
+                    selectedAppDetailsList={selectedApps}
                     appDetailsList={appGroupListData.apps}
                     envId={envId}
                     envName={appListData.environment}
@@ -426,6 +476,17 @@ export default function EnvironmentOverview({
             )
         }
 
+        if (ClonePipelineModal && isAppSelected && openClonePipelineConfig) {
+            return (
+                <ClonePipelineModal
+                    sourceEnvironmentName={appListData.environment}
+                    selectedAppDetailsList={selectedApps}
+                    handleCloseClonePipelineModal={() => setOpenClonePipelineConfig(null)}
+                    httpProtocol={httpProtocol}
+                />
+            )
+        }
+
         if (commitInfoModalConfig) {
             return (
                 <ArtifactInfoModal
@@ -457,7 +518,6 @@ export default function EnvironmentOverview({
                                     httpProtocol={httpProtocol.current}
                                 />
                             )}
-
                             <button
                                 onClick={openHibernateModalPopup}
                                 className="bcn-0 fs-12 dc__border dc__border-radius-4-imp flex h-28"