(feat) O3-3774: Add implementation for the Nav Group (#1116)

* Add nav group extension * Update docs * clean up * Remove unnecessary components * update docs * clean up * update t * define feature name for nav group * update docs * make group title translatable * update docs * tweak title translation and slot name * update api docs * register the global nav group extension * update docs * clean up * PR reviews * Update docs * Move nav group to primary-navigation-app --------- Co-authored-by: Ian <[email protected]>
openmrs · Sep 29, 2024 · 4a39d52 · 4a39d52
1 parent 0e40c94
commit 4a39d52
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 6 deletions.
diff --git a/...es/apps/esm-primary-navigation-app/src/components/generic-link/generic-link.component.tsx b/...es/apps/esm-primary-navigation-app/src/components/generic-link/generic-link.component.tsx
@@ -20,6 +20,6 @@ export interface GenericLinkConfig {
 }
 
 export default function GenericLink() {
-  const config = useConfig() as GenericLinkConfig;
+  const config = useConfig<GenericLinkConfig>();
   return <ConfigurableLink to={config.target}>{config.title}</ConfigurableLink>;
 }
diff --git a/packages/apps/esm-primary-navigation-app/src/components/nav-group/nav-group.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/nav-group/nav-group.component.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Accordion, AccordionItem } from '@carbon/react';
+import { ExtensionSlot, useConfig, Type } from '@openmrs/esm-framework';
+
+export const navGroupFeatureName = 'Nav Group';
+
+export const navGroupConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title of the nav group.',
+    _default: 'My Group',
+  },
+  slotName: {
+    _type: Type.String,
+    _description: 'The name of the slot to create, which links can be added to.',
+  },
+  isExpanded: {
+    _type: Type.Boolean,
+    _description: 'The boolean to determine whether the nav group is expanded or not.',
+    _default: false,
+  },
+};
+
+export interface NavGroupConfig {
+  title: string;
+  slotName: string;
+  isExpanded?: boolean;
+}
+
+interface NavGroupProps {
+  basePath?: string;
+}
+
+export function NavGroup({ basePath }: NavGroupProps) {
+  const { t } = useTranslation();
+  const { title, isExpanded, slotName } = useConfig<NavGroupConfig>();
+
+  return (
+    <Accordion>
+      <AccordionItem open={isExpanded} title={t(title)}>
+        <ExtensionSlot name={slotName ?? `nav-group-${title}`} state={{ basePath }} />
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/packages/apps/esm-primary-navigation-app/src/index.ts b/packages/apps/esm-primary-navigation-app/src/index.ts
@@ -14,6 +14,7 @@ import primaryNavRootComponent from './root.component';
 import userPanelComponent from './components/user-panel-switcher-item/user-panel-switcher.component';
 import changeLanguageLinkComponent from './components/change-language/change-language-link.extension';
 import offlineBannerComponent from './components/offline-banner/offline-banner.component';
+import { NavGroup, navGroupConfigSchema } from './components/nav-group/nav-group.component';
 import genericLinkComponent, { genericLinkConfigSchema } from './components/generic-link/generic-link.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
@@ -26,6 +27,7 @@ const options = {
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
   defineExtensionConfigSchema('link', genericLinkConfigSchema);
+  defineExtensionConfigSchema('global-nav-group', navGroupConfigSchema);
 
   setupOfflineSync(userPropertyChange, [], syncUserLanguagePreference);
 }
@@ -49,6 +51,8 @@ export const linkComponent = getSyncLifecycle(genericLinkComponent, {
   moduleName,
 });
 
+export const navGroup = getSyncLifecycle(NavGroup, options);
+
 export const changeLanguageModal = getAsyncLifecycle(
   () => import('./components/change-language/change-language.modal'),
   options,

diff --git a/packages/apps/esm-primary-navigation-app/src/routes.json b/packages/apps/esm-primary-navigation-app/src/routes.json
@@ -49,6 +49,12 @@
       "component": "linkComponent",
       "online": true,
       "offline": true
+    },
+    {
+      "name": "nav-group",
+      "component": "navGroup",
+      "online": true,
+      "offline": true
     }
   ],
   "modals": [

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -2078,7 +2078,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/left-nav/index.tsx:31](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L31)
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:30](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L30)
 
 ___
 
@@ -6819,7 +6819,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/left-nav/index.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L19)
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L18)
 
 ___
 
@@ -7068,7 +7068,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/left-nav/index.tsx:23](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L23)
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:22](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L22)
 
 ___
 

diff --git a/packages/framework/esm-styleguide/src/index.ts b/packages/framework/esm-styleguide/src/index.ts
@@ -1,4 +1,4 @@
-import { defineConfigSchema } from '@openmrs/esm-config';
+import { defineConfigSchema, defineExtensionConfigSchema } from '@openmrs/esm-config';
 import { setupLogo } from './logo';
 import { setupIcons } from './icons/icon-registration';
 import { setupBranding } from './brand';

diff --git a/packages/framework/esm-styleguide/src/left-nav/index.tsx b/packages/framework/esm-styleguide/src/left-nav/index.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import { ExtensionSlot, useStore } from '@openmrs/esm-react-utils';
 import { createGlobalStore } from '@openmrs/esm-state';
-import type { SideNavProps } from '@carbon/react';
 import { SideNav } from '@carbon/react';
 import styles from './left-nav.module.scss';