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

Author: RohitRaj011

src/components/common/SidePanel/SidePanel.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Draggable, { DraggableEventHandler } from 'react-draggable'
+
+import { AnimatePresence, motion, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+
+import { SidePanelDocumentation } from './SidePanelDocumentation'
+import { SidePanelProps } from './types'
+
+const MAX_ASIDE_WIDTH = 525
+const MIN_ASIDE_WIDTH = 350
+
+export const SidePanel = ({ asideWidth, setAsideWidth }: SidePanelProps) => {
+    // STATES
+    const [contentOverlay, setContentOverlay] = useState(false)
+
+    // HOOKS
+    const { sidePanelConfig, setSidePanelConfig } = useMainContext()
+
+    const { open } = sidePanelConfig
+
+    // HANDLERS
+    const handleClose = () => {
+        setAsideWidth(MIN_ASIDE_WIDTH)
+        setSidePanelConfig({ open: false })
+    }
+
+    const handleDrag: DraggableEventHandler = (_, data) => {
+        const newWidth = asideWidth - data.deltaX
+        const clamped = Math.max(MIN_ASIDE_WIDTH, Math.min(MAX_ASIDE_WIDTH, newWidth))
+        setAsideWidth(clamped)
+    }
+
+    const handleDragStart = () => setContentOverlay(true)
+
+    const handleDragStop = () => setContentOverlay(false)
+
+    return (
+        <AnimatePresence>
+            {open && (
+                <>
+                    <Draggable
+                        handle=".aside-drag"
+                        defaultClassNameDragging="aside-drag--dragging"
+                        axis="none"
+                        position={{
+                            x: 0,
+                            y: 0,
+                        }}
+                        bounds={{
+                            top: 0,
+                            bottom: 0,
+                        }}
+                        onDrag={handleDrag}
+                        onStart={handleDragStart}
+                        onStop={handleDragStop}
+                    >
+                        <div className="aside-drag flex dc__cursor-col-resize dc__zi-10">
+                            <div className="aside-drag__handle px-1 br-1" />
+                        </div>
+                    </Draggable>
+                    <motion.aside
+                        initial={{ x: 350, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        exit={{ x: 350, opacity: 0 }}
+                        transition={{
+                            duration: 0.2,
+                            type: 'spring',
+                            stiffness: 300,
+                            damping: 30,
+                        }}
+                        className="dc__position-rel mt-8 mr-8 mb-8 border__primary br-6 bg__primary flexbox-col dc__overflow-hidden"
+                    >
+                        {contentOverlay && <div className="dc__position-abs w-100 h-100 dc__zi-1" />}
+                        <SidePanelDocumentation onClose={handleClose} />
+                    </motion.aside>
+                </>
+            )}
+        </AnimatePresence>
+    )
+}

src/components/common/SidePanel/SidePanelDocumentation.tsx

@@ -0,0 +1,66 @@
+import {
+    Button,
+    ButtonComponentType,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    Icon,
+    useMainContext,
+    useTheme,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { SidePanelDocumentationProps } from './types'
+
+export const SidePanelDocumentation = ({ onClose }: SidePanelDocumentationProps) => {
+    // HOOKS
+    const { appTheme } = useTheme()
+    const {
+        sidePanelConfig: { docLink },
+    } = useMainContext()
+
+    return (
+        <>
+            <div className="px-16 pt-14 pb-13 border__primary--bottom flex dc__gap-12">
+                <Icon name="ic-book-open" color="N900" />
+                <h2 className="m-0 fs-16 lh-1-5 fw-6 cn-9 flex-grow-1">Documentation</h2>
+                <div className="flex dc__gap-8">
+                    <Button
+                        dataTestId="side-doc-open-link"
+                        ariaLabel="side-doc-open-link"
+                        showAriaLabelInTippy={false}
+                        icon={<Icon name="ic-arrow-square-out" color={null} />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                        size={ComponentSizeType.xs}
+                        component={ButtonComponentType.anchor}
+                        anchorProps={{
+                            href: docLink,
+                        }}
+                    />
+                    <Button
+                        dataTestId="side-doc-close-btn"
+                        ariaLabel="side-doc-close-btn"
+                        showAriaLabelInTippy={false}
+                        icon={<Icon name="ic-close-large" color={null} />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.negativeGrey}
+                        size={ComponentSizeType.xs}
+                        onClick={onClose}
+                    />
+                </div>
+            </div>
+            <div className="flex-grow-1">
+                {docLink && (
+                    <iframe
+                        title="side-panel-documentation"
+                        loading="lazy"
+                        className="dc__no-border"
+                        src={`${docLink}?theme=${appTheme}`}
+                        width="100%"
+                        height="100%"
+                    />
+                )}
+            </div>
+        </>
+    )
+}

src/components/common/SidePanel/index.ts

@@ -0,0 +1 @@
+export * from './SidePanel'

src/components/common/SidePanel/types.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react'
+
+export interface SidePanelProps {
+    asideWidth: number
+    setAsideWidth: Dispatch<SetStateAction<number>>
+}
+
+export interface SidePanelDocumentationProps {
+    onClose: () => void
+}