Merge pull request #2881 from devtron-labs/feat/command-bar

feat: command bar

Author: AbhishekA1509

.eslintignore

@@ -4,6 +4,7 @@
 *.test.tsx
 .eslintrc.js
 vite.config.mts
+scripts/
 
 # The following files have eslint errors/warnings
 src/Pages/GlobalConfigurations/Authorization/APITokens/__tests__/ApiTokens.test.tsx
@@ -101,10 +102,7 @@ src/components/app/details/testViewer/TestRunDetails.tsx
 src/components/app/details/testViewer/TestRunList.tsx
 src/components/app/details/triggerView/EmptyStateCIMaterial.tsx
 src/components/app/details/triggerView/MaterialSource.tsx
-src/components/app/details/triggerView/TriggerView.tsx
 src/components/app/details/triggerView/__tests__/triggerview.test.tsx
-src/components/app/details/triggerView/cdMaterial.tsx
-src/components/app/details/triggerView/ciMaterial.tsx
 src/components/app/details/triggerView/ciWebhook.service.ts
 src/components/app/details/triggerView/config.ts
 src/components/app/details/triggerView/workflow.service.ts

.gitignore

@@ -52,3 +52,6 @@ yalc.lock
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+.env.secrets
+scripts/

index.css

@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap');
 
 /*
  * Although this is duplicated but this would help us with consistent loader in case

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.19.0",
+        "@devtron-labs/devtron-fe-common-lib": "1.19.0-pre-6",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -19,7 +19,6 @@
         "dayjs": "^1.11.8",
         "dompurify": "^3.2.4",
         "fast-json-patch": "^3.1.1",
-        "flexsearch": "^0.6.32",
         "jsonpath-plus": "^10.3.0",
         "moment": "^2.29.4",
         "query-string": "^7.1.1",
@@ -49,6 +48,7 @@
         "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
         "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "start": "vite --open",
+        "dev": "node scripts/secrets-mgr.js",
         "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build",
         "serve": "vite preview",
         "build-light": "NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=false vite build",

src/Pages/ChartStore/ChartDetails/ChartDetailsAbout.tsx

@@ -134,16 +134,18 @@ export const ChartDetailsAbout = ({ chartDetails, isLoading }: ChartDetailsAbout
     return (
         <div className="flexbox-col dc__gap-20 mw-none">
             <div className="flexbox-col dc__gap-12">
-                <ImageWithFallback
-                    imageProps={{
-                        src: icon,
-                        alt: 'chart-icon',
-                        className: 'br-6',
-                        height: 48,
-                        width: 48,
-                    }}
-                    fallbackImage={<Icon name="ic-helm" color="N700" size={48} />}
-                />
+                <div className="h-48 dc__mxw-200">
+                    <ImageWithFallback
+                        imageProps={{
+                            src: icon,
+                            alt: 'chart-icon',
+                            className: 'br-6',
+                            height: '100%',
+                            width: 'auto',
+                        }}
+                        fallbackImage={<Icon name="ic-helm" color="N700" size={48} />}
+                    />
+                </div>
                 <h2 className="m-0 fs-16 lh-24 fw-6 cn-9">{name}</h2>
                 <p className="m-0 fs-13 lh-20 cn-9">{description}</p>
             </div>

src/Pages/Shared/CommandBar/CommandBar.component.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+
+import { useRegisterShortcut, UseRegisterShortcutProvider } from '@devtron-labs/devtron-fe-common-lib'
+
+import CommandBarBackdrop from './CommandBarBackdrop'
+import { SHORT_CUTS } from './constants'
+
+import './CommandBar.scss'
+
+const CommandBar = () => {
+    const [showCommandBar, setShowCommandBar] = useState(false)
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    const handleOpen = () => {
+        setShowCommandBar(true)
+    }
+
+    const handleClose = () => {
+        setShowCommandBar(false)
+    }
+
+    useEffect(() => {
+        const { keys } = SHORT_CUTS.OPEN_COMMAND_BAR
+
+        registerShortcut({
+            keys,
+            description: SHORT_CUTS.OPEN_COMMAND_BAR.description,
+            callback: handleOpen,
+        })
+
+        return () => {
+            unregisterShortcut(keys)
+        }
+    }, [])
+
+    if (!showCommandBar) {
+        return null
+    }
+
+    return (
+        <UseRegisterShortcutProvider ignoreTags={[]}>
+            <CommandBarBackdrop handleClose={handleClose} />
+        </UseRegisterShortcutProvider>
+    )
+}
+
+export default CommandBar

src/Pages/Shared/CommandBar/CommandBar.scss

@@ -0,0 +1,19 @@
+.command-bar {
+    &__container {
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 3px 17px 0 rgba(0, 0, 0, 0.04), 0 4px 30px 0 rgba(0, 0, 0, 0.13), 0 8px 48px 0 rgba(0, 0, 0, 0.15);
+
+        &--selected-item {
+            background: var(--bg-hover);
+        }
+
+        .search-bar {
+            &:focus-within {
+                border: none !important;
+            }
+
+            &:hover {
+                background: transparent !important;
+            }
+        }
+    }
+}