From 49a76f46993917fb312aad24168a303e75d5ef28 Mon Sep 17 00:00:00 2001
From: Riccardo Forina <rforina@redhat.com>
Date: Wed, 20 Nov 2024 11:06:35 +0100
Subject: [PATCH] Changes to support the new view modes

---
 packages/ui/src/OpenApiEditor.tsx             | 182 +++++++++---------
 packages/ui/src/OpenApiEditorMachine.ts       |  31 ++-
 packages/ui/src/components/EditorSidebar.tsx  |  13 --
 packages/ui/src/components/EditorToolbar.tsx  |  26 ++-
 packages/ui/src/components/Markdown.tsx       |  10 +-
 packages/ui/src/components/OmniSearch.tsx     |  21 +-
 .../ui/src/components/SearchableTable.tsx     | 122 ++++++++++++
 packages/ui/src/components/ServerRow.tsx      |  64 +++---
 packages/ui/src/components/ServersTable.tsx   | 124 ------------
 packages/ui/src/components/SidebarSection.tsx |  30 +--
 .../DataTypeDesignerMachine.ts                |   2 +
 packages/ui/src/dataTypeDesigner/Info.tsx     |   4 +-
 .../documentDesigner/SecurityRequirements.tsx |  69 +++----
 .../src/documentDesigner/SecurityScheme.tsx   | 181 +++++------------
 packages/ui/src/documentDesigner/Servers.tsx  |  32 ++-
 .../src/documentDesigner/TagDefinitions.tsx   | 173 ++++++-----------
 packages/ui/src/pathDesigner/Info.tsx         |  17 +-
 .../src/pathDesigner/PathDesignerMachine.ts   |   2 +
 packages/ui/src/pathDesigner/Servers.tsx      |   6 +-
 packages/ui/src/responseDesigner/Info.tsx     |   4 +-
 .../ResponseDesignerMachine.ts                |   2 +
 21 files changed, 507 insertions(+), 608 deletions(-)
 create mode 100644 packages/ui/src/components/SearchableTable.tsx
 delete mode 100644 packages/ui/src/components/ServersTable.tsx

