Spotlight

EVA Spotlight is a power user feature where you can initiate EVA suite intents from a convenient popup dialog. Modeled after Mac OS Spotlight feature. An action inside the Spotlight autocomplete are called shortcuts.

Shortcuts

Spotlight shortcuts are automatically discovered by looking for the eva-spotlight.json file inside a EVA Suite module. This file is generated at build time for each module. A Spotlight shortcut is a simple JSX element the module. For example:

<SpotlightShortcut  type="search"  nameI18nKey="spotlight.shortcut.search.discount.title"  descriptionI18nKey="spotlight.shortcut.search.discount.description"  intent={EIntentAction.searchDiscount}/>

Props

• type: 'open' | 'navigate' | 'update' | 'search'
  • Required
  • Used to identify the action of the shortcut.
    • navigate This will navigate to another module. Restores the current session there and links you to the correct place inside that module.
    • open This will open a certain type of data by ID. You have to provide the ID, and you jump to the module where that information is displayed.
    • search This will jump to a search page inside another module and allows you to provide a search query directly inside Spotlight
    • update Same as open but in this case brings you to the edit page of an certain type of data. Again by its ID.
• nameI18nKey: string
  • Required
  • The translation key for the name of this shortcut. It will look at the /assets/i18n folder for translation files (JSON)
• descriptionI18nKey: string
  • Optional
  • The translation key for the description of this shortcut. It will look at the /assets/i18n folder for translation files (JSON)
• intent: EIntentAction
  • Required
  • The EVA suite intent that needs to be used for this shortcut. This is an enum stored in eva-suite-uri-parser For more information about EVA Intents click here

Shortcut Prompt

This is the components that renders the actual popup dialog prompt that can find all the shortcuts added in our modules. Add this to your App component.

src/App.tsx

const App = () => {  ...
  // This hook contains the hot key business logic for Spotlight  //  const [isOpen, toggleIsOpen] = useSpotlightHotKey();
  return (    <>      <Header moduleName={EVA_MODULE_NAME} onLogoClick={toggleIsOpen} />      <Box display="flex" p={0}>        {currentUserType.isEmployee ? <SideNav /> : null}        <Routes />      </Box>      <ShortcutProvider>        <SpotlightShortcutPrompt          isOpen={isOpen}          toggleIsOpen={toggleIsOpen}          noOptionsText={intl.formatMessage({ id: 'spotlight.shortcut.search.no.options' })}          placeHolders={{            general: intl.formatMessage({ id: 'spotlight.shortcut.search.placeholder.general' }),            search: intl.formatMessage({ id: 'spotlight.shortcut.search.placeholder.search' }),            id: intl.formatMessage({ id: 'spotlight.shortcut.search.placeholder.id' }),          }}        />      </ShortcutProvider>    </>  );};

Props

• isOpen: boolean
  • Required
  • State of the popup dialog being open or not.
  • Get this from the useSpotlightHotKey hook.
• toggleIsOpen: () => void
  • Required
  • Handler for toggling the open state of the popup dialog.
  • Get this from the useSpotlightHotKey hook.
• noOptionsText: string
  • Required
  • Text displayed when there are no results for a search term.
• placeHolders: ISpotlightPlaceHolders
  • Required
  • Placeholder texts to allow translations
  • Example:

    • {  general: 'Find everything',  search: 'Enter keyword',  id: 'Enter the ID',}

As with all great functionalities that just seem to work, there's a context provider that abstracts all the magic away. Make sure to wrap your SpotlightShortcutPrompt into a ShortcutProvider. There's also a useSpotlightHotKey hook that handles the hotkey logic for opening the spotlight prompt, so make sure to pass the isOpen state and toggle from the hook into your prompt component.