From 1b2bac1644cc11513cb760815a4e79a17677c217 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Sun, 29 Sep 2024 04:10:21 +0300
Subject: [PATCH] refactor: replace multiple view components with one view +
 css modifications

---
 components/header-bar/src/apps.js | 691 +++++++++++++-----------------
 1 file changed, 307 insertions(+), 384 deletions(-)

diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js
index 95fd4ab99..72db8e9f3 100755
--- a/components/header-bar/src/apps.js
+++ b/components/header-bar/src/apps.js
@@ -8,12 +8,11 @@ import {
     IconArrowLeft16,
 } from '@dhis2/ui-icons'
 import { Button } from '@dhis2-ui/button'
-import { Card } from '@dhis2-ui/card'
 import { InputField } from '@dhis2-ui/input'
 import { MenuItem } from '@dhis2-ui/menu'
 import { Modal, ModalContent } from '@dhis2-ui/modal'
 import PropTypes from 'prop-types'
-import React, { useState, useCallback, useRef } from 'react'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
 import { joinPath } from './join-path.js'
 import i18n from './locales/index.js'
 
@@ -35,18 +34,16 @@ function Search({ value, onChange }) {
                     placeholder={i18n.t('Search apps, shortcuts, commands')}
                     onChange={onChange}
                     initialFocus
+                    // style={{
+                    //     width: '100%',
+                    //     border: 'none',
+                    // }}
                 />
             </span>
             <style jsx>{`
-                // div {
-                //     display: flex;
-                //     flex-direction: row;
-                //     flex-wrap: nowrap;
-                //     height: 52px;
-                // }
-
-                // span {
-                //     flex: 1 100%;
+                // span > #filter{
+                //     // width: '100%';
+                //     border: 'none';
                 // }
             `}</style>
         </div>
@@ -58,7 +55,7 @@ Search.propTypes = {
     onChange: PropTypes.func.isRequired,
 }
 
-function Item({ name, path, img }) {
+function AppItem({ name, path, img }) {
     return (
         <a href={path}>
             <img src={img} alt="app logo" />
@@ -67,14 +64,11 @@ function Item({ name, path, img }) {
 
             <style jsx>{`
                 a {
-                    display: inline-block;
-                    // display: flex;
-                    // flex-direction: column;
-                    // align-items: center;
-                    // justify-content: center;
-                    // width: 96px;
-                    // margin: 5px;
-                    // border-radius: 12px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    width: minmax(100px, auto);
+                    padding: 0.8em;
                     text-decoration: none;
                     cursor: pointer;
                 }
@@ -93,14 +87,14 @@ function Item({ name, path, img }) {
                 img {
                     width: 48px;
                     height: 48px;
-                    // margin: 8px;
+                    margin: 0.35em;
                     cursor: pointer;
                     align-items: center;
                 }
 
                 div {
                     overflow-wrap: anywhere;
-                    margin-top: 14px;
+                    margin-top: 0.35em;
                     color: rgba(0, 0, 0, 0.87);
                     font-size: 12px;
                     letter-spacing: 0.01em;
@@ -113,32 +107,31 @@ function Item({ name, path, img }) {
     )
 }
 
-Item.propTypes = {
+AppItem.propTypes = {
     img: PropTypes.string,
     name: PropTypes.string,
     path: PropTypes.string,
 }
 
-function AppItem({ name, path, image, description }) {
+function ListItem({ name, path, image, description }) {
     return (
         <a href={path}>
-            <img src={image} />
-            <div>
-                <div>{name}</div>
-                <div>{description}</div>
-            </div>
+            <img src={image} alt="logo" />
+            <div className="name">{name}</div>
+            {description && <div className="description">{description}</div>}
             <style jsx>{`
                     a {
-                            display: flex;
-                            flex-direction: row;
                             width: 100%;
-                            // margin: 8px;
-                            // border-radius: 12px;
+                            display:grid;
+                            grid-template-columns: 7% 90%;
+                            grid-auto-rows: 30px;
+                            grid-gap: 0.05em;
                             text-decoration: none;
                             cursor: pointer;
-                            padding-bottom: 0.2em;
-                            font-size: 90%
+                            margin-bottom: 0.3em;
+                            font-size: 100%
                             font-weight: 500;
+                            padding: 0.3em;
                     }
     
                     a:hover,
@@ -153,296 +146,212 @@ function AppItem({ name, path, image, description }) {
                     }
     
                     img {
-                        width: 28px;
-                        height: 28px;
-                        // margin: 8px;
+                        width: 20px;
+                        height: 20px;
                         cursor: pointer;
+                        align-self: stretch
                     }
     
                     div {
                         overflow-wrap: anywhere;
-                        margin-top: 4px;
                         color: rgba(0, 0, 0, 0.87);
-                        font-size: 12px;
+                        font-size: 13px;
                         letter-spacing: 0.01em;
                         line-height: 14px;
-                        // text-align: center;
                         cursor: pointer;
                     }
+
+                    .name {
+                        align-self: start;
+                    }
+                    .description {
+                        grid-column: 2
+                    }
                 `}</style>
         </a>
     )
 }
 
-AppItem.propTypes = {
+ListItem.propTypes = {
     description: PropTypes.string,
     image: PropTypes.string,
     name: PropTypes.string,
     path: PropTypes.string,
 }
 
-function BackToHomeButton({ setView }) {
-    const handleClick = () => {
-        setView('home')
-    }
-    return (
-        <Button
-            aria-label="Back Button"
-            icon={<IconArrowLeft16 />}
-            name="Back"
-            onClick={handleClick}
-            title="Back Button"
-            value="back"
-            style={{
-                width: '100%',
-                border: 'none',
-                justifyContent: 'flex-start',
-            }}
-        />
-    )
-}
-
-BackToHomeButton.propTypes = {
-    setView: PropTypes.func,
-}
-
-const CommandPalette = ({ apps, commands }) => {
-    const [show, setShow] = useState(false)
-    const [filter, setFilter] = useState('')
-
-    const handleVisibilityToggle = useCallback(() => setShow(!show), [show])
-    const handleFilterChange = useCallback(({ value }) => setFilter(value), [])
-
-    const containerEl = useRef(null)
-    // const onDocClick = useCallback((evt) => {
-    //     if (containerEl.current && !containerEl.current.contains(evt.target)) {
-    //         // setShow(false)
-    //     }
-    // }, [])
-    // useEffect(() => {
-    //     document.addEventListener('click', onDocClick)
-    //     return () => document.removeEventListener('click', onDocClick)
-    // }, [onDocClick])
-
-    console.log(containerEl, 'containerEl')
-
+function List({ filteredItems }) {
     return (
-        <div ref={containerEl} data-test="headerbar-apps">
-            <button
-                onClick={handleVisibilityToggle}
-                data-test="headerbar-apps-icon"
-            >
-                <IconApps24 color={colors.white} />
-            </button>
-
-            {show ? (
-                <MenuModal
-                    show={show}
-                    apps={apps}
-                    commands={commands}
-                    filter={filter}
-                    onFilterChange={handleFilterChange}
-                />
-            ) : null}
+        <div data-test="headerbar-apps-menu-list">
+            {filteredItems.map(
+                (
+                    { displayName, name, defaultAction, icon, description },
+                    idx
+                ) => (
+                    <ListItem
+                        key={`app-${name}-${idx}`}
+                        name={displayName || name}
+                        path={defaultAction}
+                        img={icon}
+                        description={description}
+                    />
+                )
+            )}
 
             <style jsx>{`
-                button {
-                    display: block;
-                    background: transparent;
-                    padding-block-start: ${spacers.dp4};
-                    padding-block-end: 0;
-                    padding-inline: ${spacers.dp12};
-                    border: 0;
-                    cursor: pointer;
-                    height: 100%;
-                }
-                button:focus {
-                    outline: 2px solid white;
-                    outline-offset: -2px;
-                }
-                button:focus:not(:focus-visible) {
-                    outline: none;
-                }
-                button:hover {
-                    background: #1a557f;
-                }
-                button:active {
-                    background: #104067;
-                }
-
                 div {
-                    position: relative;
-                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    // min-width: 300px;
+                    // max-width: 560px;
+
+                    // min-height: 200px;
+                    // max-height: 465px;
+
+                    overflow: auto;
+                    overflow-x: hidden;
                 }
             `}</style>
         </div>
     )
 }
-
-CommandPalette.propTypes = {
-    apps: PropTypes.array,
-    commands: PropTypes.array,
+List.propTypes = {
+    filteredItems: PropTypes.array,
 }
 
-export const MenuModal = ({ show, apps, commands, filter, onFilterChange }) => {
-    console.log(apps, 'apps')
-    const [currentView, setCurrentView] = useState('home')
-    const showActions = filter.length <= 0 && currentView === 'home'
-
-    return (
-        <div style={{ backgroundColor: 'green', width: '50%' }}>
-            {show && (
-                <Modal hide={!show}>
-                    <ModalContent style={{}}>
-                        <div data-test="headerbar-apps-menu">
-                            <Card>
-                                <Search
-                                    value={filter}
-                                    onChange={onFilterChange}
-                                />
-                                <ViewSwitcher
-                                    apps={apps}
-                                    filter={filter}
-                                    view={currentView}
-                                    setView={setCurrentView}
-                                    commands={commands}
-                                />
-                                {showActions ? (
-                                    <Actions setView={setCurrentView} />
-                                ) : null}
-                            </Card>
-                        </div>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    )
-}
+function Actions({ setView }) {
+    const actions = [
+        {
+            icon: IconApps16,
+            type: 'apps',
+            action: 'Browse apps',
+        },
+        {
+            icon: IconTerminalWindow16,
+            type: 'commands',
+            action: 'Browse commands',
+        },
+    ]
 
-MenuModal.propTypes = {
-    apps: PropTypes.array,
-    commands: PropTypes.array,
-    filter: PropTypes.string,
-    show: PropTypes.bool,
-    onFilterChange: PropTypes.func,
-}
+    const { baseUrl } = useConfig()
 
-function ViewSwitcher({ apps, commands, filter, view, setView }) {
-    switch (view) {
-        case 'apps':
-            return <AllAppsView apps={apps} filter={filter} setView={setView} />
-        case 'commands':
-            return (
-                <CommandsView
-                    commands={commands}
-                    filter={filter}
-                    setView={setView}
+    return (
+        <>
+            <h5 style={{ color: colors.grey600 }}>{i18n.t('Actions')}</h5>
+            {actions.map((action, index) => (
+                <MenuItem
+                    key={`${index}-${action.type}`}
+                    onClick={(payload, event) => {
+                        console.log(payload.value, event.target)
+                        setView(action.type)
+                    }}
+                    label={i18n.t(`${action.action}`)}
+                    value={action.action}
+                    icon={<action.icon color={colors.grey700} />}
                 />
-            )
-        case 'home':
-        default:
-            return <HomeView apps={apps} filter={filter} />
-    }
+            ))}
+            {/* got from profile-menu: https://github.com/dhis2/ui/blob/4902126ef0a6163961286a29f8df44b8fd3a0604/components/header-bar/src/profile-menu/profile-menu.js#L88 */}
+            <MenuItem
+                href={joinPath(
+                    baseUrl,
+                    'dhis-web-commons-security/logout.action'
+                )}
+                // NB: By MenuItem implementation, this callback
+                // overwrites default navigation behavior but maintains
+                // the href attribute
+                onClick={async () => {
+                    // setLoading(true)
+                    await clearSensitiveCaches()
+                    // setLoading(false)
+                    window.location.assign(
+                        joinPath(
+                            baseUrl,
+                            'dhis-web-commons-security/logout.action'
+                        )
+                    )
+                }}
+                label={i18n.t('Logout')}
+                value="logout"
+                icon={<IconLogOut16 color={colors.grey700} />}
+            />
+        </>
+    )
 }
 
-ViewSwitcher.propTypes = {
-    apps: PropTypes.array,
-    commands: PropTypes.array,
-    filter: PropTypes.string,
+Actions.propTypes = {
     setView: PropTypes.func,
-    view: PropTypes.string,
 }
 
-function AllAppsView({ apps, filter, setView }) {
-    const filteredApps = apps.filter(({ displayName, name }) => {
-        const appName = displayName || name
-        const formattedAppName = appName.toLowerCase()
-        const formattedFilter = escapeRegExpCharacters(filter).toLowerCase()
-
-        return filter.length > 0
-            ? formattedAppName.match(formattedFilter)
-            : true
-    })
-
+function SearchResults({ filter, filteredItems, heading }) {
     return (
-        <>
-            <BackToHomeButton setView={setView} />
-            <div>
-                {filter ? (
-                    filteredApps.length > 0 ? (
-                        <p style={{ color: colors.grey600 }}>
-                            Results for {filter}
-                        </p>
-                    ) : (
-                        <p style={{ color: colors.grey600 }}>
-                            Nothing found for {filter}
-                        </p>
-                    )
+        <div>
+            {filter ? (
+                filteredItems.length > 0 ? (
+                    <p style={{ color: colors.grey600 }}>
+                        Results for {filter}
+                    </p>
                 ) : (
-                    <h5 style={{ color: colors.grey600 }}>
-                        {i18n.t('All Apps')}
-                    </h5>
-                )}
-            </div>
-            <List apps={apps} filter={filter} />
-        </>
+                    <p style={{ color: colors.grey600 }}>
+                        Nothing found for {filter}
+                    </p>
+                )
+            ) : (
+                <h5 style={{ color: colors.grey600 }}>
+                    {i18n.t(`${heading}`)}
+                </h5>
+            )}
+        </div>
     )
 }
 
-AllAppsView.propTypes = {
-    apps: PropTypes.array,
+SearchResults.propTypes = {
     filter: PropTypes.string,
-    setView: PropTypes.func,
+    filteredItems: PropTypes.array,
+    heading: PropTypes.string,
 }
 
-function CommandsView({ commands, filter, setView }) {
-    const filteredCommands = commands.filter(({ displayName, name }) => {
-        const commandName = displayName || name
-        const formattedAppName = commandName.toLowerCase()
+function ActionsView({ heading, itemsArray, filter, setView }) {
+    const filteredItems = itemsArray.filter(({ displayName, name }) => {
+        const itemName = displayName || name
+        const formattedItemName = itemName.toLowerCase()
         const formattedFilter = escapeRegExpCharacters(filter).toLowerCase()
 
         return filter.length > 0
-            ? formattedAppName.match(formattedFilter)
+            ? formattedItemName.match(formattedFilter)
             : true
     })
 
+    const handleClick = () => {
+        setView('home')
+    }
     return (
         <>
-            <BackToHomeButton setView={setView} />
-            <div>
-                {filter ? (
-                    filteredCommands.length > 0 ? (
-                        <span>Results for {filter}</span>
-                    ) : (
-                        <span>Nothing found for {filter}</span>
-                    )
-                ) : (
-                    <h5 style={{ color: colors.grey600 }}>
-                        {i18n.t('All Commands')}
-                    </h5>
-                )}
-            </div>
-            {filteredCommands.map(
-                (
-                    { displayName, name, defaultAction, icon, description },
-                    idx
-                ) => (
-                    <AppItem
-                        key={`app-${name}-${idx}`}
-                        name={displayName || name}
-                        path={defaultAction}
-                        img={icon}
-                        description={description}
-                    />
-                )
-            )}
+            <Button
+                aria-label="Back Button"
+                icon={<IconArrowLeft16 />}
+                name="Back"
+                onClick={handleClick}
+                title="Back Button"
+                value="back"
+                style={{
+                    width: '100%',
+                    border: 'none',
+                    justifyContent: 'flex-start',
+                }}
+            />
+            <SearchResults
+                filter={filter}
+                filteredItems={filteredItems}
+                heading={heading}
+            />
+            <List filteredItems={filteredItems} />
         </>
     )
 }
 
-CommandsView.propTypes = {
-    commands: PropTypes.array,
+ActionsView.propTypes = {
     filter: PropTypes.string,
+    heading: PropTypes.string,
+    itemsArray: PropTypes.array,
     setView: PropTypes.func,
 }
 
@@ -458,15 +367,13 @@ function HomeView({ apps, filter }) {
     })
     return (
         <>
-            {filter ? (
-                filteredApps.length > 0 ? (
-                    <span>Results for {filter}</span>
-                ) : (
-                    <span>Nothing found for {filter}</span>
-                )
-            ) : (
-                <h5 style={{ color: colors.grey600 }}>{i18n.t('Top Apps')}</h5>
-            )}
+            <div>
+                <SearchResults
+                    filter={filter}
+                    filteredItems={filteredApps}
+                    heading={'Top Apps'}
+                />
+            </div>
             <div data-test="headerbar-apps-menu-list">
                 {filteredApps.length > 0 &&
                     filteredApps
@@ -476,7 +383,7 @@ function HomeView({ apps, filter }) {
                                 { displayName, name, defaultAction, icon },
                                 idx
                             ) => (
-                                <Item
+                                <AppItem
                                     key={`app-${name}-${idx}`}
                                     name={displayName || name}
                                     path={defaultAction}
@@ -490,14 +397,14 @@ function HomeView({ apps, filter }) {
                         display: grid;
                         grid-template-columns: repeat(4, 1fr);
                         grid-template-rows: repeat(2, auto);
-                        gap: 3px;
-                        align-items: center;
+                        grid-gap: 1em;
+                        align-items: stretch;
 
-                        min-height: 200px;
-                        max-height: 465px;
-                        margin-block-start: 0;
-                        margin-block-end: 8px;
-                        margin-inline: 8px;
+                        // min-height: 200px;
+                        // max-height: 465px;
+                        // margin-block-start: 0;
+                        // margin-block-end: 8px;
+                        // margin-inline: 8px;
 
                         overflow: auto;
                         overflow-x: hidden;
@@ -506,7 +413,7 @@ function HomeView({ apps, filter }) {
                     @media (max-width: 768px) {
                         div {
                             grid-template-columns: repeat(2, 1fr);
-                            grid-template-rows: repeat(4, auto); /* 4 rows */
+                            grid-template-rows: repeat(4, auto);
                         }
                     }
                 `}</style>
@@ -520,119 +427,135 @@ HomeView.propTypes = {
     filter: PropTypes.string,
 }
 
-function List({ apps, filter }) {
-    return (
-        <div data-test="headerbar-apps-menu-list">
-            {apps
-                .filter(({ displayName, name }) => {
-                    const appName = displayName || name
-                    const formattedAppName = appName.toLowerCase()
-                    const formattedFilter =
-                        escapeRegExpCharacters(filter).toLowerCase()
-
-                    return filter.length > 0
-                        ? formattedAppName.match(formattedFilter)
-                        : true
-                })
-                .map(({ displayName, name, defaultAction, icon }, idx) => (
-                    <AppItem
-                        key={`app-${name}-${idx}`}
-                        name={displayName || name}
-                        path={defaultAction}
-                        img={icon}
-                    />
-                ))}
-
-            <style jsx>{`
-                div {
-                    display: flex;
-                    flex-direction: column;
-                    // flex-wrap: wrap;
-                    align-content: flex-start;
-                    align-items: flex-start;
-                    justify-content: flex-start;
-                    // width: 30vw;
-                    min-width: 300px;
-                    max-width: 560px;
-
-                    min-height: 200px;
-                    max-height: 465px;
-                    margin-block-start: 0;
-                    margin-block-end: 8px;
-                    margin-inline: 8px;
-
-                    overflow: auto;
-                    overflow-x: hidden;
-                }
-            `}</style>
-        </div>
-    )
+function ViewSwitcher({ apps, commands, filter, view, setView }) {
+    switch (view) {
+        case 'apps':
+            return (
+                <ActionsView
+                    heading={'All Apps'}
+                    itemsArray={apps}
+                    filter={filter}
+                    setView={setView}
+                />
+            )
+        case 'commands':
+            return (
+                <ActionsView
+                    heading={'All commands'}
+                    itemsArray={commands}
+                    filter={filter}
+                    setView={setView}
+                />
+            )
+        case 'home':
+        default:
+            return <HomeView apps={apps} filter={filter} />
+    }
 }
-List.propTypes = {
+
+ViewSwitcher.propTypes = {
     apps: PropTypes.array,
+    commands: PropTypes.array,
     filter: PropTypes.string,
+    setView: PropTypes.func,
+    view: PropTypes.string,
 }
 
-function Actions({ setView }) {
-    const actions = [
-        {
-            icon: IconApps16,
-            type: 'apps',
-            action: 'Browse apps',
-        },
-        {
-            icon: IconTerminalWindow16,
-            type: 'commands',
-            action: 'Browse commands',
-        },
-    ]
+const CommandPalette = ({ apps, commands }) => {
+    const [show, setShow] = useState(false)
+    const [filter, setFilter] = useState('')
 
-    const { baseUrl } = useConfig()
+    const [currentView, setCurrentView] = useState('home')
+    const showActions = filter.length <= 0 && currentView === 'home'
+
+    const handleVisibilityToggle = useCallback(() => setShow(!show), [show])
+    const handleFilterChange = useCallback(({ value }) => setFilter(value), [])
+
+    const containerEl = useRef(null)
+    const onDocClick = useCallback((evt) => {
+        if (containerEl.current && !containerEl.current.contains(evt.target)) {
+            // setShow(false)
+        }
+    }, [])
+    useEffect(() => {
+        document.addEventListener('click', onDocClick)
+        return () => document.removeEventListener('click', onDocClick)
+    }, [onDocClick])
+
+    // QN: what should trigger the closing now?
+    // Case: user can check out different views in the modal so clicking on it should not necessarily close it as before.
+    // If a link is clicked, then it does not matter. The user will be redirected to another page
+    // pending/to do: keyboard navigation
 
     return (
-        <>
-            <h5 style={{ color: colors.grey600 }}>{i18n.t('Actions')}</h5>
-            {actions.map((action, index) => (
-                <MenuItem
-                    key={`${index}-${action.type}`}
-                    onClick={(payload, event) => {
-                        console.log(payload.value, event.target)
-                        setView(action.type)
-                    }}
-                    label={i18n.t(`${action.action}`)}
-                    value={action.action}
-                    icon={<action.icon color={colors.grey700} />}
-                />
-            ))}
-            <MenuItem
-                href={joinPath(
-                    baseUrl,
-                    'dhis-web-commons-security/logout.action'
-                )}
-                // NB: By MenuItem implementation, this callback
-                // overwrites default navigation behavior but maintains
-                // the href attribute
-                onClick={async () => {
-                    // setLoading(true)
-                    await clearSensitiveCaches()
-                    // setLoading(false)
-                    window.location.assign(
-                        joinPath(
-                            baseUrl,
-                            'dhis-web-commons-security/logout.action'
-                        )
-                    )
-                }}
-                label={i18n.t('Logout')}
-                value="logout"
-                icon={<IconLogOut16 color={colors.grey700} />}
-            />
-        </>
+        <div ref={containerEl} data-test="headerbar-apps">
+            <button
+                onClick={handleVisibilityToggle}
+                data-test="headerbar-apps-icon"
+            >
+                <IconApps24 color={colors.white} />
+            </button>
+
+            {show ? (
+                <Modal hide={!show}>
+                    <ModalContent>
+                        <div data-test="headerbar-apps-menu">
+                            <Search
+                                value={filter}
+                                onChange={handleFilterChange}
+                            />
+                            <ViewSwitcher
+                                apps={apps}
+                                filter={filter}
+                                view={currentView}
+                                setView={setCurrentView}
+                                commands={commands}
+                            />
+                            {showActions ? (
+                                <Actions setView={setCurrentView} />
+                            ) : null}
+                        </div>
+                    </ModalContent>
+                </Modal>
+            ) : null}
+
+            <style jsx>{`
+                button {
+                    display: block;
+                    background: transparent;
+                    padding-block-start: ${spacers.dp4};
+                    padding-block-end: 0;
+                    padding-inline: ${spacers.dp12};
+                    border: 0;
+                    cursor: pointer;
+                    height: 100%;
+                }
+                button:focus {
+                    outline: 2px solid white;
+                    outline-offset: -2px;
+                }
+                button:focus:not(:focus-visible) {
+                    outline: none;
+                }
+                button:hover {
+                    background: #1a557f;
+                }
+                button:active {
+                    background: #104067;
+                }
+
+                div {
+                    position: relative;
+                    height: 100%;
+                }
+            `}</style>
+        </div>
     )
 }
 
-Actions.propTypes = {
-    setView: PropTypes.func,
+CommandPalette.propTypes = {
+    apps: PropTypes.array,
+    commands: PropTypes.array,
 }
 
 export default CommandPalette