Merge pull request #1343 from DalgoT4D/hide-sidemenu-items

Hide sidemenu items
DalgoT4D · Dec 5, 2024 · 39b4408 · 39b4408
2 parents 01fe34a + 2bb74a7
commit 39b4408
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/src/assets/icons/dataQuality.tsx b/src/assets/icons/dataQuality.tsx
@@ -1,19 +1,10 @@
 import * as React from 'react';
 const SvgComponent = (props: any) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="none">
-    <g clipPath="url(#a)">
-      <path
-        fill={props.fill || '#728090'}
-        stroke={props.fill || '#728090'}
-        strokeWidth={0.25}
-        d="M6.25 21.625a1.5 1.5 0 0 1-1.5-1.5v-.75a1.5 1.5 0 0 0-1.5-1.5H2.5a1.5 1.5 0 0 1-1.5-1.5V2.5A1.5 1.5 0 0 1 2.5 1H22a1.5 1.5 0 0 1 1.5 1.5v.75a1.5 1.5 0 0 0 1.5 1.5h.75a1.5 1.5 0 0 1 1.5 1.5v5.063a.937.937 0 0 1-1.875 0V8.124a1.5 1.5 0 0 0-1.5-1.5H8.125a1.5 1.5 0 0 0-1.5 1.5V18.25a1.5 1.5 0 0 0 1.5 1.5h8.813a.937.937 0 0 1 0 1.875H6.25ZM3.812 16c.518 0 .938-.42.938-.938V6.25a1.5 1.5 0 0 1 1.5-1.5h14.438a.937.937 0 0 0 0-1.875H4.375a1.5 1.5 0 0 0-1.5 1.5v10.688c0 .517.42.937.938.937Zm5.626 1.875a.937.937 0 0 1-.938-.938v-1.875a.937.937 0 0 1 1.875 0v1.876c0 .517-.42.937-.938.937Zm3.75 0a.937.937 0 0 1-.938-.938v-5.625a.937.937 0 0 1 1.875 0v5.626c0 .517-.42.937-.938.937Zm3.75 0a.937.937 0 0 1-.938-.938v-3.75a.937.937 0 0 1 1.875 0v3.75c0 .518-.42.938-.938.938Zm8.437-3.75c.771 0 1.499.146 2.183.44.683.292 1.279.693 1.787 1.2a5.802 5.802 0 0 1 1.216 1.802c.302.694.449 1.421.439 2.183 0 .781-.146 1.509-.44 2.183a5.87 5.87 0 0 1-1.2 1.787 5.483 5.483 0 0 1-1.802 1.216 5.55 5.55 0 0 1-2.183.439 5.658 5.658 0 0 1-2.136-.416c-.683-.28-1.5-.24-2.023.281l-5.494 5.482a.901.901 0 0 1-.66.278.901.901 0 0 1-.659-.278.901.901 0 0 1-.278-.66c0-.253.093-.473.278-.659l5.482-5.494c.521-.522.56-1.34.281-2.023a5.658 5.658 0 0 1-.416-2.136c0-.771.146-1.499.44-2.183a5.642 5.642 0 0 1 1.2-1.787 5.85 5.85 0 0 1 1.788-1.215 5.2 5.2 0 0 1 2.197-.44Zm0 9.375c.518 0 1.001-.098 1.45-.293.45-.195.85-.464 1.201-.806.352-.341.62-.737.806-1.186.186-.45.283-.938.293-1.465 0-.518-.098-1.001-.293-1.45a3.994 3.994 0 0 0-.806-1.201 3.505 3.505 0 0 0-1.186-.806A3.996 3.996 0 0 0 25.375 16c-.518 0-1.001.098-1.45.293-.45.195-.85.464-1.201.806-.352.341-.62.737-.806 1.186-.186.45-.283.938-.293 1.465 0 .518.098 1.001.293 1.45.195.45.464.85.806 1.201.341.352.737.62 1.186.806.45.186.938.283 1.465.293Z"
-      />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path fill="#fff" d="M0 0h32v32H0z" />
-      </clipPath>
-    </defs>
+  <svg width="26" height="26" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill={props.fill || '#728090'}
+      d="M4.75 16.125C4.19772 16.125 3.75 15.6773 3.75 15.125V14.375C3.75 13.8227 3.30228 13.375 2.75 13.375H2C1.44772 13.375 1 12.9273 1 12.375V2C1 1.44772 1.44772 1 2 1H16.5C17.0523 1 17.5 1.44772 17.5 2V2.75C17.5 3.30228 17.9477 3.75 18.5 3.75H19.25C19.8023 3.75 20.25 4.19772 20.25 4.75V8.5625C20.25 8.9422 19.9422 9.25 19.5625 9.25C19.1828 9.25 18.875 8.9422 18.875 8.5625V6.125C18.875 5.57272 18.4273 5.125 17.875 5.125H6.125C5.57272 5.125 5.125 5.57272 5.125 6.125V13.75C5.125 14.3023 5.57272 14.75 6.125 14.75H12.6875C13.0672 14.75 13.375 15.0578 13.375 15.4375C13.375 15.8172 13.0672 16.125 12.6875 16.125H4.75ZM3.0625 12C3.4422 12 3.75 11.6922 3.75 11.3125V4.75C3.75 4.19772 4.19772 3.75 4.75 3.75H15.4375C15.8172 3.75 16.125 3.4422 16.125 3.0625C16.125 2.6828 15.8172 2.375 15.4375 2.375H3.375C2.82272 2.375 2.375 2.82272 2.375 3.375V11.3125C2.375 11.6922 2.6828 12 3.0625 12ZM7.1875 13.375C6.8078 13.375 6.5 13.0672 6.5 12.6875V11.3125C6.5 10.9328 6.8078 10.625 7.1875 10.625C7.5672 10.625 7.875 10.9328 7.875 11.3125V12.6875C7.875 13.0672 7.5672 13.375 7.1875 13.375ZM9.9375 13.375C9.5578 13.375 9.25 13.0672 9.25 12.6875V8.5625C9.25 8.1828 9.5578 7.875 9.9375 7.875C10.3172 7.875 10.625 8.1828 10.625 8.5625V12.6875C10.625 13.0672 10.3172 13.375 9.9375 13.375ZM12.6875 13.375C12.3078 13.375 12 13.0672 12 12.6875V9.9375C12 9.5578 12.3078 9.25 12.6875 9.25C13.0672 9.25 13.375 9.5578 13.375 9.9375V12.6875C13.375 13.0672 13.0672 13.375 12.6875 13.375ZM18.875 10.625C19.4408 10.625 19.9743 10.7324 20.4756 10.9473C20.9769 11.1621 21.4137 11.4557 21.7861 11.8281C22.1585 12.2005 22.4557 12.641 22.6777 13.1494C22.8997 13.6579 23.0072 14.1914 23 14.75C23 15.3229 22.8926 15.8564 22.6777 16.3506C22.4629 16.8447 22.1693 17.2816 21.7969 17.6611C21.4245 18.0407 20.984 18.3379 20.4756 18.5527C19.9671 18.7676 19.4336 18.875 18.875 18.875C18.4453 18.875 18.0264 18.8105 17.6182 18.6816C17.4854 18.6397 17.356 18.5913 17.2301 18.5365C16.7788 18.3402 16.2336 18.3683 15.8853 18.7159L11.7959 22.7959C11.6598 22.932 11.4987 23 11.3125 23C11.1263 23 10.9652 22.932 10.8291 22.7959C10.693 22.6598 10.625 22.4987 10.625 22.3125C10.625 22.1263 10.693 21.9652 10.8291 21.8291L14.9091 17.7397C15.2567 17.3914 15.2848 16.8462 15.0885 16.3949C15.0337 16.269 14.9853 16.1396 14.9434 16.0068C14.8145 15.5986 14.75 15.1797 14.75 14.75C14.75 14.1842 14.8574 13.6507 15.0723 13.1494C15.2871 12.6481 15.5807 12.2113 15.9531 11.8389C16.3255 11.4665 16.7624 11.1693 17.2637 10.9473C17.765 10.7253 18.3021 10.6178 18.875 10.625ZM18.875 17.5C19.2546 17.5 19.609 17.4284 19.9385 17.2852C20.2679 17.1419 20.5615 16.945 20.8193 16.6943C21.0771 16.4437 21.2741 16.1536 21.4102 15.8242C21.5462 15.4948 21.6178 15.1367 21.625 14.75C21.625 14.3704 21.5534 14.016 21.4102 13.6865C21.2669 13.3571 21.07 13.0635 20.8193 12.8057C20.5687 12.5479 20.2786 12.3509 19.9492 12.2148C19.6198 12.0788 19.2617 12.0072 18.875 12C18.4954 12 18.141 12.0716 17.8115 12.2148C17.4821 12.3581 17.1885 12.555 16.9307 12.8057C16.6729 13.0563 16.4759 13.3464 16.3398 13.6758C16.2038 14.0052 16.1322 14.3633 16.125 14.75C16.125 15.1296 16.1966 15.484 16.3398 15.8135C16.4831 16.1429 16.68 16.4365 16.9307 16.6943C17.1813 16.9521 17.4714 17.1491 17.8008 17.2852C18.1302 17.4212 18.4883 17.4928 18.875 17.5Z"
+    />
   </svg>
 );
 export default SvgComponent;
