feat: Add smooth height resizing to Implementer Tools popup

packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx

@@ -60,9 +60,11 @@ const OpenOrCloseButton: React.FC<OpenOrCloseButtonProps> = ({ isConfigToolbarOp
   />
 );
 
-export interface ConfigurationProps {}
+export interface ConfigurationProps {
+  isExpanded?: boolean;
+}
 
-export const Configuration: React.FC<ConfigurationProps> = () => {
+export const Configuration: React.FC<ConfigurationProps> = ({ isExpanded = false }) => {
   const { t } = useTranslation();
   const {
     isUIEditorEnabled,
@@ -116,7 +118,8 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
     return filterText ? getRelatedBranches(combinedConfig, filterText) : combinedConfig;
   }, [filterText, combinedConfig]);
 
-  const mainContentHeight = isConfigToolbarOpen ? 'calc(50vh - 7rem)' : 'calc(50vh - 2rem)';
+  const mainContentClass = isExpanded ? `${styles.mainContent} ${styles.expandedContent}` : styles.mainContent;
+
   return (
     <>
       <div className={styles.tools}>
@@ -185,9 +188,22 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
           </FlexGrid>
         ) : null}
       </div>
-      <div className={styles.mainContent} style={{ height: mainContentHeight }}>
+      <div
+        className={mainContentClass}
+        style={{
+          height: isConfigToolbarOpen
+            ? `calc(${isExpanded ? '80vh' : '50vh'} - 7rem)`
+            : `calc(${isExpanded ? '80vh' : '50vh'} - 2rem)`,
+        }}
+      >
         {isJsonModeEnabled ? (
-          <JsonEditor height={mainContentHeight} />
+          <JsonEditor
+            height={
+              isConfigToolbarOpen
+                ? `calc(${isExpanded ? '80vh' : '50vh'} - 7rem)`
+                : `calc(${isExpanded ? '80vh' : '50vh'} - 2rem)`
+            }
+          />
         ) : (
           <>
             <div className={styles.configTreePane}>

packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss

@@ -45,6 +45,7 @@
   width: 100%;
   display: flex;
   overflow-y: auto;
+  transition: max-height 0.3s ease;
 
   :global(.ace_scroller) {
     background-color: theme.$background;
@@ -64,6 +65,10 @@
   }
 }
 
+.expandedContent {
+  max-height: 80vh;
+}
+
 .configTreePane {
   width: 65%;
   // overflow-wrap: break-word;

packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { ContentSwitcher, IconButton, Switch } from '@carbon/react';
+import { ChevronUp, ChevronDown } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { CloseIcon } from '@openmrs/esm-framework';
 import { Configuration } from '../configuration/configuration.component';
@@ -31,20 +32,26 @@ export default function Popup({
 }: DevToolsPopupProps) {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState(visibleTabIndex ? visibleTabIndex : 0);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleHeight = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   const tabContent = useMemo(() => {
-    if (activeTab == 0) {
-      return <Configuration />;
+    if (activeTab === 0) {
+      return <Configuration isExpanded={isExpanded} />;
     } else if (activeTab === 1) {
       return <FrontendModules frontendModules={frontendModules} />;
     } else if (activeTab === 2) {
       return <BackendDependencies backendDependencies={backendDependencies} />;
     } else {
       return <FeatureFlags />;
     }
-  }, [activeTab, backendDependencies, frontendModules]);
+  }, [activeTab, backendDependencies, frontendModules, isExpanded]);
 
   return (
-    <div className={styles.popup}>
+    <div className={`${styles.popup} ${isExpanded ? styles.expanded : ''}`}>
       <div className={styles.topBar}>
         <div className={styles.tabs}>
           <ContentSwitcher
@@ -69,6 +76,15 @@ export default function Popup({
           </ContentSwitcher>
         </div>
         <div>
+          <IconButton
+            align="left"
+            className={styles.toggleButton}
+            kind="secondary"
+            label={isExpanded ? t('collapse', 'Collapse') : t('expand', 'Expand')}
+            onClick={toggleHeight}
+          >
+            {isExpanded ? <ChevronDown /> : <ChevronUp />}
+          </IconButton>
           <IconButton
             align="left"
             className={styles.closeButton}

packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss

@@ -13,6 +13,12 @@
   border-top: 2px solid $ui-05;
   color: $color-gray-100;
   box-sizing: border-box;
+  height: 52vh;
+  transition: height 0.4s ease-in-out;
+
+  &.expanded {
+    height: 90vh;
+  }
 
   tr {
     th,
@@ -25,6 +31,11 @@
 .content {
   width: 100%;
   height: 50vh;
+  transition: height 0.4s ease-in-out;
+
+  .popup.expanded & {
+    height: 80vh;
+  }
 }
 
 .tabs {
@@ -70,3 +81,9 @@
     fill: theme.$icon-primary;
   }
 }
+
+.toggleButton {
+  svg {
+    fill: theme.$icon-primary;
+  }
+}

packages/apps/esm-implementer-tools-app/translations/en.json

@@ -4,12 +4,14 @@
   "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Clear local config",
   "close": "Close",
+  "collapse": "Collapse",
   "configuration": "Configuration",
   "description": "Description",
   "downloadConfig": "Download config",
   "edit": "Edit",
   "editValueButtonText": "Edit",
   "enabled": "Enabled",
+  "expand": "Expand",
   "extensions": "Extensions",
   "featureFlag": "Feature flag",
   "featureFlags": "Feature flags",