diff --git a/packages/ui/src/OpenApiEditor.tsx b/packages/ui/src/OpenApiEditor.tsx
index ab14d06..47a3e5b 100644
--- a/packages/ui/src/OpenApiEditor.tsx
+++ b/packages/ui/src/OpenApiEditor.tsx
@@ -237,14 +237,21 @@ export function OpenApiEditor({
 }
 
 function Editor() {
-  const { isSavingSlowly, documentTitle, selectedNode, view, actorRef } =
-    OpenApiEditorMachineContext.useSelector(({ context, value }) => ({
-      isSavingSlowly: value === "slowSaving",
-      documentTitle: context.documentTitle,
-      selectedNode: context.selectedNode,
-      view: context.view,
-      actorRef: context.actorRef,
-    }));
+  const {
+    isSavingSlowly,
+    showNavigation,
+    documentTitle,
+    selectedNode,
+    view,
+    spawnedMachineRef,
+  } = OpenApiEditorMachineContext.useSelector(({ context, value }) => ({
+    isSavingSlowly: value === "slowSaving",
+    documentTitle: context.documentTitle,
+    selectedNode: context.selectedNode,
+    showNavigation: context.showNavigation,
+    view: context.view,
+    spawnedMachineRef: context.spawnedMachineRef,
+  }));
 
   const title = (() => {
     switch (selectedNode.type) {
@@ -281,7 +288,7 @@ function Editor() {
         canGoBack={selectedNode.type !== "root"}
       />
       <Drawer
-        isExpanded={true}
+        isExpanded={showNavigation}
         isInline={true}
         position={"start"}
         className={`apicurio-editor ${classes.editor}`}
@@ -290,91 +297,92 @@ function Editor() {
           panelContent={
             <DrawerPanelContent
               isResizable={true}
-              widths={{ default: "width_75" }}
+              widths={{ default: "width_33" }}
+              className={"pf-v6-u-p-0"}
             >
-              {(() => {
-                switch (true) {
-                  case selectedNode.type === "validation":
-                    return <ValidationMessages />;
-                  case view === "design":
-                  case view === "visualize":
-                    switch (selectedNode.type) {
-                      case "root":
-                        return actorRef ? (
-                          <DocumentDesignerProvider
-                            value={
-                              actorRef as ComponentProps<
-                                typeof DocumentDesignerProvider
-                              >["value"]
-                            }
-                          >
-                            <DocumentDesigner />
-                          </DocumentDesignerProvider>
-                        ) : (
-                          <DocumentDesignerSkeleton />
-                        );
-                      case "path":
-                        return actorRef ? (
-                          <PathDesignerProvider
-                            value={
-                              actorRef as ComponentProps<
-                                typeof PathDesignerProvider
-                              >["value"]
-                            }
-                          >
-                            <PathDesigner />
-                          </PathDesignerProvider>
-                        ) : (
-                          <PathDesignerSkeleton />
-                        );
-                      case "datatype":
-                        return actorRef ? (
-                          <DataTypeDesignerProvider
-                            value={
-                              actorRef as ComponentProps<
-                                typeof DataTypeDesignerProvider
-                              >["value"]
-                            }
-                          >
-                            <DataTypeDesigner />
-                          </DataTypeDesignerProvider>
-                        ) : (
-                          <DataTypeDesignerSkeleton />
-                        );
-                      case "response":
-                        return actorRef ? (
-                          <ResponseDesignerProvider
-                            value={
-                              actorRef as ComponentProps<
-                                typeof ResponseDesignerProvider
-                              >["value"]
-                            }
-                          >
-                            <ResponseDesigner />
-                          </ResponseDesignerProvider>
-                        ) : (
-                          <ResponseDesignerSkeleton />
-                        );
-                    }
-                    break;
-                  case view === "code":
-                    return (
-                      <CodeEditorProvider
+              <EditorSidebar />
+            </DrawerPanelContent>
+          }
+        >
+          {(() => {
+            switch (true) {
+              case selectedNode.type === "validation":
+                return <ValidationMessages />;
+              case view === "design":
+              case view === "visualize":
+                switch (selectedNode.type) {
+                  case "root":
+                    return spawnedMachineRef ? (
+                      <DocumentDesignerProvider
+                        value={
+                          spawnedMachineRef as ComponentProps<
+                            typeof DocumentDesignerProvider
+                          >["value"]
+                        }
+                      >
+                        <DocumentDesigner />
+                      </DocumentDesignerProvider>
+                    ) : (
+                      <DocumentDesignerSkeleton />
+                    );
+                  case "path":
+                    return spawnedMachineRef ? (
+                      <PathDesignerProvider
                         value={
-                          actorRef as ComponentProps<
-                            typeof CodeEditorProvider
+                          spawnedMachineRef as ComponentProps<
+                            typeof PathDesignerProvider
                           >["value"]
                         }
                       >
-                        <CodeEditor />
-                      </CodeEditorProvider>
+                        <PathDesigner />
+                      </PathDesignerProvider>
+                    ) : (
+                      <PathDesignerSkeleton />
+                    );
+                  case "datatype":
+                    return spawnedMachineRef ? (
+                      <DataTypeDesignerProvider
+                        value={
+                          spawnedMachineRef as ComponentProps<
+                            typeof DataTypeDesignerProvider
+                          >["value"]
+                        }
+                      >
+                        <DataTypeDesigner />
+                      </DataTypeDesignerProvider>
+                    ) : (
+                      <DataTypeDesignerSkeleton />
+                    );
+                  case "response":
+                    return spawnedMachineRef ? (
+                      <ResponseDesignerProvider
+                        value={
+                          spawnedMachineRef as ComponentProps<
+                            typeof ResponseDesignerProvider
+                          >["value"]
+                        }
+                      >
+                        <ResponseDesigner />
+                      </ResponseDesignerProvider>
+                    ) : (
+                      <ResponseDesignerSkeleton />
                     );
                 }
-              })()}
-            </DrawerPanelContent>
-          }
-        >
-          <EditorSidebar />
+                break;
+              case view === "code":
+                return (
+                  <CodeEditorProvider
+                    value={
+                      spawnedMachineRef as ComponentProps<
+                        typeof CodeEditorProvider
+                      >["value"]
+                    }
+                  >
+                    <CodeEditor />
+                  </CodeEditorProvider>
+                );
+            }
+          })()}
         </DrawerContent>
       </Drawer>
       <Modal
diff --git a/packages/ui/src/OpenApiEditorMachine.ts b/packages/ui/src/OpenApiEditorMachine.ts
index 2acdce1..8ae4700 100644
--- a/packages/ui/src/OpenApiEditorMachine.ts
+++ b/packages/ui/src/OpenApiEditorMachine.ts
@@ -23,7 +23,8 @@ type Context = EditorModel & {
   navigationFilter: string;
   selectedNode: SelectedNode | { type: "validation" };
   view: Exclude<EditorToolbarView, "hidden">;
-  actorRef?:
+  showNavigation: boolean;
+  spawnedMachineRef?:
     | ActorRefFrom<typeof DocumentDesignerMachine>
     | ActorRefFrom<typeof PathDesignerMachine>
     | ActorRefFrom<typeof DataTypeDesignerMachine>
@@ -35,6 +36,12 @@ type Events =
   | {
       readonly type: "xstate.init";
     }
+  | {
+      readonly type: "SHOW_NAVIGATION";
+    }
+  | {
+      readonly type: "HIDE_NAVIGATION";
+    }
   | {
       readonly type: "FILTER";
       readonly filter: string;
@@ -185,6 +192,7 @@ export const OpenApiEditorMachine = setup({
       type: "root",
     },
     view: "visualize",
+    showNavigation: false,
   },
   initial: "viewChanged",
   states: {
@@ -198,9 +206,9 @@ export const OpenApiEditorMachine = setup({
     viewChanged: {
       always: "updateEditorState",
       entry: assign({
-        actorRef: ({ context, spawn, self }) => {
-          if (context.actorRef) {
-            stopChild(context.actorRef);
+        spawnedMachineRef: ({ context, spawn, self }) => {
+          if (context.spawnedMachineRef) {
+            stopChild(context.spawnedMachineRef);
           }
           if (context.selectedNode.type === "validation") {
             return undefined;
@@ -222,6 +230,7 @@ export const OpenApiEditorMachine = setup({
                     input: {
                       parentRef: self,
                       path: context.selectedNode,
+                      editable: context.view === "design",
                     },
                   });
                 case "datatype":
@@ -229,6 +238,7 @@ export const OpenApiEditorMachine = setup({
                     input: {
                       parentRef: self,
                       dataType: context.selectedNode,
+                      editable: context.view === "design",
                     },
                   });
                 case "response":
@@ -236,6 +246,7 @@ export const OpenApiEditorMachine = setup({
                     input: {
                       parentRef: self,
                       response: context.selectedNode,
+                      editable: context.view === "design",
                     },
                   });
               }
@@ -284,7 +295,7 @@ export const OpenApiEditorMachine = setup({
           actions: [
             "onDocumentChange",
             assign(({ event }) => event.output),
-            sendTo(({ context }) => context.actorRef!, {
+            sendTo(({ context }) => context.spawnedMachineRef!, {
               type: "DOCUMENT_CHANGED",
             }),
           ],
@@ -500,5 +511,15 @@ export const OpenApiEditorMachine = setup({
     REDO: ".redoing",
     START_SAVING: ".saving",
     END_SAVING: ".idle",
+    SHOW_NAVIGATION: {
+      actions: assign({
+        showNavigation: true,
+      }),
+    },
+    HIDE_NAVIGATION: {
+      actions: assign({
+        showNavigation: false,
+      }),
+    },
   },
 });
diff --git a/packages/ui/src/components/EditorSidebar.tsx b/packages/ui/src/components/EditorSidebar.tsx
index eb707ca..e6f3cc1 100644
--- a/packages/ui/src/components/EditorSidebar.tsx
+++ b/packages/ui/src/components/EditorSidebar.tsx
@@ -2,7 +2,6 @@ import { ReactNode } from "react";
 import { OpenApiEditorMachineContext } from "../OpenApiEditor";
 import { EditorSidebarSkeleton } from "./EditorSidebarSkeleton";
 import { SidebarSection } from "./SidebarSection.tsx";
-import { OmniSearch } from "./OmniSearch.tsx";
 import { Label, PageSection } from "@patternfly/react-core";
 import { NavigationPaths } from "./NavigationPaths.tsx";
 import { NavigationResponses } from "./NavigationResponses.tsx";
@@ -32,12 +31,6 @@ export function EditorSidebar() {
 
   return (
     <>
-      <PageSection
-        stickyOnBreakpoint={{ default: "top" }}
-        style={{ boxShadow: "none" }}
-      >
-        <OmniSearch />
-      </PageSection>
       <PageSection>
         {(() => {
           switch (isFiltering) {
@@ -155,10 +148,8 @@ function PathsSection({
   return (
     <SidebarSection
       title={<Label color={"green"}>Paths</Label>}
-      addTooltip={"Add a path"}
       count={count}
       idx={0}
-      onAdd={() => {}}
     >
       {children}
     </SidebarSection>
@@ -175,10 +166,8 @@ function ResponsesSection({
   return (
     <SidebarSection
       title={<Label color={"orange"}>Responses</Label>}
-      addTooltip={"Add a response"}
       count={count}
       idx={1}
-      onAdd={() => {}}
     >
       {children}
     </SidebarSection>
@@ -195,10 +184,8 @@ function DataTypesSection({
   return (
     <SidebarSection
       title={<Label color={"blue"}>Data types</Label>}
-      addTooltip={"Add a data type"}
       count={count}
       idx={2}
-      onAdd={() => {}}
     >
       {children}
     </SidebarSection>
diff --git a/packages/ui/src/components/EditorToolbar.tsx b/packages/ui/src/components/EditorToolbar.tsx
index 117f991..e424ec7 100644
--- a/packages/ui/src/components/EditorToolbar.tsx
+++ b/packages/ui/src/components/EditorToolbar.tsx
@@ -21,6 +21,7 @@ import {
   WarningTriangleIcon,
 } from "@patternfly/react-icons";
 import { ReactNode } from "react";
+import { OmniSearch } from "./OmniSearch.tsx";
 
 export type EditorToolbarView = "design" | "code" | "visualize" | "hidden";
 export type EditorToolbarProps = {
@@ -57,17 +58,22 @@ export function EditorToolbar({
     <Toolbar className="pf-v6-u-p-0">
       <ToolbarContent>
         <ToolbarGroup>
-          {canGoBack && (
-            <ToolbarItem>
-              <Button
-                icon={<ArrowLeftIcon />}
-                onClick={onBack}
-                variant={"plain"}
-              />
-            </ToolbarItem>
-          )}
+          <ToolbarItem>
+            <OmniSearch />
+          </ToolbarItem>
+          <ToolbarItem variant={"separator"} />
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Button
+              icon={<ArrowLeftIcon />}
+              onClick={onBack}
+              variant={"plain"}
+              isDisabled={!canGoBack}
+            />
+          </ToolbarItem>
           {label && <ToolbarItem alignSelf={"center"}>{label}</ToolbarItem>}
-          <ToolbarItem style={{ flex: "1" }} alignSelf={"center"}>
+          <ToolbarItem style={{ flex: "1" }}>
             <Title headingLevel={"h1"} size={"lg"}>
               {title}
             </Title>
diff --git a/packages/ui/src/components/Markdown.tsx b/packages/ui/src/components/Markdown.tsx
index dfe94dd..ea464e7 100644
--- a/packages/ui/src/components/Markdown.tsx
+++ b/packages/ui/src/components/Markdown.tsx
@@ -21,7 +21,7 @@ import {
   CodeEditorControl,
   Language,
 } from "@patternfly/react-code-editor";
-import { SaveIcon } from "@patternfly/react-icons";
+import { CheckIcon } from "@patternfly/react-icons";
 import { SectionSkeleton } from "./SectionSkeleton.tsx";
 import { useDarkMode } from "./isDarkMode.ts";
 import IntrinsicElements = JSX.IntrinsicElements;
@@ -59,20 +59,18 @@ export function Markdown({
       customControls={[
         <CodeEditorControl
           key={"save"}
-          icon={<SaveIcon />}
+          icon={<CheckIcon />}
           aria-label="Save changes"
           tooltipProps={{ content: "Save changes" }}
           onClick={() => {}}
           // isDisabled={isDisabled || source === code}
-        >
-          Save
-        </CodeEditorControl>,
+        />,
       ]}
       isLanguageLabelVisible={false}
       isLineNumbersVisible={false}
       // onChange={(code) => setCode(code)}
       language={Language.markdown}
-      height={`20rem`}
+      height={"sizeToFit"}
       // onEditorDidMount={onEditorDidMount}
       emptyState={<SectionSkeleton count={3} />}
       isDarkTheme={darkMode}
diff --git a/packages/ui/src/components/OmniSearch.tsx b/packages/ui/src/components/OmniSearch.tsx
index ef439ea..8e85190 100644
--- a/packages/ui/src/components/OmniSearch.tsx
+++ b/packages/ui/src/components/OmniSearch.tsx
@@ -2,9 +2,12 @@ import { SearchInput } from "@patternfly/react-core";
 import { OpenApiEditorMachineContext } from "../OpenApiEditor.tsx";
 
 export function OmniSearch() {
-  const { filter } = OpenApiEditorMachineContext.useSelector(({ context }) => ({
-    filter: context.navigationFilter,
-  }));
+  const { filter, isExpanded } = OpenApiEditorMachineContext.useSelector(
+    ({ context }) => ({
+      filter: context.navigationFilter,
+      isExpanded: context.showNavigation,
+    })
+  );
   const actorRef = OpenApiEditorMachineContext.useActorRef();
   return (
     <SearchInput
@@ -12,6 +15,18 @@ export function OmniSearch() {
       autoFocus={true}
       value={filter}
       onChange={(_, filter) => actorRef.send({ type: "FILTER", filter })}
+      expandableInput={{
+        isExpanded,
+        onToggleExpand: () => {
+          if (isExpanded) {
+            actorRef.send({ type: "HIDE_NAVIGATION" });
+            actorRef.send({ type: "FILTER", filter: "" });
+          } else {
+            actorRef.send({ type: "SHOW_NAVIGATION" });
+          }
+        },
+        toggleAriaLabel: "Expandable search input toggle",
+      }}
     />
   );
 }
diff --git a/packages/ui/src/components/SearchableTable.tsx b/packages/ui/src/components/SearchableTable.tsx
new file mode 100644
index 0000000..eb3bcaa
--- /dev/null
+++ b/packages/ui/src/components/SearchableTable.tsx
@@ -0,0 +1,122 @@
+import {
+  Button,
+  DataList,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
+  SearchInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { AddCircleOIcon, SearchIcon, TrashIcon } from "@patternfly/react-icons";
+import { Fragment, ReactNode, useState } from "react";
+
+export function SearchableTable<T>({
+  data,
+  label,
+  editing,
+  onFilter,
+  onRenderRow,
+  onAdd,
+  onRemoveAll,
+}: {
+  data: T[];
+  label: string;
+  editing: boolean;
+  onAdd: () => void;
+  onFilter: (data: T, filter: string) => boolean;
+  onRenderRow: (data: T, idx: number) => ReactNode;
+  onRemoveAll: () => void;
+}) {
+  const [filter, setFilter] = useState("");
+  const filteredData = data.filter((v) => onFilter(v, filter));
+  return (
+    <Panel>
+      {data.length > 10 && (
+        <PanelHeader>
+          <Toolbar>
+            <ToolbarContent>
+              <ToolbarItem>
+                <SearchInput
+                  aria-label={`Search for any ${label}...`}
+                  placeholder={`Search for any ${label}...`}
+                  value={filter}
+                  onChange={(_, v) => setFilter(v)}
+                />
+              </ToolbarItem>
+              {editing && (
+                <ToolbarGroup>
+                  <ToolbarItem>
+                    <Button
+                      variant="primary"
+                      icon={<AddCircleOIcon />}
+                      onClick={onAdd}
+                    >
+                      Add a {label}
+                    </Button>
+                  </ToolbarItem>
+                  <ToolbarItem variant="separator" />
+                  <ToolbarItem>
+                    <Button
+                      variant="link"
+                      icon={<TrashIcon />}
+                      onClick={onRemoveAll}
+                    >
+                      Remove all
+                    </Button>
+                  </ToolbarItem>
+                </ToolbarGroup>
+              )}
+            </ToolbarContent>
+          </Toolbar>
+        </PanelHeader>
+      )}
+      <PanelMain>
+        {filteredData.length > 0 && (
+          <DataList aria-label="Servers" isCompact>
+            {filteredData.map((t, idx) => {
+              return <Fragment key={idx}>{onRenderRow(t, idx)}</Fragment>;
+            })}
+          </DataList>
+        )}
+        {filteredData.length === 0 && filter.length > 0 && (
+          <PanelMainBody>
+            <EmptyState variant={"xs"} icon={SearchIcon}>
+              <EmptyStateBody>
+                No {label}s were found that meet the search criteria.
+              </EmptyStateBody>
+              <EmptyStateActions>
+                <Button variant={"link"} onClick={() => setFilter("")}>
+                  Reset search
+                </Button>
+              </EmptyStateActions>
+            </EmptyState>
+          </PanelMainBody>
+        )}
+        {filteredData.length === 0 && filter.length === 0 && (
+          <PanelMainBody>
+            <EmptyState
+              variant={"xs"}
+              icon={editing ? AddCircleOIcon : undefined}
+            >
+              <EmptyStateBody>No {label}s have been defined.</EmptyStateBody>
+              {editing && (
+                <EmptyStateActions>
+                  <Button variant={"link"} onClick={onAdd}>
+                    Add a {label}
+                  </Button>
+                </EmptyStateActions>
+              )}
+            </EmptyState>
+          </PanelMainBody>
+        )}
+      </PanelMain>
+    </Panel>
+  );
+}
diff --git a/packages/ui/src/components/ServerRow.tsx b/packages/ui/src/components/ServerRow.tsx
index dc9b22c..c6f8c8a 100644
--- a/packages/ui/src/components/ServerRow.tsx
+++ b/packages/ui/src/components/ServerRow.tsx
@@ -17,12 +17,14 @@ export function ServerRow({
   id,
   url,
   description,
+  editing,
   onRename,
   onRemove,
 }: {
   id: string;
   url: string;
   description: string;
+  editing: boolean;
   onRename: () => void;
   onRemove: () => void;
 }) {
@@ -41,37 +43,39 @@ export function ServerRow({
             </DataListCell>,
           ]}
         />
-        <DataListAction
-          aria-labelledby={`${id}-actions`}
-          id={`${id}-actions`}
-          aria-label="Actions"
-        >
-          <Dropdown
-            popperProps={{ position: "right" }}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                isExpanded={isMenuOpen}
-                onClick={toggleMenu}
-                variant="plain"
-                aria-label="Server actions"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-            isOpen={isMenuOpen}
-            onOpenChange={(isOpen: boolean) => setIsMenuOpen(isOpen)}
+        {editing && (
+          <DataListAction
+            aria-labelledby={`${id}-actions`}
+            id={`${id}-actions`}
+            aria-label="Actions"
           >
-            <DropdownList>
-              <DropdownItem key="Rename" onClick={onRename}>
-                Rename
-              </DropdownItem>
-              <DropdownItem key="Delete" onClick={onRemove}>
-                Delete
-              </DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        </DataListAction>
+            <Dropdown
+              popperProps={{ position: "right" }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isMenuOpen}
+                  onClick={toggleMenu}
+                  variant="plain"
+                  aria-label="Server actions"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+              isOpen={isMenuOpen}
+              onOpenChange={(isOpen: boolean) => setIsMenuOpen(isOpen)}
+            >
+              <DropdownList>
+                <DropdownItem key="Rename" onClick={onRename}>
+                  Rename
+                </DropdownItem>
+                <DropdownItem key="Delete" onClick={onRemove}>
+                  Delete
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </DataListAction>
+        )}
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/packages/ui/src/components/ServersTable.tsx b/packages/ui/src/components/ServersTable.tsx
deleted file mode 100644
index 826a230..0000000
--- a/packages/ui/src/components/ServersTable.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import {
-  Button,
-  DataList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  Panel,
-  PanelHeader,
-  PanelMain,
-  PanelMainBody,
-  SearchInput,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-} from "@patternfly/react-core";
-import { AddCircleOIcon, SearchIcon, TrashIcon } from "@patternfly/react-icons";
-import { useState } from "react";
-import { ServerRow } from "./ServerRow.tsx";
-import { Server } from "../OpenApiEditorModels.ts";
-
-export function ServersTable({
-  servers,
-  onAdd,
-  onRemove,
-  onRename,
-  onRemoveAll,
-}: {
-  servers: Server[];
-  onAdd: () => void;
-  onRename: (id: string) => void;
-  onRemove: (id: string) => void;
-  onRemoveAll: () => void;
-}) {
-  const [filter, setFilter] = useState("");
-  const filteredTags = servers.filter(
-    (server) =>
-      server.url.toLowerCase().includes(filter.toLowerCase()) ||
-      server.description.toLowerCase().includes(filter.toLowerCase())
-  );
-  return (
-    <Panel>
-      {servers.length > 10 && (
-        <PanelHeader>
-          <Toolbar>
-            <ToolbarContent>
-              <ToolbarItem>
-                <SearchInput
-                  aria-label="Search for any server..."
-                  placeholder="Search for any server..."
-                  value={filter}
-                  onChange={(_, v) => setFilter(v)}
-                />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button
-                  variant="primary"
-                  icon={<AddCircleOIcon />}
-                  onClick={onAdd}
-                >
-                  Add a server
-                </Button>
-              </ToolbarItem>
-              <ToolbarItem variant="separator" />
-              <ToolbarItem>
-                <Button
-                  variant="link"
-                  icon={<TrashIcon />}
-                  onClick={onRemoveAll}
-                >
-                  Remove all serverss
-                </Button>
-              </ToolbarItem>
-            </ToolbarContent>
-          </Toolbar>
-        </PanelHeader>
-      )}
-      <PanelMain>
-        {filteredTags.length > 0 && (
-          <DataList aria-label="Servers" isCompact>
-            {filteredTags.map((t, idx) => {
-              const id = `server-${idx}`;
-              return (
-                <ServerRow
-                  key={idx}
-                  id={id}
-                  url={t.url}
-                  description={t.description}
-                  onRename={() => onRename(id)}
-                  onRemove={() => onRemove(id)}
-                />
-              );
-            })}
-          </DataList>
-        )}
-        {filteredTags.length === 0 && filter.length > 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"} icon={SearchIcon}>
-              <EmptyStateBody>
-                No servers were found that meet the search criteria.
-              </EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"} onClick={() => setFilter("")}>
-                  Reset search
-                </Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-        {filteredTags.length === 0 && filter.length === 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"} icon={AddCircleOIcon}>
-              <EmptyStateBody>No servers have been defined.</EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"} onClick={onAdd}>
-                  Add a server
-                </Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-      </PanelMain>
-    </Panel>
-  );
-}
diff --git a/packages/ui/src/components/SidebarSection.tsx b/packages/ui/src/components/SidebarSection.tsx
index 80060f6..06d8370 100644
--- a/packages/ui/src/components/SidebarSection.tsx
+++ b/packages/ui/src/components/SidebarSection.tsx
@@ -4,24 +4,17 @@ import {
   Button,
   Toolbar,
   ToolbarContent,
-  ToolbarGroup,
   ToolbarItem,
-  Tooltip,
 } from "@patternfly/react-core";
-import { PlusCircleIcon } from "@patternfly/react-icons";
 
 export function SidebarSection({
   title,
-  addTooltip,
   count,
-  onAdd,
   idx,
   children,
 }: {
   title: ReactNode;
-  addTooltip: string;
   count?: number;
-  onAdd: () => void;
   idx: number;
   children: ReactNode;
 }) {
@@ -30,7 +23,7 @@ export function SidebarSection({
     <>
       <Toolbar
         isSticky={true}
-        style={{ top: 55 + 30 * idx, bottom: 60 * (idx - 1) }}
+        style={{ top: 0 + (30 * idx - 1), bottom: 60 * (idx - 1) }}
       >
         <ToolbarContent>
           <ToolbarItem alignSelf={"center"}>
@@ -38,24 +31,11 @@ export function SidebarSection({
               {title}
             </Button>
           </ToolbarItem>
-          <ToolbarGroup align={{ default: "alignEnd" }}>
-            {count !== undefined && (
-              <ToolbarItem alignSelf={"center"}>
-                <Badge>{count}</Badge>
-              </ToolbarItem>
-            )}
-            <ToolbarItem alignSelf={"center"}>
-              <Tooltip content={addTooltip}>
-                <Button
-                  variant={"secondary"}
-                  size={"sm"}
-                  aria-label={"add"}
-                  icon={<PlusCircleIcon />}
-                  onClick={onAdd}
-                />
-              </Tooltip>
+          {count !== undefined && (
+            <ToolbarItem alignSelf={"center"} align={{ default: "alignEnd" }}>
+              <Badge>{count}</Badge>
             </ToolbarItem>
-          </ToolbarGroup>
+          )}
         </ToolbarContent>
       </Toolbar>
       <div style={{ position: "relative" }} className="pf-v6-u-py-md">
diff --git a/packages/ui/src/dataTypeDesigner/DataTypeDesignerMachine.ts b/packages/ui/src/dataTypeDesigner/DataTypeDesignerMachine.ts
index 4a243c6..5cf5118 100644
--- a/packages/ui/src/dataTypeDesigner/DataTypeDesignerMachine.ts
+++ b/packages/ui/src/dataTypeDesigner/DataTypeDesignerMachine.ts
@@ -3,6 +3,7 @@ import { DocumentDataType, NodeDataType } from "../OpenApiEditorModels";
 
 type Context = DocumentDataType & {
   dataType: NodeDataType;
+  editable: boolean;
   parentRef: ParentActor;
 };
 
@@ -26,6 +27,7 @@ export const DataTypeDesignerMachine = setup({
     events: {} as Events,
     input: {} as {
       dataType: NodeDataType;
+      editable: boolean;
       parentRef: ParentActor;
     },
   },
diff --git a/packages/ui/src/dataTypeDesigner/Info.tsx b/packages/ui/src/dataTypeDesigner/Info.tsx
index e4811f4..c296e1d 100644
--- a/packages/ui/src/dataTypeDesigner/Info.tsx
+++ b/packages/ui/src/dataTypeDesigner/Info.tsx
@@ -11,9 +11,10 @@ import {
 } from "./DataTypeDesignerMachineContext.ts";
 
 export function Info() {
-  const { description } = useMachineSelector(({ context }) => {
+  const { description, editable } = useMachineSelector(({ context }) => {
     return {
       description: context.description,
+      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
@@ -27,6 +28,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_DESCRIPTION", description });
             }}
             value={description}
+            editing={editable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>
diff --git a/packages/ui/src/documentDesigner/SecurityRequirements.tsx b/packages/ui/src/documentDesigner/SecurityRequirements.tsx
index db6367e..80ce048 100644
--- a/packages/ui/src/documentDesigner/SecurityRequirements.tsx
+++ b/packages/ui/src/documentDesigner/SecurityRequirements.tsx
@@ -1,6 +1,4 @@
 import {
-  Button,
-  DataList,
   DataListAction,
   DataListCell,
   DataListItem,
@@ -9,55 +7,46 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
   MenuToggle,
-  Panel,
-  PanelMain,
-  PanelMainBody,
 } from "@patternfly/react-core";
-import { AddCircleOIcon, EllipsisVIcon } from "@patternfly/react-icons";
+import { EllipsisVIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import {
   useMachineActorRef,
   useMachineSelector,
 } from "./DocumentDesignerMachineContext.ts";
+import { SearchableTable } from "../components/SearchableTable.tsx";
 
 export function SecurityRequirements() {
-  const { securityRequirements } = useMachineSelector(({ context }) => {
-    return {
-      securityRequirements: context.securityRequirements,
-    };
-  });
+  const { securityRequirements, editable } = useMachineSelector(
+    ({ context }) => {
+      return {
+        securityRequirements: context.securityRequirements,
+        editable: context.editable,
+      };
+    }
+  );
   const actorRef = useMachineActorRef();
   return (
-    <Panel>
-      <PanelMain>
-        {securityRequirements.length > 0 && (
-          <DataList aria-label="Security requirements" isCompact>
-            {securityRequirements.map((sr, idx) => {
-              const id = `server-${idx}`;
-              return (
-                <SecurityRequirement key={idx} id={id} schemes={sr.schemes} />
-              );
-            })}
-          </DataList>
-        )}
-        {securityRequirements.length === 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"} icon={AddCircleOIcon}>
-              <EmptyStateBody>
-                No security requirements have been configured.{" "}
-              </EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"}>Add security requirement</Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-      </PanelMain>
-    </Panel>
+    <SearchableTable
+      data={securityRequirements}
+      label={"security requirement"}
+      editing={editable}
+      onAdd={() => {}}
+      onFilter={(sr, filter) =>
+        sr.schemes.reduce(
+          (_, scheme) => scheme.toLowerCase().includes(filter.toLowerCase()),
+          false
+        )
+      }
+      onRenderRow={(s, idx) => (
+        <SecurityRequirement
+          id={`security-requirement-${idx}`}
+          schemes={s.schemes}
+        />
+      )}
+      onRemoveAll={() => {}}
+    />
   );
 }
 
diff --git a/packages/ui/src/documentDesigner/SecurityScheme.tsx b/packages/ui/src/documentDesigner/SecurityScheme.tsx
index 5a5c344..559b347 100644
--- a/packages/ui/src/documentDesigner/SecurityScheme.tsx
+++ b/packages/ui/src/documentDesigner/SecurityScheme.tsx
@@ -1,6 +1,4 @@
 import {
-  Button,
-  DataList,
   DataListAction,
   DataListCell,
   DataListItem,
@@ -9,118 +7,41 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
   MenuToggle,
-  Panel,
-  PanelHeader,
-  PanelMain,
-  PanelMainBody,
-  SearchInput,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  AddCircleOIcon,
-  EllipsisVIcon,
-  SearchIcon,
-  TrashIcon,
-} from "@patternfly/react-icons";
+import { EllipsisVIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { Markdown } from "../components/Markdown.tsx";
-import {
-  useMachineActorRef,
-  useMachineSelector,
-} from "./DocumentDesignerMachineContext.ts";
+import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
+import { SearchableTable } from "../components/SearchableTable.tsx";
 
 export function SecurityScheme() {
-  const { securityScheme } = useMachineSelector(({ context }) => {
+  const { securityScheme, editable } = useMachineSelector(({ context }) => {
     return {
       securityScheme: context.securityScheme,
+      editable: context.editable,
     };
   });
-  const actorRef = useMachineActorRef();
-  const [filter, setFilter] = useState("");
-  const filteredTags = securityScheme.filter(
-    (securityScheme) =>
-      securityScheme.name.toLowerCase().includes(filter.toLowerCase()) ||
-      securityScheme.description.toLowerCase().includes(filter.toLowerCase())
-  );
   return (
-    <Panel>
-      {securityScheme.length > 10 && (
-        <PanelHeader>
-          <Toolbar>
-            <ToolbarContent>
-              <ToolbarItem>
-                <SearchInput
-                  aria-label="Search for any security scheme..."
-                  placeholder="Search for any security scheme..."
-                  value={filter}
-                  onChange={(_, v) => setFilter(v)}
-                />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button variant="primary" icon={<AddCircleOIcon />}>
-                  Add a security scheme
-                </Button>
-              </ToolbarItem>
-              <ToolbarItem variant="separator" />
-              <ToolbarItem>
-                <Button variant="link" icon={<TrashIcon />}>
-                  Remove all security schemes
-                </Button>
-              </ToolbarItem>
-            </ToolbarContent>
-          </Toolbar>
-        </PanelHeader>
+    <SearchableTable
+      data={securityScheme}
+      label={"security scheme"}
+      editing={editable}
+      onAdd={() => {}}
+      onFilter={(securityScheme, filter) =>
+        securityScheme.name.toLowerCase().includes(filter.toLowerCase()) ||
+        securityScheme.description.toLowerCase().includes(filter.toLowerCase())
+      }
+      onRenderRow={(s, idx) => (
+        <SecuritySchemeRow
+          id={`security-scheme-${idx}`}
+          name={s.name}
+          description={s.description}
+          editable={editable}
+        />
       )}
-      <PanelMain>
-        {filteredTags.length > 0 && (
-          <DataList aria-label="Security scheme" isCompact>
-            {filteredTags.map((t, idx) => {
-              const id = `securityScheme-${idx}`;
-              return (
-                <SecuritySchemeRow
-                  key={idx}
-                  id={id}
-                  name={t.name}
-                  description={t.description}
-                />
-              );
-            })}
-          </DataList>
-        )}
-        {filteredTags.length === 0 && filter.length > 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"} icon={SearchIcon}>
-              <EmptyStateBody>
-                No security scheme were found that meet the search criteria.
-              </EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"} onClick={() => setFilter("")}>
-                  Reset search
-                </Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-        {securityScheme.length === 0 && filter.length === 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"} icon={AddCircleOIcon}>
-              <EmptyStateBody>
-                No security scheme have been configured.
-              </EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"}>Add security scheme</Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-      </PanelMain>
-    </Panel>
+      onRemoveAll={() => {}}
+    />
   );
 }
 
@@ -128,10 +49,12 @@ function SecuritySchemeRow({
   id,
   name,
   description,
+  editable,
 }: {
   id: string;
   name: string;
   description: string;
+  editable: boolean;
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const toggleMenu = () => setIsMenuOpen((v) => !v);
@@ -148,33 +71,35 @@ function SecuritySchemeRow({
             </DataListCell>,
           ]}
         />
-        <DataListAction
-          aria-labelledby={`${id}-actions`}
-          id={`${id}-actions`}
-          aria-label="Actions"
-        >
-          <Dropdown
-            popperProps={{ position: "right" }}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                isExpanded={isMenuOpen}
-                onClick={toggleMenu}
-                variant="plain"
-                aria-label="Security scheme actions"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-            isOpen={isMenuOpen}
-            onOpenChange={(isOpen: boolean) => setIsMenuOpen(isOpen)}
+        {editable && (
+          <DataListAction
+            aria-labelledby={`${id}-actions`}
+            id={`${id}-actions`}
+            aria-label="Actions"
           >
-            <DropdownList>
-              <DropdownItem key="Rename">Rename</DropdownItem>
-              <DropdownItem key="Delete">Delete</DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        </DataListAction>
+            <Dropdown
+              popperProps={{ position: "right" }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isMenuOpen}
+                  onClick={toggleMenu}
+                  variant="plain"
+                  aria-label="Security scheme actions"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+              isOpen={isMenuOpen}
+              onOpenChange={(isOpen: boolean) => setIsMenuOpen(isOpen)}
+            >
+              <DropdownList>
+                <DropdownItem key="Rename">Rename</DropdownItem>
+                <DropdownItem key="Delete">Delete</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </DataListAction>
+        )}
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/packages/ui/src/documentDesigner/Servers.tsx b/packages/ui/src/documentDesigner/Servers.tsx
index 58833cc..75de797 100644
--- a/packages/ui/src/documentDesigner/Servers.tsx
+++ b/packages/ui/src/documentDesigner/Servers.tsx
@@ -1,28 +1,40 @@
-import { ServersTable } from "../components/ServersTable.tsx";
+import { SearchableTable } from "../components/SearchableTable.tsx";
 import {
   useMachineActorRef,
   useMachineSelector,
 } from "./DocumentDesignerMachineContext.ts";
+import { ServerRow } from "../components/ServerRow.tsx";
 
 export function Servers() {
-  const { servers } = useMachineSelector(({ context }) => {
+  const { servers, editable } = useMachineSelector(({ context }) => {
     return {
       servers: context.servers,
+      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
   return (
-    <ServersTable
-      servers={servers}
+    <SearchableTable
+      data={servers}
+      label={"server"}
+      editing={editable}
+      onFilter={(server, filter) =>
+        server.url.toLowerCase().includes(filter.toLowerCase()) ||
+        server.description.toLowerCase().includes(filter.toLowerCase())
+      }
+      onRenderRow={(server, idx) => (
+        <ServerRow
+          id={`server-${idx}`}
+          url={server.url}
+          editing={editable}
+          description={server.description}
+          onRename={() => {}}
+          onRemove={() => {}}
+        />
+      )}
       onAdd={function (): void {
         throw new Error("Function not implemented.");
       }}
-      onRename={function (id: string): void {
-        throw new Error("Function not implemented.");
-      }}
-      onRemove={function (id: string): void {
-        throw new Error("Function not implemented.");
-      }}
       onRemoveAll={function (): void {
         throw new Error("Function not implemented.");
       }}
diff --git a/packages/ui/src/documentDesigner/TagDefinitions.tsx b/packages/ui/src/documentDesigner/TagDefinitions.tsx
index b733e04..4c231b7 100644
--- a/packages/ui/src/documentDesigner/TagDefinitions.tsx
+++ b/packages/ui/src/documentDesigner/TagDefinitions.tsx
@@ -1,6 +1,4 @@
 import {
-  Button,
-  DataList,
   DataListAction,
   DataListCell,
   DataListItem,
@@ -9,107 +7,46 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  Label,
   MenuToggle,
-  Panel,
-  PanelHeader,
-  PanelMain,
-  PanelMainBody,
-  SearchInput,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  AddCircleOIcon,
-  EllipsisVIcon,
-  TagIcon,
-  TrashIcon,
-} from "@patternfly/react-icons";
+import { EllipsisVIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { Markdown } from "../components/Markdown.tsx";
 import {
   useMachineActorRef,
   useMachineSelector,
 } from "./DocumentDesignerMachineContext.ts";
+import { SearchableTable } from "../components/SearchableTable.tsx";
+import { InlineEdit } from "../components/InlineEdit.tsx";
 
 export function TagDefinitions() {
-  const { tags } = useMachineSelector(({ context }) => {
+  const { tags, editable } = useMachineSelector(({ context }) => {
     return {
       tags: context.tags,
+      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
-  const [filter, setFilter] = useState("");
-  const filteredTags = tags.filter(
-    (tag) =>
-      tag.name.toLowerCase().includes(filter.toLowerCase()) ||
-      tag.description.toLowerCase().includes(filter.toLowerCase())
-  );
   return (
-    <Panel>
-      {tags.length > 10 && (
-        <PanelHeader>
-          <Toolbar>
-            <ToolbarContent>
-              <ToolbarItem>
-                <SearchInput
-                  aria-label="Search for any tag..."
-                  placeholder="Search for any tag..."
-                  value={filter}
-                  onChange={(_, v) => setFilter(v)}
-                />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button variant="primary" icon={<AddCircleOIcon />}>
-                  Add a tag
-                </Button>
-              </ToolbarItem>
-              <ToolbarItem variant="separator" />
-              <ToolbarItem>
-                <Button variant="link" icon={<TrashIcon />}>
-                  Remove all tags
-                </Button>
-              </ToolbarItem>
-            </ToolbarContent>
-          </Toolbar>
-        </PanelHeader>
+    <SearchableTable
+      data={tags}
+      label={"tag"}
+      editing={editable}
+      onAdd={() => {}}
+      onFilter={(tag, filter) =>
+        tag.name.toLowerCase().includes(filter.toLowerCase()) ||
+        tag.description.toLowerCase().includes(filter.toLowerCase())
+      }
+      onRenderRow={(tag, idx) => (
+        <Tag
+          id={`tag-${idx}`}
+          name={tag.name}
+          description={tag.description}
+          editing={editable}
+        />
       )}
-      <PanelMain>
-        {filteredTags.length > 0 && (
-          <DataList aria-label="Tag definitions" isCompact>
-            {filteredTags.map((t, idx) => {
-              const id = `tag-${idx}`;
-              return (
-                <Tag
-                  key={idx}
-                  id={id}
-                  name={t.name}
-                  description={t.description}
-                />
-              );
-            })}
-          </DataList>
-        )}
-        {filteredTags.length === 0 && filter.length > 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"}>
-              <EmptyStateBody>
-                No tags were found that meet the search criteria.
-              </EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"} onClick={() => setFilter("")}>
-                  Reset search
-                </Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-      </PanelMain>
-    </Panel>
+      onRemoveAll={() => {}}
+    />
   );
 }
 
@@ -117,10 +54,12 @@ function Tag({
   id,
   name,
   description,
+  editing,
 }: {
   id: string;
   name: string;
   description: string;
+  editing: boolean;
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const toggleMenu = () => setIsMenuOpen((v) => !v);
@@ -130,42 +69,44 @@ function Tag({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="name" width={2}>
-              <Label icon={<TagIcon />}>
-                <span id={id}>{name}</span>
-              </Label>
+              <span id={id} className={"pf-v6-u-font-weight-bold"}>
+                <InlineEdit value={name} editing={editing} />
+              </span>
             </DataListCell>,
             <DataListCell key="description" width={5}>
-              <Markdown>{description}</Markdown>
+              <Markdown editing={editing}>{description}</Markdown>
             </DataListCell>,
           ]}
         />
-        <DataListAction
-          aria-labelledby={`${id}-actions`}
-          id={`${id}-actions`}
-          aria-label="Actions"
-        >
-          <Dropdown
-            popperProps={{ position: "right" }}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                isExpanded={isMenuOpen}
-                onClick={toggleMenu}
-                variant="plain"
-                aria-label="Tag actions"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-            isOpen={isMenuOpen}
-            onOpenChange={(isOpen: boolean) => setIsMenuOpen(isOpen)}
+        {editing && (
+          <DataListAction
+            aria-labelledby={`${id}-actions`}
+            id={`${id}-actions`}
+            aria-label="Actions"
           >
-            <DropdownList>
-              <DropdownItem key="Rename">Rename</DropdownItem>
-              <DropdownItem key="Delete">Delete</DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        </DataListAction>
+            <Dropdown
+              popperProps={{ position: "right" }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isMenuOpen}
+                  onClick={toggleMenu}
+                  variant="plain"
+                  aria-label="Tag actions"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+              isOpen={isMenuOpen}
+              onOpenChange={(isOpen: boolean) => setIsMenuOpen(isOpen)}
+            >
+              <DropdownList>
+                <DropdownItem key="Rename">Rename</DropdownItem>
+                <DropdownItem key="Delete">Delete</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </DataListAction>
+        )}
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/packages/ui/src/pathDesigner/Info.tsx b/packages/ui/src/pathDesigner/Info.tsx
index 230c5e1..d96ab33 100644
--- a/packages/ui/src/pathDesigner/Info.tsx
+++ b/packages/ui/src/pathDesigner/Info.tsx
@@ -11,12 +11,15 @@ import {
 } from "./PathDesignerMachineContext.ts";
 
 export function Info() {
-  const { summary, description } = useMachineSelector(({ context }) => {
-    return {
-      summary: context.summary,
-      description: context.description,
-    };
-  });
+  const { summary, description, editable } = useMachineSelector(
+    ({ context }) => {
+      return {
+        summary: context.summary,
+        description: context.description,
+        editable: context.editable,
+      };
+    }
+  );
   const actorRef = useMachineActorRef();
   return (
     <DescriptionList isHorizontal={true}>
@@ -28,6 +31,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_SUMMARY", summary });
             }}
             value={summary}
+            editing={editable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>
@@ -39,6 +43,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_DESCRIPTION", description });
             }}
             value={description}
+            editing={editable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>
diff --git a/packages/ui/src/pathDesigner/PathDesignerMachine.ts b/packages/ui/src/pathDesigner/PathDesignerMachine.ts
index d4982fa..823a1bd 100644
--- a/packages/ui/src/pathDesigner/PathDesignerMachine.ts
+++ b/packages/ui/src/pathDesigner/PathDesignerMachine.ts
@@ -3,6 +3,7 @@ import { DocumentPath, NodePath } from "../OpenApiEditorModels";
 
 type Context = DocumentPath & {
   path: NodePath;
+  editable: boolean;
   parentRef: ParentActor;
 };
 
@@ -30,6 +31,7 @@ export const PathDesignerMachine = setup({
     events: {} as Events,
     input: {} as {
       path: NodePath;
+      editable: boolean;
       parentRef: ParentActor;
     },
   },
diff --git a/packages/ui/src/pathDesigner/Servers.tsx b/packages/ui/src/pathDesigner/Servers.tsx
index cc8cf7c..cd13d2b 100644
--- a/packages/ui/src/pathDesigner/Servers.tsx
+++ b/packages/ui/src/pathDesigner/Servers.tsx
@@ -1,4 +1,4 @@
-import { ServersTable } from "../components/ServersTable.tsx";
+import { SearchableTable } from "../components/SearchableTable.tsx";
 import {
   useMachineActorRef,
   useMachineSelector,
@@ -12,8 +12,8 @@ export function Servers() {
   });
   const actorRef = useMachineActorRef();
   return (
-    <ServersTable
-      servers={servers}
+    <SearchableTable
+      data={servers}
       onAdd={function (): void {
         throw new Error("Function not implemented.");
       }}
diff --git a/packages/ui/src/responseDesigner/Info.tsx b/packages/ui/src/responseDesigner/Info.tsx
index 5b88d14..b039cad 100644
--- a/packages/ui/src/responseDesigner/Info.tsx
+++ b/packages/ui/src/responseDesigner/Info.tsx
@@ -11,9 +11,10 @@ import {
 } from "./ResponseDesignerMachineContext.ts";
 
 export function Info() {
-  const { description } = useMachineSelector(({ context }) => {
+  const { description, editable } = useMachineSelector(({ context }) => {
     return {
       description: context.description,
+      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
@@ -27,6 +28,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_DESCRIPTION", description });
             }}
             value={description}
+            editing={editable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>
diff --git a/packages/ui/src/responseDesigner/ResponseDesignerMachine.ts b/packages/ui/src/responseDesigner/ResponseDesignerMachine.ts
index 219e134..3ad1c8f 100644
--- a/packages/ui/src/responseDesigner/ResponseDesignerMachine.ts
+++ b/packages/ui/src/responseDesigner/ResponseDesignerMachine.ts
@@ -7,6 +7,7 @@ import {
 
 type Context = DocumentPath & {
   response: NodeResponse;
+  editable: boolean;
   parentRef: ParentActor;
 };
 
@@ -30,6 +31,7 @@ export const ResponseDesignerMachine = setup({
     events: {} as Events,
     input: {} as {
       response: NodeResponse;
+      editable: boolean;
       parentRef: ParentActor;
     },
   },