Merge pull request #755 from devtron-labs/fix/app-details-manifest-layout

feat: add smoothScrollToTop and expose onSearchAction event on CodeEditor

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.14.1-pre-5",
+    "version": "1.14.1-pre-6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -33,7 +33,7 @@ import {
 } from '@uiw/react-codemirror'
 
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
-import { cleanKubeManifest } from '@Common/Helper'
+import { cleanKubeManifest, noop } from '@Common/Helper'
 import { getUniqueId } from '@Shared/Helpers'
 import { AppThemeType, useTheme } from '@Shared/Providers'
 
@@ -48,7 +48,7 @@ import {
     replaceAll,
     showReplaceFieldState,
 } from './Commands'
-import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
+import { getCodeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema, parseValueToCode } from './utils'
 
@@ -87,6 +87,8 @@ const CodeEditor = <DiffView extends boolean = false>({
     onBlur,
     onFocus,
     autoFocus,
+    onSearchPanelOpen = noop,
+    onSearchBarAction = noop,
     collapseUnchangedDiffView = false,
     ...resProps
 }: CodeEditorProps<DiffView>) => {
@@ -201,23 +203,33 @@ const CodeEditor = <DiffView extends boolean = false>({
         setLhsCode(newLhsValue)
     }
 
+    const openSearchPanelWrapper: typeof openSearchPanel = (view) => {
+        onSearchPanelOpen()
+        return openSearchPanel(view)
+    }
+
+    const openSearchPanelWithReplaceWrapper: typeof openSearchPanelWithReplace = (view) => {
+        onSearchPanelOpen()
+        return openSearchPanelWithReplace(view)
+    }
+
     // EXTENSIONS
     const getBaseExtensions = (): Extension[] => [
         basicSetup(basicSetupOptions),
         themeExtension,
         keymap.of([
             ...vscodeKeymap.filter(({ key }) => key !== 'Mod-Alt-Enter' && key !== 'Mod-Enter' && key !== 'Mod-f'),
-            ...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanel, scope: 'editor search-panel' }] : []),
+            ...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanelWrapper, scope: 'editor search-panel' }] : []),
             { key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
-            { key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
+            { key: 'Mod-Alt-f', run: openSearchPanelWithReplaceWrapper, scope: 'editor search-panel' },
             { key: 'Escape', run: blurOnEscape, stopPropagation: true },
         ]),
         indentationMarkers(),
         getLanguageExtension(mode, collapseUnchangedDiffView),
         foldingCompartment.of(foldConfig),
         lintGutter(),
         search({
-            createPanel: codeEditorFindReplace,
+            createPanel: getCodeEditorFindReplace(onSearchBarAction),
         }),
         showReplaceFieldState,
         ...(mode === MODES.YAML ? [yamlHighlight] : []),

src/Assets/IconV2/ic-key-enter.svg

@@ -50,7 +50,7 @@ import {
     REPLACE_SHORTCUT_KEYS,
 } from '../CodeEditor.constants'
 import { getShowReplaceField, setShowReplaceField } from '../Commands'
