Merge pull request #1019 from devtron-labs/feat/notify-oss-plus

feat: add new icons and update ActionMenu and HelpButton components for OSS Plus upgrade

Author: AbhishekA1509

src/Assets/IconV2/ic-arrow-up-circle-with-dot.svg

@@ -81,7 +81,7 @@ export const ActionMenu = <T extends string | number = string | number>({
             buttonProps={buttonProps}
             triggerElement={children}
         >
-            <div className="flexbox-col mxh-300">
+            <div className="flexbox-col mxh-320">
                 {isSearchable && (
                     <div
                         role="search"

src/Assets/IconV2/ic-arrow-up-circle.svg

@@ -27,4 +27,5 @@ export const BORDER_VARIANT_TO_CLASS_NAME_MAP: Record<BorderVariantType, string>
     secondary: 'border__secondary',
     none: '',
     'secondary-translucent': 'border__secondary-translucent',
+    primary: 'border__primary',
 }

src/Assets/IconV2/ic-medium-upgrade.svg

@@ -17,7 +17,7 @@
 import { BackdropProps } from '../Backdrop'
 import { ButtonProps } from '../Button'
 
-export type BorderVariantType = 'secondary' | 'none' | 'secondary-translucent'
+export type BorderVariantType = 'secondary' | 'none' | 'secondary-translucent' | 'primary'
 
 export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape' | 'avoidFocusTrap'>> {
     /** Unique identifier for the modal */

src/Shared/Components/ActionMenu/ActionMenu.component.tsx

@@ -75,6 +75,7 @@ export const HelpButton = ({
         setSidePanelConfig,
         loginCount,
         showGettingStartedCard,
+        setShowUpgradeToOSSPlusDialog,
     } = useMainContext()
     const { appTheme } = useTheme()
     const isSecureConnection = useIsSecureConnection()
@@ -126,6 +127,9 @@ export const HelpButton = ({
             case HelpMenuItems.VIEW_DOCUMENTATION:
                 handleViewDocumentationClick(item, e)
                 break
+            case HelpMenuItems.UPGRADE_TO_OSS_PLUS:
+                setShowUpgradeToOSSPlusDialog?.(true)
+                break
             default:
         }
     }

src/Shared/Components/GenericModal/constants.ts

@@ -77,6 +77,13 @@ export const OSS_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][nu
         componentType: 'anchor',
         href: RAISE_ISSUE,
     },
+    {
+        id: HelpMenuItems.UPGRADE_TO_OSS_PLUS,
+        label: 'Upgrade to OSS Plus',
+        startIcon: { name: 'ic-arrow-up-circle' },
+        componentType: 'button',
+        description: 'Run Devtron OSS with Expert Support',
+    },
 ]
 
 export const ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'] = [

src/Shared/Components/GenericModal/types.ts

@@ -71,6 +71,7 @@ export enum HelpMenuItems {
     GIVE_FEEDBACK = 'give-feedback',
     CHAT_WITH_SUPPORT = 'chat-with-support',
     RAISE_ISSUE_REQUEST = 'raise-issue-request',
+    UPGRADE_TO_OSS_PLUS = 'upgrade-to-oss-plus',
     DEVTRON_GPT = 'devtron-gpt',
 }
 

src/Shared/Components/Header/HelpButton.tsx

@@ -18,6 +18,8 @@ import { ReactComponent as ICArrowClockwise } from '@IconsV2/ic-arrow-clockwise.
 import { ReactComponent as ICArrowLineDown } from '@IconsV2/ic-arrow-line-down.svg'
 import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
 import { ReactComponent as ICArrowSquareOut } from '@IconsV2/ic-arrow-square-out.svg'
+import { ReactComponent as ICArrowUpCircle } from '@IconsV2/ic-arrow-up-circle.svg'
+import { ReactComponent as ICArrowUpCircleWithDot } from '@IconsV2/ic-arrow-up-circle-with-dot.svg'
 import { ReactComponent as ICArrowsClockwise } from '@IconsV2/ic-arrows-clockwise.svg'
 import { ReactComponent as ICArrowsLeftRight } from '@IconsV2/ic-arrows-left-right.svg'
 import { ReactComponent as ICAsterisk } from '@IconsV2/ic-asterisk.svg'
@@ -213,6 +215,7 @@ import { ReactComponent as ICMagnifyingGlass } from '@IconsV2/ic-magnifying-glas
 import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg'
 import { ReactComponent as ICMediumMegaphone } from '@IconsV2/ic-medium-megaphone.svg'
 import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
+import { ReactComponent as ICMediumUpgrade } from '@IconsV2/ic-medium-upgrade.svg'
 import { ReactComponent as ICMegaphoneLeft } from '@IconsV2/ic-megaphone-left.svg'
 import { ReactComponent as ICMegaphoneRight } from '@IconsV2/ic-megaphone-right.svg'
 import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg'
@@ -354,6 +357,8 @@ export const iconMap = {
     'ic-arrow-line-down': ICArrowLineDown,
     'ic-arrow-right': ICArrowRight,
     'ic-arrow-square-out': ICArrowSquareOut,
+    'ic-arrow-up-circle-with-dot': ICArrowUpCircleWithDot,
+    'ic-arrow-up-circle': ICArrowUpCircle,
     'ic-arrows-clockwise': ICArrowsClockwise,
     'ic-arrows-left-right': ICArrowsLeftRight,
     'ic-asterisk': ICAsterisk,
@@ -549,6 +554,7 @@ export const iconMap = {
     'ic-medium-delete': ICMediumDelete,
     'ic-medium-megaphone': ICMediumMegaphone,
     'ic-medium-paintbucket': ICMediumPaintbucket,
+    'ic-medium-upgrade': ICMediumUpgrade,
     'ic-megaphone-left': ICMegaphoneLeft,
     'ic-megaphone-right': ICMegaphoneRight,
     'ic-memory': ICMemory,