feat: add ask tab in side panel

Author: Elessar1802

package.json

@@ -28,6 +28,7 @@
         "react-csv": "^2.2.2",
         "react-dates": "^21.8.0",
         "react-dom": "^17.0.2",
+        "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
         "react-gtm-module": "^2.0.11",
         "react-mde": "^11.5.0",

src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog.tsx

@@ -10,13 +10,15 @@ import {
 
 import { EnterpriseTrialDialogProps } from './types'
 
-const EnterpriseTrialDialog = ({ featureTitle, featureDescription }: EnterpriseTrialDialogProps) => {
+const EnterpriseTrialDialog = ({ featureTitle, featureDescription, showBorder = true }: EnterpriseTrialDialogProps) => {
     const testimonialCount = TESTIMONIAL_CARD_DATA.length
     const randomNumber = Math.round(Math.random() * testimonialCount) % testimonialCount
     const testimonialConfig = TESTIMONIAL_CARD_DATA[randomNumber]
 
     return (
-        <div className="flexbox-col br-16 border__primary dc__overflow-hidden enterprise-trial-dialog">
+        <div
+            className={`flexbox-col ${showBorder ? 'border__primary br-16' : ''} dc__overflow-hidden enterprise-trial-dialog`}
+        >
             <div className="p-24 flexbox-col dc__gap-16 border__secondary--bottom">
                 <Icon name="ic-enterprise-tag" size={null} color={null} />
                 <div className="flexbox-col dc__gap-8 ">

src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts

@@ -36,4 +36,5 @@ export enum FooterComponentChildKey {
 export interface EnterpriseTrialDialogProps {
     featureTitle: string
     featureDescription: string
+    showBorder?: boolean
 }

src/assets/img/ic-maintenance.svg

@@ -12,8 +12,8 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { SIDE_PANEL_ASIDE_DRAG_HANDLE, SIDE_PANEL_MAX_ASIDE_WIDTH, SIDE_PANEL_MIN_ASIDE_WIDTH } from './constants'
-import { SidePanelDocumentation } from './SidePanelDocumentation'
-import { SidePanelProps } from './types'
+import { SidePanelContent } from './SidePanelContent'
+import { SidePanelProps, SidePanelTab } from './types'
 
 import './SidePanel.scss'
 
@@ -93,7 +93,7 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
                         className={`flex-grow-1 dc__position-rel mt-8 mr-8 mb-8 br-6 bg__primary flexbox-col dc__overflow-hidden ${appTheme === AppThemeType.dark ? 'border__primary-translucent' : ''}`}
                     >
                         {contentOverlay && <div className="dc__position-abs w-100 h-100 dc__zi-1" />}
-                        <SidePanelDocumentation onClose={handleClose} />
+                        <SidePanelContent onClose={handleClose} initialTab={SidePanelTab.DOCUMENTATION} />
                     </div>
                 </motion.aside>
             )}