Merge pull request #2735 from devtron-labs/feat/open-doc-link

feat: implement draggable side panel with support to open doc links in iframe

Author: RohitRaj011

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.14.1-pre-3",
+        "@devtron-labs/devtron-fe-common-lib": "1.14.1-pre-5",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx

@@ -103,7 +103,7 @@ const SelectMergeStrategy = ({
                         {PatchStrategyTooltipInfo && <PatchStrategyTooltipInfo />}
                     </OverrideStrategyTippyContent>
                 }
-                documentationLink="HOME_PAGE"
+                documentationLink="DOC_HOME_PAGE"
             />
 
             {renderContent()}

src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx

@@ -206,6 +206,7 @@ const UploadChartModal = ({ closeUploadPopup }: UploadChartModalType) => {
                         docLinkKey="GLOBAL_CONFIG_CUSTOM_CHART_PRE_REQUISITES"
                         text="View documentation"
                         dataTestId="learn-more-about-custom-chart-pre-requisites-link"
+                        openInNewTab
                     />
                 </div>
             </div>

src/components/CIPipelineN/PluginDetailHeader/PluginDetailHeader.component.tsx

@@ -111,7 +111,8 @@ const PluginDetailHeader = ({ handlePluginVersionChange }: PluginDetailHeaderPro
                     interactive
                     documentationLink={docLink as keyof typeof DOCUMENTATION}
                     documentationLinkText="View documentation"
-                    isExternalLink
+                    isExternalLink={stepType !== PluginType.INLINE}
+                    openInNewTab
                 >
                     <button
                         type="button"

src/components/CIPipelineN/Sidebar.tsx

@@ -454,6 +454,7 @@ export const Sidebar = ({
                         docLinkKey={helpData.docLink}
                         text={helpData.helpText}
                         dataTestId="learn-more-about-ci-pipeline-workflow-editor-link"
+                        openInNewTab
                     />
                 </div>
             )}

src/components/ciConfig/CIBuildpackBuildOptions.tsx

@@ -160,6 +160,7 @@ const BuilderTippy = () => {
             documentationLinkText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.documentationLinkText}
             documentationLink="APP_CI_CONFIG_BUILD_WITHOUT_DOCKER"
             iconClassName="icon-dim-16 fcn-6 ml-4"
+            openInNewTab
         />
     )
 }

src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx

@@ -477,6 +477,7 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
                     docLinkKey="GLOBAL_CONFIG_API_TOKEN"
                     text="How to generate API tokens?"
                     dataTestId="learn-more-about-generating-api-tokens"
+                    openInNewTab
                 />
             )
         }

src/components/cluster/ClusterInfoStepsModal.tsx

@@ -107,6 +107,7 @@ export default function ClusterInfoStepsModal({ subTitle, command, clusterName }
                     text="View documentation"
                     dataTestId="cluster-info-step-view-documentation"
                     showExternalIcon
+                    openInNewTab
                 />
             </div>
         </div>

src/components/common/Banner/Banner.tsx

@@ -24,14 +24,13 @@ import {
     ComponentSizeType,
     Icon,
     InfoBlockVariant,
-    MotionDiv,
+    InstallationType,
+    motion,
     noop,
     setActionWithExpiry,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { InstallationType } from '@Components/v2/devtronStackManager/DevtronStackManager.type'
-
 import { importComponentFromFELibrary } from '../helpers/Helpers'
 import { InteractiveCellText } from '../helpers/InteractiveCellText/InteractiveCellText'
 import { useOnline } from '../hooks'
@@ -179,7 +178,7 @@ export const Banner = () => {
     return (
         <AnimatePresence custom={!!bannerVariant}>
             {bannerVariant && config && (
-                <MotionDiv
+                <motion.div
                     layout
                     key={bannerVariant}
                     variants={bannerVariants}
@@ -218,7 +217,7 @@ export const Banner = () => {
                             showAriaLabelInTippy={false}
                         />
                     )}
-                </MotionDiv>
+                </motion.div>
             )}
         </AnimatePresence>
     )

src/components/common/SidePanel/SidePanel.scss

@@ -0,0 +1,14 @@
+.aside-drag {
+    &__handle {
+        height: 32px;
+        background-color: var(--white-60);
+        transition: all 0.2s;
+    }
+
+    &:hover, &--dragging {
+        .aside-drag__handle {
+            height: 48px;
+            background-color: var(--white);
+        }
+    }
+}