fix(topbar): only close drawer on application change with new callback (#358)

Author: bjornwedell

components/topbar/src/application-drawer-v1.tsx

@@ -207,6 +207,7 @@ export const ApplicationDrawerV1 = ({
   applicationId,
   content,
   onChange,
+  onChangeAndClose,
   applicationArea,
 }: ApplicationDrawerProps & { applicationArea: ApplicationArea }) => {
   const { t } = useTranslation();
@@ -216,9 +217,15 @@ export const ApplicationDrawerV1 = ({
 
   const onClickItem = (id: string) => {
     if (id !== currentSelection?.id) {
-      onChange(id);
+      if (onChangeAndClose) {
+        onChangeAndClose(id);
+        setIsOpen(false);
+      } else {
+        onChange?.(id);
+      }
+    } else {
+      setIsOpen(false);
     }
-    setIsOpen(false);
   };
 
   return (

components/topbar/src/application-drawer-v2.tsx

@@ -171,16 +171,23 @@ export const ApplicationDrawerV2 = ({
   applicationId,
   content,
   onChange,
+  onChangeAndClose,
 }: ApplicationDrawerProps & { applicationArea: ApplicationArea }) => {
   const [isOpen, setIsOpen] = useState(false);
   const styles = useApplicationDrawerV2Styles();
   const currentSelection = findCurrent(applicationId, content);
 
   const onClickItem = (id: string) => {
     if (id !== currentSelection?.id) {
-      onChange(id);
+      if (onChangeAndClose) {
+        onChangeAndClose(id);
+        setIsOpen(false);
+      } else {
+        onChange?.(id);
+      }
+    } else {
+      setIsOpen(false);
     }
-    setIsOpen(false);
   };
 
   return (

components/topbar/src/application-drawer.types.ts

@@ -40,5 +40,10 @@ export type ApplicationDrawerProps = {
   title: JSX.Element;
   content?: ApplicationDrawerContent[];
   applicationId: string;
-  onChange: (id: string) => void;
+  onChange?: (id: string) => void;
+  /**
+   * Supply this function if you want the drawer to close the drawer after the action.
+   * Supplying this function will cause onChange callback function to be ignored.
+   */
+  onChangeAndClose?: (id: string) => void;
 };