feat: manual canary control & its visibility

.env

@@ -69,4 +69,5 @@ FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
 FEATURE_AI_INTEGRATION_ENABLE=false
 LOGIN_PAGE_IMAGE=
+FEATURE_MANAGE_TRAFFIC_ENABLE=false
 FEATURE_REDFISH_NODE_ENABLE=false

.eslintignore

@@ -9,10 +9,8 @@ vite.config.mts
 src/Pages/GlobalConfigurations/Authorization/APITokens/__tests__/ApiTokens.test.tsx
 src/components/AppSelector/ChartSelector.tsx
 src/components/ApplicationGroup/AppGroup.service.ts
-src/components/ApplicationGroup/AppGroup.types.ts
 src/components/ApplicationGroup/AppGroup.utils.ts
 src/components/ApplicationGroup/AppGroupAppFilter.components.tsx
-src/components/ApplicationGroup/AppGroupAppFilter.tsx
 src/components/ApplicationGroup/AppGroupDetailsRoute.tsx
 src/components/ApplicationGroup/AppGroupRoute.tsx
 src/components/ApplicationGroup/Constants.ts
@@ -23,7 +21,6 @@ src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx
 src/components/ApplicationGroup/Details/EnvCIDetails/__test__/EnvCIDetails.test.tsx
 src/components/ApplicationGroup/Details/EnvironmentConfig/__test__/ApplicationRoutes.test.tsx
 src/components/ApplicationGroup/Details/EnvironmentConfig/__test__/EnvConfig.test.tsx
-src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx
 src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateModal.tsx
 src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusListDrawer.tsx
 src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusRow.tsx

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverview.constants.ts

@@ -45,3 +45,5 @@ export const EnvironmentOverviewTableHeaderValues: Record<keyof typeof Environme
     DEPLOYED_BY: 'DEPLOYED BY',
     STATUS: null,
 }
+
+export const ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER = 'environment-overview-drag-selector'

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewBulkSelectionActionWidget.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { useEffect } from 'react'
+
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    DraggableButton,
+    DraggablePositionVariant,
+    DraggableWrapper,
+    Icon,
+    useRegisterShortcut,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER } from './EnvironmentOverview.constants'
+import { EnvironmentOverviewPopupMenu } from './EnvironmentOverviewPopupMenu'
+import { EnvironmentOverviewBulkSelectionWidgetProps } from './EnvironmentOverviewTable.types'
+
+export const EnvironmentOverviewBulkSelectionWidget = ({
+    count,
+    onClose,
+    parentRef,
+    popUpMenuItems,
+    children,
+}: EnvironmentOverviewBulkSelectionWidgetProps) => {
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    useEffect(() => {
+        registerShortcut({ keys: ['Escape'], callback: onClose })
+
+        return () => {
+            unregisterShortcut(['Escape'])
+        }
+    }, [])
+
+    return (
+        <DraggableWrapper
+            dragSelector={`.${ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER}`}
+            positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER}
+            zIndex="calc(var(--modal-index) - 1)"
+            parentRef={parentRef}
+        >
+            <div className="bulk-selection-widget br-8 pl-7 pr-11 py-11 flex dc__gap-8">
+                <DraggableButton dragClassName={ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER} />
+                <div className="flex dc__gap-8 fs-13 lh-20 fw-6">
+                    <span className="bcb-5 br-4 px-6 cn-0">{count}</span>
+                    <span className="cn-9">Selected</span>
+                </div>
+                <div className="w-1 h-20 bcb-1" />
+                {children}
+                {popUpMenuItems.length > 0 && <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />}
+                <div className="w-1 h-20 bcb-1" />
+                <Button
+                    icon={<Icon name="ic-close-large" color={null} />}
+                    dataTestId="environment-overview-table-action-widget-close"
+                    style={ButtonStyleType.negativeGrey}
+                    variant={ButtonVariantType.borderLess}
+                    ariaLabel="Clear selection(s)"
+                    size={ComponentSizeType.small}
+                    onClick={onClose}
+                    showAriaLabelInTippy={false}
+                />
+            </div>
+        </DraggableWrapper>
+    )
+}

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewPopupMenu.tsx

@@ -0,0 +1,51 @@
+// TODO: Replace this with ActionMenu component
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    Icon,
+    PopupMenu,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { EnvironmentOverviewTableRow } from './EnvironmentOverviewTable.types'
+
+export const EnvironmentOverviewPopupMenu = ({
+    popUpMenuItems,
+}: Pick<EnvironmentOverviewTableRow, 'popUpMenuItems'>) => (
+    <PopupMenu autoClose>
+        <PopupMenu.Button isKebab rootClassName="p-0 dc__no-border cursor">
+            <Button
+                icon={<Icon name="ic-more-vertical" color={null} />}
+                dataTestId="environment-overview-pop-up-menu"
+                style={ButtonStyleType.neutral}
+                variant={ButtonVariantType.borderLess}
+                ariaLabel="environment-overview-pop-up-menu"
+                size={ComponentSizeType.xs}
+                showAriaLabelInTippy={false}
+            />
+        </PopupMenu.Button>
+        <PopupMenu.Body rootClassName="dc__border py-4 w-180">
+            {popUpMenuItems.map((popUpMenuItem) => {
+                if ('label' in popUpMenuItem) {
+                    const { label, onClick, disabled, iconName } = 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}
+                        >
+                            {iconName && <Icon name={iconName} color="N800" />}
+                            <span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
+                        </button>
+                    )
+                }
+
+                return popUpMenuItem
+            })}
+        </PopupMenu.Body>
+    </PopupMenu>
+)

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

