feat: EnvironmentOverview - integrate ManageTraffic, code optimizations

Author: RohitRaj011

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewBulkSelectionActionWidget.tsx

@@ -52,7 +52,7 @@ export const EnvironmentOverviewBulkSelectionWidget = ({
                 </div>
                 <div className="w-1 h-20 bcb-1" />
                 {children}
-                <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />
+                {popUpMenuItems.length > 0 && <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />}
                 <div className="w-1 h-20 bcb-1" />
                 <Button
                     icon={<Icon name="ic-close-large" color={null} />}

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

@@ -69,10 +69,10 @@ export const EnvironmentOverviewTable = ({
         () =>
             rows.sort((a, b) => {
                 if (sortBy === EnvironmentOverviewTableSortableKeys.DEPLOYED_AT) {
-                    return handleRelativeDateSorting(a.environment.deployedAt, b.environment.deployedAt, sortOrder)
+                    return handleRelativeDateSorting(a.app.deployedAt, b.app.deployedAt, sortOrder)
                 }
 
-                return stringComparatorBySortOrder(a.environment.name, b.environment.name, sortOrder)
+                return stringComparatorBySortOrder(a.app.name, b.app.name, sortOrder)
             }),
         [rows, sortBy, sortOrder],
     )
@@ -163,15 +163,15 @@ export const EnvironmentOverviewTable = ({
     )
 
     const renderRow = ({
-        environment,
+        app,
         isChecked,
         deployedAtLink,
         redirectLink,
         onCommitClick,
         onLastDeployedImageClick,
         popUpMenuItems = [],
     }: EnvironmentOverviewTableProps['rows'][0]) => {
-        const { id, name, status, commits, deployedAt, deployedBy, deploymentStatus, lastDeployedImage } = environment
+        const { id, name, status, commits, deployedAt, deployedBy, deploymentStatus, lastDeployedImage } = app
 
         return (
             <div className={`environment-overview-table__row ${isChecked ? isCheckedRowClassName : ''}`}>
@@ -244,7 +244,7 @@ export const EnvironmentOverviewTable = ({
         <div className="environment-overview-table dc__border br-4 bg__primary w-100">
             {renderHeaderRow()}
             {sortedRows.map((row) => (
-                <Fragment key={row.environment.id}>{renderRow(row)}</Fragment>
+                <Fragment key={row.app.id}>{renderRow(row)}</Fragment>
             ))}
         </div>
     )

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

@@ -41,7 +41,7 @@ export type EnvironmentOverviewTablePopUpMenuItem =
     | ReactElement
 
 export interface EnvironmentOverviewTableRow {
-    environment: EnvironmentOverviewTableRowData
+    app: EnvironmentOverviewTableRowData
     isChecked?: boolean
     onLastDeployedImageClick: (event: MouseEvent<HTMLButtonElement>) => void
     onCommitClick: (event: MouseEvent<HTMLButtonElement>) => void

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

@@ -74,10 +74,15 @@ const processDeploymentWindowAppGroupOverviewMap = importComponentFromFELibrary(
     null,
     'function',
 )
-// TODO: remove from fe-lib
-// const ClonePipelineButton = importComponentFromFELibrary('ClonePipelineButton', null, 'function')
+const AppGroupManageTrafficDrawer = importComponentFromFELibrary('AppGroupManageTrafficDrawer', null, 'function')
+const ManageTrafficButton = importComponentFromFELibrary('ManageTrafficButton', null, 'function')
 const ClonePipelineMenuButton = importComponentFromFELibrary('ClonePipelineMenuButton', null, 'function')
 const ClonePipelineModal = importComponentFromFELibrary('ClonePipelineModal', null, 'function')
+const getManageTrafficMenuButtonConfig = importComponentFromFELibrary(
+    'getManageTrafficMenuButtonConfig',
+    null,
+    'function',
+)
 
 const EnvironmentOverview = ({
     appGroupListData,
@@ -111,6 +116,7 @@ const EnvironmentOverview = ({
         Record<string, { type: string; excludedUserEmails: string[]; userActionState: ACTION_STATE; isActive: boolean }>
     >({})
     const [restartLoader, setRestartLoader] = useState<boolean>(false)
+    const [isManageTrafficDrawerOpen, setIsManageTrafficDrawerOpen] = useState(false)
 
     // HOOKS
     const { envId } = useParams<{ envId: string }>()
@@ -285,10 +291,14 @@ const EnvironmentOverview = ({
 
     const handleBulkSelectionWidgetClose = () => setSelectedAppDetailsList([])
 
+    const handleOpenManageTrafficDrawer = () => setIsManageTrafficDrawerOpen(true)
+
+    const handleCloseManageTrafficDrawer = () => setIsManageTrafficDrawerOpen(false)
+
     // CONFIGS
     const environmentOverviewTableRows = (appListData?.appInfoList ?? []).map<EnvironmentOverviewTableRow>(
         (appInfo) => ({
-            environment: {
+            app: {
                 id: appInfo.appId,
                 name: appInfo.application,
                 commits: appInfo.commits,
@@ -502,13 +512,7 @@ const EnvironmentOverview = ({
                     <span className="flex">
                         <GridIcon className="icon-dim-20 mr-8 scn-9" /> {GROUP_LIST_HEADER.APPLICATIONS}
                     </span>
-                    <Button
-                        dataTestId="environment-overview-table-manage-traffic"
-                        startIcon={<Icon name="ic-traffic-signal" color={null} />}
-                        variant={ButtonVariantType.secondary}
-                        size={ComponentSizeType.medium}
-                        text="Manage Traffic"
-                    />
+                    {ManageTrafficButton && <ManageTrafficButton onClick={handleOpenManageTrafficDrawer} />}
                 </div>
                 <EnvironmentOverviewTable
                     rows={environmentOverviewTableRows}
@@ -519,19 +523,26 @@ const EnvironmentOverview = ({
             {/* MODALS */}
             {renderOverviewModal()}
 
+            {AppGroupManageTrafficDrawer && isManageTrafficDrawerOpen && (
+                <AppGroupManageTrafficDrawer
+                    envId={+envId}
+                    envName={appListData.environment}
+                    appInfoList={appListData?.appInfoList}
+                    initialSelectedAppList={selectedAppDetailsList}
+                    onClose={handleCloseManageTrafficDrawer}
+                />
+            )}
+
             {/* BULK SELECTION WIDGET */}
             {!!selectedAppDetailsList.length && (
                 <EnvironmentOverviewBulkSelectionWidget
                     parentRef={parentRef}
                     count={selectedAppDetailsList.length}
                     onClose={handleBulkSelectionWidgetClose}
                     popUpMenuItems={[
-                        {
-                            label: 'Manage Traffic',
-                            iconName: 'ic-traffic-signal',
-                            // TODO: open manage traffic drawer here
-                            onClick: () => {},
-                        },
+                        ...(getManageTrafficMenuButtonConfig
+                            ? [getManageTrafficMenuButtonConfig({ onClick: handleOpenManageTrafficDrawer })]
+                            : []),
                         ...(ClonePipelineMenuButton && appListData.environment
                             ? [
                                   <ClonePipelineMenuButton