-import { FindReplaceProps, FindReplaceQuery, FindReplaceToggleButtonProps } from '../types'
+import { CodeEditorProps, FindReplaceProps, FindReplaceQuery, FindReplaceToggleButtonProps } from '../types'
 import { getFindReplaceToggleButtonIconClass, getUpdatedSearchMatchesCount } from '../utils'
 
 const FindReplaceToggleButton = ({
@@ -85,7 +85,7 @@ const FindReplaceToggleButton = ({
     )
 }
 
-const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProps) => {
+const FindReplace = ({ view, defaultQuery, defaultShowReplace, onSearchBarAction }: FindReplaceProps) => {
     // STATES
     const [query, setQuery] = useState<SearchQuery>(new SearchQuery({ search: '' }))
     const [matchesCount, setMatchesCount] = useState({ count: 0, current: 1 })
@@ -103,6 +103,9 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
         search = query.search,
         wholeWord = query.wholeWord,
     }: FindReplaceQuery) => {
+        // Calling this irrespective of whether the query has changed or not
+        onSearchBarAction()
+
         const newQuery = new SearchQuery({
             caseSensitive,
             regexp,
@@ -120,6 +123,7 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
 
     useEffect(() => {
         if (!defaultQuery.eq(query)) {
+            onSearchBarAction()
             setMatchesCount(getUpdatedSearchMatchesCount(defaultQuery, view))
             setQuery(defaultQuery)
         }
@@ -144,13 +148,15 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
     const onNext = (e?: MouseEvent<HTMLButtonElement>) => {
         e?.preventDefault()
         e?.stopPropagation()
+        onSearchBarAction()
         findNext(view)
         setMatchesCount(getUpdatedSearchMatchesCount(query, view))
     }
 
     const onPrevious = (e?: MouseEvent<HTMLButtonElement>) => {
         e?.preventDefault()
         e?.stopPropagation()
+        onSearchBarAction()
         findPrevious(view)
         setMatchesCount(getUpdatedSearchMatchesCount(query, view))
     }
@@ -179,6 +185,7 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
         e.stopPropagation()
         if (e.key === 'Enter') {
             e.preventDefault()
+            onSearchBarAction()
             replaceNext(view)
         }
     }
@@ -188,10 +195,12 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
     }
 
     const onReplaceTextClick = () => {
+        onSearchBarAction()
         replaceNext(view)
     }
 
     const onReplaceTextAllClick = () => {
+        onSearchBarAction()
         replaceAll(view)
     }
 
@@ -431,62 +440,65 @@ const FindReplace = ({ view, defaultQuery, defaultShowReplace }: FindReplaceProp
     )
 }
 
-export const codeEditorFindReplace = (view: EditorView): Panel => {
-    const dom = document.createElement('div')
+export const getCodeEditorFindReplace =
+    (onSearchBarAction: CodeEditorProps['onSearchBarAction']) =>
+    (view: EditorView): Panel => {
+        const dom = document.createElement('div')
 
-    const keydown = (e: KeyboardEvent) => {
-        if (runScopeHandlers(view, e, 'search-panel')) {
-            e.preventDefault()
-            e.stopPropagation()
+        const keydown = (e: KeyboardEvent) => {
+            if (runScopeHandlers(view, e, 'search-panel')) {
+                e.preventDefault()
+                e.stopPropagation()
+            }
         }
-    }
 
-    dom.className =
-        'code-editor__search mt-8 mb-4 mr-8 ml-auto p-5 bg__secondary dc__border br-4 dc__w-fit-content fs-14'
-    dom.onkeydown = keydown
-
-    const renderFindReplace = () => {
-        render(
-            <FindReplace
-                view={view}
-                defaultQuery={getSearchQuery(view.state)}
-                defaultShowReplace={getShowReplaceField(view.state)}
-            />,
-            dom,
-        )
-    }
+        dom.className =
+            'code-editor__search mt-8 mb-4 mr-8 ml-auto p-5 bg__secondary dc__border br-4 dc__w-fit-content fs-14'
+        dom.onkeydown = keydown
+
+        const renderFindReplace = () => {
+            render(
+                <FindReplace
+                    view={view}
+                    defaultQuery={getSearchQuery(view.state)}
+                    defaultShowReplace={getShowReplaceField(view.state)}
+                    onSearchBarAction={onSearchBarAction}
+                />,
+                dom,
+            )
+        }
 
-    const mount = () => {
-        requestAnimationFrame(() => {
-            const findField = document.querySelector('[data-code-editor-find]') as HTMLInputElement
-            findField?.focus()
-            findField?.select()
-        })
-    }
+        const mount = () => {
+            requestAnimationFrame(() => {
+                const findField = document.querySelector('[data-code-editor-find]') as HTMLInputElement
+                findField?.focus()
+                findField?.select()
+            })
+        }
 
-    const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {
-        transactions.forEach((tr) => {
-            tr.effects.forEach((effect) => {
-                if (effect.is(setSearchQuery)) {
-                    renderFindReplace()
-                }
-                if (effect.is(setShowReplaceField)) {
-                    renderFindReplace()
-                }
+        const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {
+            transactions.forEach((tr) => {
+                tr.effects.forEach((effect) => {
+                    if (effect.is(setSearchQuery)) {
+                        renderFindReplace()
+                    }
+                    if (effect.is(setShowReplaceField)) {
+                        renderFindReplace()
+                    }
+                })
             })
-        })
 
-        if (docChanged || state.readOnly !== startState.readOnly) {
-            renderFindReplace()
+            if (docChanged || state.readOnly !== startState.readOnly) {
+                renderFindReplace()
+            }
         }
-    }
 
-    renderFindReplace()
+        renderFindReplace()
 
-    return {
-        top: true,
-        dom,
-        mount,
-        update,
+        return {
+            top: true,
+            dom,
+            mount,
+            update,
+        }
     }
-}

src/Shared/Components/CodeEditor/CodeEditor.tsx

@@ -84,6 +84,11 @@ export type CodeEditorProps<DiffView extends boolean = false> = {
     disableSearch?: boolean
     diffView?: DiffView
     theme?: AppThemeType
+    onSearchPanelOpen?: () => void
+    /**
+     * This method is triggered when user types something in the search/replace bar or applies a search or replace action.
+     */
+    onSearchBarAction?: () => void
 } & CodeEditorPropsBasedOnDiffView<DiffView>
 
 export interface GetCodeEditorHeightReturnType {
@@ -102,7 +107,7 @@ export type FindReplaceQuery = Partial<
     Pick<SearchQuery, 'search' | 'wholeWord' | 'regexp' | 'replace' | 'caseSensitive'>
 >
 
-export interface FindReplaceProps {
+export interface FindReplaceProps extends Pick<CodeEditorProps, 'onSearchBarAction'> {
     view: EditorView
     /** Default value for Search Query state. */
     defaultQuery: SearchQuery

src/Shared/Components/CodeEditor/Extensions/findAndReplace.tsx

@@ -25,6 +25,7 @@ import { Backdrop } from '../Backdrop'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Confetti } from '../Confetti'
 import { CustomInput } from '../CustomInput'
+import { Icon } from '../Icon'
 import { useConfirmationModalContext } from './ConfirmationModalContext'
 import { ConfirmationModalBodyProps, ConfirmationModalProps, ConfirmationModalVariantType } from './types'
 import { getConfirmationLabel, getIconFromVariant, getPrimaryButtonStyleFromVariant } from './utils'
@@ -34,7 +35,7 @@ import './confirmationModal.scss'
 const ConfirmationModalBody = ({
     title,
     subtitle,
-    Icon,
+    Icon: ButtonIcon,
     variant,
     buttonConfig,
     confirmationConfig,
@@ -53,8 +54,8 @@ const ConfirmationModalBody = ({
 
     const { primaryButtonConfig, secondaryButtonConfig } = buttonConfig
 
-    const RenderIcon = Icon ?? getIconFromVariant(variant)
-    const hideIcon = variant === ConfirmationModalVariantType.custom && !Icon
+    const RenderIcon = ButtonIcon ?? getIconFromVariant(variant)
+    const hideIcon = variant === ConfirmationModalVariantType.custom && !ButtonIcon
 
     const disablePrimaryButton: boolean =
         ('disabled' in primaryButtonConfig && primaryButtonConfig.disabled) ||
@@ -159,7 +160,7 @@ const ConfirmationModalBody = ({
                             text={primaryButtonConfig.text}
                             onClick={primaryButtonConfig.onClick as ButtonHTMLAttributes<HTMLButtonElement>['onClick']}
                             startIcon={primaryButtonConfig.startIcon}
-                            endIcon={primaryButtonConfig.endIcon}
+                            endIcon={primaryButtonConfig.endIcon || <Icon name="ic-key-enter" color={null} />}
                         />
                     )}
                 </div>

src/Shared/Components/CodeEditor/types.ts

@@ -98,6 +98,7 @@ import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK3s } from '@IconsV2/ic-k3s.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
 import { ReactComponent as ICKey } from '@IconsV2/ic-key.svg'
+import { ReactComponent as ICKeyEnter } from '@IconsV2/ic-key-enter.svg'
 import { ReactComponent as ICKind } from '@IconsV2/ic-kind.svg'
 import { ReactComponent as ICLaptop } from '@IconsV2/ic-laptop.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
@@ -260,6 +261,7 @@ export const iconMap = {
     'ic-job-color': ICJobColor,
     'ic-k3s': ICK3s,
     'ic-k8s-job': ICK8sJob,
+    'ic-key-enter': ICKeyEnter,
     'ic-key': ICKey,
     'ic-kind': ICKind,
     'ic-laptop': ICLaptop,

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -19,6 +19,7 @@ import { ReactElement, useEffect, useRef, useState } from 'react'
 import { PromptProps } from 'react-router-dom'
 import { StrictRJSFSchema } from '@rjsf/utils'
 import Tippy from '@tippyjs/react'
+import { animate } from 'framer-motion'
 import moment from 'moment'
 import { nanoid } from 'nanoid'
 import { Pair } from 'yaml'
@@ -52,7 +53,7 @@ import {
 } from '../Common'
 import { getAggregator } from '../Pages'
 import { AggregatedNodes, PodMetadatum } from './Components'
-import { UNSAVED_CHANGES_PROMPT_MESSAGE } from './constants'
+import { CUBIC_BEZIER_CURVE, UNSAVED_CHANGES_PROMPT_MESSAGE } from './constants'
 import {
     AggregationKeys,
     BorderConfigType,
@@ -700,3 +701,16 @@ export const getAppDetailsURL = (appId: number | string, envId?: number | string
     }
     return baseURL
 }
+
+export const smoothScrollToTop = (scrollContainer: HTMLElement, targetPosition: number) => {
+    const start = scrollContainer.scrollTop
+
+    const controls = animate(start, targetPosition, {
+        ease: CUBIC_BEZIER_CURVE,
+        onUpdate: (value) => {
+            scrollContainer.scrollTop = value
+        },
+    })
+
+    return controls
+}

src/Shared/Components/Icon/Icon.tsx

@@ -580,3 +580,4 @@ export const DEPLOYMENT_STAGE_TO_NODE_MAP: Readonly<Record<DeploymentStageType,
 
 export const APP_DETAILS_FALLBACK_POLLING_INTERVAL = 30000
 export const PROGRESSING_DEPLOYMENT_STATUS_POLLING_INTERVAL = 10000
+export const CUBIC_BEZIER_CURVE: [number, number, number, number] = [0.33, 1, 0.68, 1]