@@ -25,7 +25,6 @@ import {
     getRandomColor,
     handleRelativeDateSorting,
     ImageChipCell,
-    PopupMenu,
     processDeployedTime,
     RegistryType,
     SortableTableHeaderCell,
@@ -38,56 +37,18 @@ import {
 import { ReactComponent as ICActivity } from '@Icons/ic-activity.svg'
 import { ReactComponent as ICArrowLineDown } from '@Icons/ic-arrow-line-down.svg'
 import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
-import { ReactComponent as ICMoreOption } from '@Icons/ic-more-option.svg'
 
 import {
     EnvironmentOverviewTableHeaderFixedKeys,
     EnvironmentOverviewTableHeaderValues,
     EnvironmentOverviewTableHeaderVariableKeys,
     EnvironmentOverviewTableSortableKeys,
 } from './EnvironmentOverview.constants'
-import {
-    EnvironmentOverviewTableProps,
-    EnvironmentOverviewTableRow,
-    EnvironmentOverviewTableRowData,
-} from './EnvironmentOverviewTable.types'
+import { EnvironmentOverviewPopupMenu } from './EnvironmentOverviewPopupMenu'
+import { EnvironmentOverviewTableProps, EnvironmentOverviewTableRowData } from './EnvironmentOverviewTable.types'
 
 import './EnvironmentOverviewTable.scss'
 
-const renderPopUpMenu = (items: EnvironmentOverviewTableRow['popUpMenuItems']) => (
-    <PopupMenu autoClose>
-        <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-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>
-)
-
 export const EnvironmentOverviewTable = ({
     rows = [],
     isVirtualEnv,
@@ -108,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],
     )
@@ -202,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 : ''}`}>
@@ -231,7 +192,7 @@ export const EnvironmentOverviewTable = ({
                                 {name}
                             </Link>
                         </Tooltip>
-                        {!!popUpMenuItems?.length && renderPopUpMenu(popUpMenuItems)}
+                        {!!popUpMenuItems?.length && <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />}
                     </div>
                 </div>
                 <div
@@ -283,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

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { FunctionComponent, MouseEvent, ReactElement, SVGProps } from 'react'
+import { MouseEvent, MutableRefObject, PropsWithChildren, ReactElement } from 'react'
+
+import { IconName } from '@devtron-labs/devtron-fe-common-lib'
 
 import { EnvironmentOverviewTableHeaderKeys } from './EnvironmentOverview.constants'
 
@@ -32,15 +34,14 @@ export interface EnvironmentOverviewTableRowData {
 export type EnvironmentOverviewTablePopUpMenuItem =
     | {
           label: string
-          Icon?: FunctionComponent<SVGProps<SVGSVGElement>>
-          iconType?: 'fill' | 'stroke'
+          iconName?: IconName
           disabled?: boolean
           onClick?: (event: MouseEvent<HTMLButtonElement>) => void
       }
     | ReactElement
 
 export interface EnvironmentOverviewTableRow {
-    environment: EnvironmentOverviewTableRowData
+    app: EnvironmentOverviewTableRowData
     isChecked?: boolean
     onLastDeployedImageClick: (event: MouseEvent<HTMLButtonElement>) => void
     onCommitClick: (event: MouseEvent<HTMLButtonElement>) => void
@@ -54,3 +55,11 @@ export interface EnvironmentOverviewTableProps {
     isVirtualEnv?: boolean
     onCheckboxSelect: (id: EnvironmentOverviewTableRowData['id'], isChecked: boolean, isAllChecked: boolean) => void
 }
+
+export interface EnvironmentOverviewBulkSelectionWidgetProps
+    extends PropsWithChildren<{
+            count: number
+            onClose: () => void
+            parentRef: MutableRefObject<HTMLDivElement>
+        }>,
+        Pick<EnvironmentOverviewTableRow, 'popUpMenuItems'> {}

src/Pages/Shared/EnvironmentOverviewTable/index.ts

@@ -15,5 +15,6 @@
  */
 
 export { EnvironmentOverviewTableSortableKeys } from './EnvironmentOverview.constants'
+export * from './EnvironmentOverviewBulkSelectionActionWidget'
 export * from './EnvironmentOverviewTable.component'
 export * from './EnvironmentOverviewTable.types'