diff --git a/src/components/SideDrawer/SideDrawer.tsx b/src/components/SideDrawer/SideDrawer.tsx
@@ -186,7 +186,9 @@ export const SideDrawer = ({ openMenu, setOpenMenu }: any) => {
   const getList = (
     <List component="div" data-testid="side-menu">
       {sideMenu.map((item) => {
-        const hasChildren = sideMenu.filter((sideItem) => sideItem.parent === item.index);
+        const hasUnhiddenChildren = sideMenu.filter(
+          (sideItem) => sideItem.parent === item.index && !sideItem.hide
+        );
         const itemColor = selectedIndex === item.index ? 'primary' : 'inherit';
         if (item.hide) return null;
         return (
@@ -206,7 +208,7 @@ export const SideDrawer = ({ openMenu, setOpenMenu }: any) => {
                     handleListItemClick(item);
                   }}
                 >
-                  {hasChildren.length > 0 && openMenu && (
+                  {hasUnhiddenChildren.length > 0 && openMenu && (
                     <IconButton
                       sx={{ padding: 0 }}
                       data-testid={`expand-toggle-${item.index}`}
@@ -221,7 +223,7 @@ export const SideDrawer = ({ openMenu, setOpenMenu }: any) => {
                   )}
                 </ItemButton>
               </ListItem>
-              {hasChildren.length > 0 && (
+              {hasUnhiddenChildren.length > 0 && (
                 <Collapse
                   in={open[item.index]}
                   key={item.index}
@@ -230,7 +232,7 @@ export const SideDrawer = ({ openMenu, setOpenMenu }: any) => {
                   unmountOnExit
                 >
                   <List component="div" disablePadding sx={{ ml: openMenu ? 4 : 0 }}>
-                    {hasChildren.map((subitem) => {
+                    {hasUnhiddenChildren.map((subitem) => {
                       if (subitem.hide) {
                         return null;
                       }

diff --git a/src/config/constant.ts b/src/config/constant.ts
@@ -1,8 +1,12 @@
 export const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
 
 export const websocketUrl = process.env.NEXT_PUBLIC_WEBSOCKET_URL;
-export const showElementaryMenu = process.env.NEXT_PUBLIC_SHOW_ELEMENTARY_MENU === 'true';
-export const showDataInsightsTab = process.env.NEXT_PUBLIC_SHOW_DATA_INSIGHTS_TAB === 'true';
+export const showElementaryMenu = process.env.NEXT_PUBLIC_SHOW_ELEMENTARY_MENU === 'true'; // Data quality
+export const showDataInsightsTab = process.env.NEXT_PUBLIC_SHOW_DATA_INSIGHTS_TAB === 'true'; //Data insights in UI4T lower pane.
+export const showDataAnalysisTab = process.env.NEXT_PUBLIC_SHOW_DATA_ANALYSIS_TAB === 'true'; // Data Analysis
+export const showSupersetUsageTab = process.env.NEXT_PUBLIC_SHOW_SUPERSET_USAGE_TAB === 'true'; // Usage
+export const showSupersetAnalysisTab =
+  process.env.NEXT_PUBLIC_SHOW_SUPERSET_ANALYSIS_TAB === 'true'; // Analysis.
 export const defaultLoadMoreLimit = parseInt(
   process.env.NEXT_PUBLIC_DEFAULT_LOAD_MORE_LIMIT || '3'
 );

diff --git a/src/config/menu.tsx b/src/config/menu.tsx
@@ -11,7 +11,12 @@ import { primaryColor } from './theme';
 import Settings from '@/assets/icons/settings';
 import User from '@/assets/icons/manage_accounts';
 import AiSettings from '@/assets/icons/aisettings';
-
+import {
+  showDataAnalysisTab,
+  showElementaryMenu,
+  showSupersetAnalysisTab,
+  showSupersetUsageTab,
+} from './constant';
 export const drawerWidth = 250;
 
 const getColor = (selected: boolean) => (selected ? primaryColor : '');
@@ -26,6 +31,7 @@ export const getSideMenu = () => {
       icon: (selected: boolean) => <AnalysisIcon fill={getColor(selected)} />,
       className: 'analysis_walkthrough',
       minimize: false,
+      hide: !showSupersetAnalysisTab,
     },
     {
       index: 0.1,
@@ -35,6 +41,7 @@ export const getSideMenu = () => {
       parent: 0,
       className: 'usage_walkthrough',
       minimize: false,
+      hide: !showSupersetUsageTab,
     },
     {
       index: 0.2,
@@ -44,6 +51,7 @@ export const getSideMenu = () => {
       parent: 0,
       className: 'data_analysis',
       minimize: false,
+      hide: !showDataAnalysisTab,
     },
     {
       index: 1,
@@ -90,7 +98,7 @@ export const getSideMenu = () => {
       path: '/data-quality',
       icon: (selected: boolean) => <DataQualityIcon fill={getColor(selected)} />,
       className: 'data_quality_walkthrough',
-      // hide: !showElementaryMenu,
+      hide: !showElementaryMenu,
       minimize: false,
     },
     {