fix: restore tabs on left panel

klarna-incubator · Oct 28, 2024 · 6ac94b4 · 6ac94b4
1 parent 1974679
commit 6ac94b4
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/app/src/components/model/panels/left/LeftPanel.js b/app/src/components/model/panels/left/LeftPanel.js
@@ -9,6 +9,7 @@ import { ComponentTab } from "./ComponentTab";
 import { DataFlowTab } from "./DataFlowTab";
 import { LeftFooter } from "./Footer";
 import { SystemTab } from "./SystemTab";
+import { AppBar, Drawer, Grow, Tab, Tabs, Toolbar } from "@mui/material";
 
 const TAB = {
   SYSTEM: 0,
@@ -64,6 +65,9 @@ export function LeftPanel() {
     return null;
   }
 
+  // This fixes an annoying MUI console error when you deselect a component
+  const tabHck = !selectedComponent && tab === TAB.COMPONENT ? TAB.SYSTEM : tab;
+
   return (
     <Box
       id="panel-left"
@@ -77,6 +81,31 @@ export function LeftPanel() {
     >
       <ToggleLeftPanelButton />
 
+      <AppBar position="static">
+        <Grow in={true}>
+          <Tabs
+            value={tabHck}
+            onChange={(_, v) => setTab(v)}
+            textColor="inherit"
+            variant="fullWidth"
+            sx={{
+              "& .MuiTabs-indicator": {
+                backgroundColor: (theme) => theme.palette.common.gramPink,
+              },
+            }}
+          >
+            <Tab disableRipple label="SYSTEM" value={TAB.SYSTEM} />
+            <Tab disableRipple label="ACTION ITEMS" value={TAB.ACTION_ITEMS} />
+            {isComponent && (
+              <Tab disableRipple label="COMPONENT" value={TAB.COMPONENT} />
+            )}
+            {isDataFlow && (
+              <Tab disableRipple label="DATA FLOW" value={TAB.DATA_FLOW} />
+            )}
+          </Tabs>
+        </Grow>
+      </AppBar>
+
       <TabPanel value={tab} index={TAB.SYSTEM}>
         <SystemTab />
       </TabPanel>
@@ -89,6 +118,7 @@ export function LeftPanel() {
       <TabPanel value={tab} index={TAB.DATA_FLOW}>
         {isDataFlow && <DataFlowTab />}
       </TabPanel>
+
       <LeftFooter />
     </Box>
   );