Hide APIs (#439)

* Hide APIs * trigger
mui · May 27, 2022 · 2e064b4 · 2e064b4
1 parent 8f9c72c
commit 2e064b4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 41 deletions.
diff --git a/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/index.tsx
@@ -21,7 +21,6 @@ import * as appDom from '../../../appDom';
 import { useDom, useDomApi } from '../../DomLoader';
 import CreatePageNodeDialog from './CreatePageNodeDialog';
 import CreateCodeComponentNodeDialog from './CreateCodeComponentNodeDialog';
-import CreateApiNodeDialog from './CreateApiNodeDialog';
 import CreateConnectionNodeDialog from './CreateConnectionNodeDialog';
 import useLocalStorageState from '../../../utils/useLocalStorageState';
 import useLatest from '../../../utils/useLatest';
@@ -85,7 +84,7 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
 
   const [expanded, setExpanded] = useLocalStorageState<string[]>(
     `editor/${app.id}/hierarchy-expansion`,
-    [':connections', ':pages', ':apis', ':codeComponents'],
+    [':connections', ':pages', ':codeComponents'],
   );
 
   const location = useLocation();
@@ -155,13 +154,6 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
     [],
   );
 
-  const [createApiDialogOpen, setCreateApiDialogOpen] = React.useState(0);
-  const handleCreateApiDialogOpen = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-    setCreateApiDialogOpen(Math.random());
-  }, []);
-  const handleCreateApiDialogClose = React.useCallback(() => setCreateApiDialogOpen(0), []);
-
   const [createPageDialogOpen, setCreatePageDialogOpen] = React.useState(0);
   const handleCreatePageDialogOpen = React.useCallback((event: React.MouseEvent) => {
     event.stopPropagation();
@@ -226,16 +218,18 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
             />
           ))}
         </HierarchyTreeItem>
-        <HierarchyTreeItem nodeId=":apis" labelText="Apis" onCreate={handleCreateApiDialogOpen}>
-          {apis.map((apiNode) => (
-            <HierarchyTreeItem
-              key={apiNode.id}
-              nodeId={apiNode.id}
-              labelText={apiNode.name}
-              onDelete={handleDeleteNodeDialogOpen(apiNode.id)}
-            />
-          ))}
-        </HierarchyTreeItem>
+        {apis.length > 0 ? (
+          <HierarchyTreeItem nodeId=":apis" labelText="Apis">
+            {apis.map((apiNode) => (
+              <HierarchyTreeItem
+                key={apiNode.id}
+                nodeId={apiNode.id}
+                labelText={apiNode.name}
+                onDelete={handleDeleteNodeDialogOpen(apiNode.id)}
+              />
+            ))}
+          </HierarchyTreeItem>
+        ) : null}
         <HierarchyTreeItem
           nodeId=":codeComponents"
           labelText="Components"
@@ -268,12 +262,6 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
         open={!!createConnectionDialogOpen}
         onClose={handleCreateConnectionDialogClose}
       />
-      <CreateApiNodeDialog
-        key={createApiDialogOpen || undefined}
-        appId={appId}
-        open={!!createApiDialogOpen}
-        onClose={handleCreateApiDialogClose}
-      />
       <CreatePageNodeDialog
         key={createPageDialogOpen || undefined}
         appId={appId}

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryStateEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryStateEditor.tsx
@@ -21,7 +21,6 @@ import {
   InputAdornment,
 } from '@mui/material';
 import * as React from 'react';
-import AddIcon from '@mui/icons-material/Add';
 import { ArgTypeDefinitions, UseDataQuery } from '@mui/toolpad-core';
 import useLatest from '../../../utils/useLatest';
 import { useDom, useDomApi } from '../../DomLoader';
@@ -223,16 +222,7 @@ export default function QueryStateEditor() {
   const page = appDom.getNode(dom, state.nodeId, 'page');
   const { queryStates = [] } = appDom.getChildNodes(dom, page) ?? [];
 
-  const handleCreate = React.useCallback(() => {
-    const stateNode = appDom.createNode(dom, 'queryState', {
-      params: {},
-      attributes: { api: appDom.createConst(null) },
-    });
-    domApi.addNode(stateNode, page, 'queryStates');
-    setEditedState(stateNode.id);
-  }, [dom, domApi, page]);
-
-  // To keep it around during closing animation
+  // To keep dialog content around during closing animation
   const lastEditedStateNode = useLatest(editedStateNode);
 
   const handleRemove = React.useCallback(() => {
@@ -242,11 +232,8 @@ export default function QueryStateEditor() {
     handleEditStateDialogClose();
   }, [editedStateNode, handleEditStateDialogClose, domApi]);
 
-  return (
+  return queryStates.length > 0 ? (
     <Stack spacing={1} alignItems="start">
-      <Button color="inherit" startIcon={<AddIcon />} onClick={handleCreate}>
-        create query state
-      </Button>
       <List>
         {queryStates.map((stateNode) => {
           return (
@@ -277,5 +264,5 @@ export default function QueryStateEditor() {
         </Dialog>
       ) : null}
     </Stack>
-  );
+  ) : null;
 }