From 65574ba8aa41b356963c4f8594feb4b9d023c218 Mon Sep 17 00:00:00 2001
From: Riccardo Forina <rforina@redhat.com>
Date: Wed, 20 Nov 2024 11:51:22 +0100
Subject: [PATCH] Improve legibility on design view

---
 .../ui/src/codeEditor/CodeEditorMachine.ts    |   2 +-
 packages/ui/src/components/InlineEdit.tsx     |   3 +-
 packages/ui/src/components/Markdown.tsx       |  59 +++---
 .../ui/src/components/SearchableTable.tsx     |   6 +-
 packages/ui/src/components/ServerRow.tsx      |  47 +----
 packages/ui/src/components/SourceEditor.tsx   |   1 +
 .../ui/src/dataTypeDesigner/Properties.tsx    | 180 ++++++++----------
 .../src/documentDesigner/SecurityScheme.tsx   |   7 +-
 packages/ui/src/documentDesigner/Servers.tsx  |   1 -
 .../src/documentDesigner/TagDefinitions.tsx   |  38 +---
 packages/ui/src/pathDesigner/Servers.tsx      |  25 ++-
 11 files changed, 161 insertions(+), 208 deletions(-)

diff --git a/packages/ui/src/codeEditor/CodeEditorMachine.ts b/packages/ui/src/codeEditor/CodeEditorMachine.ts
index 0a362c5..7f0aad9 100644
--- a/packages/ui/src/codeEditor/CodeEditorMachine.ts
+++ b/packages/ui/src/codeEditor/CodeEditorMachine.ts
@@ -90,7 +90,7 @@ export const CodeEditorMachine = setup({
     idle: {
       on: {
         DOCUMENT_CHANGED: {
-          target: "idle",
+          target: "loading",
           reenter: true,
         },
         CHANGE_SOURCE_TYPE: {
diff --git a/packages/ui/src/components/InlineEdit.tsx b/packages/ui/src/components/InlineEdit.tsx
index 3461327..f26b681 100644
--- a/packages/ui/src/components/InlineEdit.tsx
+++ b/packages/ui/src/components/InlineEdit.tsx
@@ -28,6 +28,7 @@ type ValidationResult = {
 
 interface IInlineEdit {
   value?: string;
+  label?: string;
   validator?: (value: string) => ValidationResult;
   onChange?: (value: string) => void;
   onClick?: () => void;
@@ -131,7 +132,7 @@ export const InlineEdit: FunctionComponent<IInlineEdit> = (props) => {
         </>
       ) : (
         <Form onSubmit={noop}>
-          <FormGroup type="text" fieldId="edit-value">
+          <FormGroup type="text" fieldId="edit-value" label={props.label}>
             <InputGroup>
               <InputGroupItem isFill>
                 <TextInput
diff --git a/packages/ui/src/components/Markdown.tsx b/packages/ui/src/components/Markdown.tsx
index ea464e7..71dbe05 100644
--- a/packages/ui/src/components/Markdown.tsx
+++ b/packages/ui/src/components/Markdown.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   ClipboardCopy,
   ClipboardCopyButton,
   CodeBlock,
@@ -6,6 +7,8 @@ import {
   CodeBlockCode,
   Content,
   ContentVariants,
+  Form,
+  FormGroup,
   List,
   ListComponent,
   ListItem,
@@ -22,15 +25,19 @@ import {
   Language,
 } from "@patternfly/react-code-editor";
 import { CheckIcon } from "@patternfly/react-icons";
-import { SectionSkeleton } from "./SectionSkeleton.tsx";
 import { useDarkMode } from "./isDarkMode.ts";
+import { noop } from "lodash";
 import IntrinsicElements = JSX.IntrinsicElements;
 
 export function Markdown({
   children,
+  label,
   editing = false,
+  onChange,
 }: {
   children: string;
+  label?: string;
+  onChange?: (value: string) => void;
   editing?: boolean;
 }) {
   const darkMode = useDarkMode();
@@ -55,27 +62,35 @@ export function Markdown({
       {children}
     </ReactMarkdown>
   ) : (
-    <CodeEditor
-      customControls={[
-        <CodeEditorControl
-          key={"save"}
-          icon={<CheckIcon />}
-          aria-label="Save changes"
-          tooltipProps={{ content: "Save changes" }}
-          onClick={() => {}}
-          // isDisabled={isDisabled || source === code}
-        />,
-      ]}
-      isLanguageLabelVisible={false}
-      isLineNumbersVisible={false}
-      // onChange={(code) => setCode(code)}
-      language={Language.markdown}
-      height={"sizeToFit"}
-      // onEditorDidMount={onEditorDidMount}
-      emptyState={<SectionSkeleton count={3} />}
-      isDarkTheme={darkMode}
-      code={children}
-    />
+    <Form onSubmit={noop}>
+      <FormGroup type="text" fieldId="edit-value" label={label}>
+        {children ? (
+          <CodeEditor
+            customControls={[
+              <CodeEditorControl
+                key={"save"}
+                icon={<CheckIcon />}
+                aria-label="Save changes"
+                tooltipProps={{ content: "Save changes" }}
+                onClick={() => {}}
+                // isDisabled={isDisabled || source === code}
+              />,
+            ]}
+            isLanguageLabelVisible={false}
+            isLineNumbersVisible={false}
+            // onChange={(code) => setCode(code)}
+            language={Language.markdown}
+            height={"sizeToFit"}
+            // onEditorDidMount={onEditorDidMount}
+            isDarkTheme={darkMode}
+            code={children}
+            onChange={onChange ?? (() => {})}
+          />
+        ) : (
+          <Button variant={"tertiary"}>Add a {label}</Button>
+        )}
+      </FormGroup>
+    </Form>
   );
 }
 
diff --git a/packages/ui/src/components/SearchableTable.tsx b/packages/ui/src/components/SearchableTable.tsx
index eb3bcaa..6e5823c 100644
--- a/packages/ui/src/components/SearchableTable.tsx
+++ b/packages/ui/src/components/SearchableTable.tsx
@@ -79,7 +79,11 @@ export function SearchableTable<T>({
       )}
       <PanelMain>
         {filteredData.length > 0 && (
-          <DataList aria-label="Servers" isCompact>
+          <DataList
+            aria-label="Servers"
+            isCompact={!editing}
+            gridBreakpoint={editing ? "always" : undefined}
+          >
             {filteredData.map((t, idx) => {
               return <Fragment key={idx}>{onRenderRow(t, idx)}</Fragment>;
             })}
diff --git a/packages/ui/src/components/ServerRow.tsx b/packages/ui/src/components/ServerRow.tsx
index c6f8c8a..1916306 100644
--- a/packages/ui/src/components/ServerRow.tsx
+++ b/packages/ui/src/components/ServerRow.tsx
@@ -1,45 +1,42 @@
-import { useState } from "react";
 import {
+  Button,
   DataListAction,
   DataListCell,
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle,
 } from "@patternfly/react-core";
 import { Markdown } from "./Markdown.tsx";
-import { EllipsisVIcon } from "@patternfly/react-icons";
+import { TrashIcon } from "@patternfly/react-icons";
+import { InlineEdit } from "./InlineEdit.tsx";
 
 export function ServerRow({
   id,
   url,
   description,
   editing,
-  onRename,
   onRemove,
 }: {
   id: string;
   url: string;
   description: string;
   editing: boolean;
-  onRename: () => void;
   onRemove: () => void;
 }) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const toggleMenu = () => setIsMenuOpen((v) => !v);
   return (
     <DataListItem aria-labelledby={id}>
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell key="url" width={2}>
-              <span id={id}>{url}</span>
+              <span id={id}>
+                <InlineEdit label={"Url"} value={url} editing={editing} />
+              </span>
             </DataListCell>,
             <DataListCell key="description" width={5}>
-              <Markdown>{description}</Markdown>
+              <Markdown label={"Description"} editing={editing}>
+                {description}
+              </Markdown>
             </DataListCell>,
           ]}
         />
@@ -49,31 +46,7 @@ export function ServerRow({
             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)}
-            >
-              <DropdownList>
-                <DropdownItem key="Rename" onClick={onRename}>
-                  Rename
-                </DropdownItem>
-                <DropdownItem key="Delete" onClick={onRemove}>
-                  Delete
-                </DropdownItem>
-              </DropdownList>
-            </Dropdown>
+            <Button icon={<TrashIcon />} variant={"control"} />
           </DataListAction>
         )}
       </DataListItemRow>
diff --git a/packages/ui/src/components/SourceEditor.tsx b/packages/ui/src/components/SourceEditor.tsx
index b673d87..bd11b8f 100644
--- a/packages/ui/src/components/SourceEditor.tsx
+++ b/packages/ui/src/components/SourceEditor.tsx
@@ -55,6 +55,7 @@ export function SourceEditor({
 
   useEffect(() => {
     setCode(source);
+    editorRef.current?.setValue(source ?? "");
   }, [source]);
 
   const onEditorDidMount: CodeEditorProps["onEditorDidMount"] = (e) => {
diff --git a/packages/ui/src/dataTypeDesigner/Properties.tsx b/packages/ui/src/dataTypeDesigner/Properties.tsx
index d43dd18..8b22d47 100644
--- a/packages/ui/src/dataTypeDesigner/Properties.tsx
+++ b/packages/ui/src/dataTypeDesigner/Properties.tsx
@@ -1,132 +1,102 @@
 import {
   Button,
-  DataList,
+  DataListAction,
   DataListCell,
-  DataListCheck,
   DataListContent,
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  MenuToggle,
-  MenuToggleCheckbox,
   Switch,
   Title,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
 } from "@patternfly/react-core";
 import { InlineEdit } from "../components/InlineEdit.tsx";
 import {
   useMachineActorRef,
   useMachineSelector,
 } from "./DataTypeDesignerMachineContext.ts";
-import { useState } from "react";
+import { Markdown } from "../components/Markdown.tsx";
+import { DataTypeProperty } from "../OpenApiEditorModels.ts";
+import { SearchableTable } from "../components/SearchableTable.tsx";
+import { TrashIcon } from "@patternfly/react-icons";
 
 export function Properties() {
-  const { properties } = useMachineSelector(({ context }) => {
+  const { properties, editable } = useMachineSelector(({ context }) => {
     return {
       properties: context.properties,
+      editable: context.editable,
     };
   });
-  const [enableInlineEditing, setEnableInlineEditing] = useState(false);
   const actorRef = useMachineActorRef();
   return (
-    <>
-      <Toolbar>
-        <ToolbarContent>
-          <ToolbarItem>
-            <MenuToggle
-              splitButtonItems={[
-                <MenuToggleCheckbox
-                  id="split-button-checkbox-with-text-example"
-                  key="split-checkbox-with-text"
-                  aria-label="Select all"
-                >
-                  0 selected
-                </MenuToggleCheckbox>,
-              ]}
-              aria-label="Menu toggle with checkbox split button and text"
-            />
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button>Add property</Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button variant={"danger"} isDisabled={true}>
-              Remove selected
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Switch
-              isChecked={enableInlineEditing}
-              onChange={(_, checked) => setEnableInlineEditing(checked)}
-              hasCheckIcon={false}
-              label={"Edit properties"}
-            />
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-      <DataList isCompact={true} aria-label={"Properties"}>
-        {properties.map((p, idx) => (
-          <DataListItem key={idx} aria-labelledby={`property-${idx}`}>
-            <DataListItemRow>
-              <DataListCheck
-                id={`property-check-${idx}`}
-                aria-labelledby={`property-${idx}`}
-                name={`property-check-${idx}-check`}
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell key={"name"} width={2}>
-                    <Title
-                      headingLevel={"h3"}
-                      size={"md"}
-                      id={`property-${idx}`}
-                    >
-                      <InlineEdit
-                        onChange={(newName) => {
-                          actorRef.send({
-                            type: "CHANGE_NAME",
-                            prevName: p.name,
-                            newName,
-                          });
-                        }}
-                        value={p.name}
-                        editing={!enableInlineEditing}
-                      />
-                    </Title>
-                  </DataListCell>,
-                  <DataListCell key={"type"} width={4}>
-                    {p.type}
-                  </DataListCell>,
-                  <DataListCell width={1} key={"required"}>
-                    <Switch
-                      isChecked={p.required}
-                      hasCheckIcon={false}
-                      label={"Required"}
-                    />
-                  </DataListCell>,
-                ]}
-              />
-            </DataListItemRow>
-            {(p.description || enableInlineEditing) && (
-              <DataListContent aria-label={""} hasNoPadding={true}>
+    <SearchableTable
+      data={properties}
+      label={"property"}
+      editing={editable}
+      onFilter={(p, filter) =>
+        p.name.toLowerCase().includes(filter.toLowerCase()) ||
+        p.type.toLowerCase().includes(filter.toLowerCase())
+      }
+      onRenderRow={(p, idx) => <Property idx={idx} editing={editable} p={p} />}
+      onAdd={() => {}}
+      onRemoveAll={() => {}}
+    />
+  );
+}
+
+function Property({
+  idx,
+  editing,
+  p,
+}: {
+  idx: number;
+  editing: boolean;
+  p: DataTypeProperty;
+}) {
+  return (
+    <DataListItem aria-labelledby={`property-${idx}`}>
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key={"name"} width={2}>
+              <Title headingLevel={"h3"} size={"md"} id={`property-${idx}`}>
                 <InlineEdit
-                  onChange={(newName) => {
-                    actorRef.send({
-                      type: "CHANGE_DESCRIPTION",
-                      prevName: p.description,
-                      newName,
-                    });
-                  }}
-                  value={p.description}
-                  editing={!enableInlineEditing}
+                  label={"Name"}
+                  onChange={() => {}}
+                  value={p.name}
+                  editing={editing}
                 />
-              </DataListContent>
-            )}
-          </DataListItem>
-        ))}
-      </DataList>
-    </>
+              </Title>
+            </DataListCell>,
+            <DataListCell key={"type"} width={4}>
+              {p.type}
+            </DataListCell>,
+            <DataListCell width={1} key={"required"}>
+              <Switch
+                isChecked={p.required}
+                hasCheckIcon={false}
+                label={"Required"}
+                isDisabled={!editing}
+              />
+            </DataListCell>,
+          ]}
+        />
+        {editing && (
+          <DataListAction
+            aria-labelledby={`${idx}-actions`}
+            id={`${idx}-actions`}
+            aria-label="Actions"
+          >
+            <Button icon={<TrashIcon />} variant={"control"} />
+          </DataListAction>
+        )}
+      </DataListItemRow>
+      {(p.description || editing) && (
+        <DataListContent aria-label={""} hasNoPadding={true}>
+          <Markdown label={"Description"} onChange={() => {}} editing={editing}>
+            {p.description ?? ""}
+          </Markdown>
+        </DataListContent>
+      )}
+    </DataListItem>
   );
 }
diff --git a/packages/ui/src/documentDesigner/SecurityScheme.tsx b/packages/ui/src/documentDesigner/SecurityScheme.tsx
index 559b347..7fa0637 100644
--- a/packages/ui/src/documentDesigner/SecurityScheme.tsx
+++ b/packages/ui/src/documentDesigner/SecurityScheme.tsx
@@ -14,6 +14,7 @@ import { useState } from "react";
 import { Markdown } from "../components/Markdown.tsx";
 import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
 import { SearchableTable } from "../components/SearchableTable.tsx";
+import { InlineEdit } from "../components/InlineEdit.tsx";
 
 export function SecurityScheme() {
   const { securityScheme, editable } = useMachineSelector(({ context }) => {
@@ -64,10 +65,12 @@ function SecuritySchemeRow({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="name" width={2}>
-              <span id={id}>{name}</span>
+              <span id={id}>
+                <InlineEdit label={"Name"} value={name} />
+              </span>
             </DataListCell>,
             <DataListCell key="description" width={5}>
-              <Markdown>{description}</Markdown>
+              <Markdown label={"Description"}>{description}</Markdown>
             </DataListCell>,
           ]}
         />
diff --git a/packages/ui/src/documentDesigner/Servers.tsx b/packages/ui/src/documentDesigner/Servers.tsx
index 75de797..e1209c9 100644
--- a/packages/ui/src/documentDesigner/Servers.tsx
+++ b/packages/ui/src/documentDesigner/Servers.tsx
@@ -28,7 +28,6 @@ export function Servers() {
           url={server.url}
           editing={editable}
           description={server.description}
-          onRename={() => {}}
           onRemove={() => {}}
         />
       )}
diff --git a/packages/ui/src/documentDesigner/TagDefinitions.tsx b/packages/ui/src/documentDesigner/TagDefinitions.tsx
index 4c231b7..a2df328 100644
--- a/packages/ui/src/documentDesigner/TagDefinitions.tsx
+++ b/packages/ui/src/documentDesigner/TagDefinitions.tsx
@@ -1,16 +1,12 @@
 import {
+  Button,
   DataListAction,
   DataListCell,
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle,
 } from "@patternfly/react-core";
-import { EllipsisVIcon } from "@patternfly/react-icons";
-import { useState } from "react";
+import { TrashIcon } from "@patternfly/react-icons";
 import { Markdown } from "../components/Markdown.tsx";
 import {
   useMachineActorRef,
@@ -61,8 +57,6 @@ function Tag({
   description: string;
   editing: boolean;
 }) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const toggleMenu = () => setIsMenuOpen((v) => !v);
   return (
     <DataListItem aria-labelledby={id}>
       <DataListItemRow>
@@ -70,11 +64,13 @@ function Tag({
           dataListCells={[
             <DataListCell key="name" width={2}>
               <span id={id} className={"pf-v6-u-font-weight-bold"}>
-                <InlineEdit value={name} editing={editing} />
+                <InlineEdit value={name} editing={editing} label={"Name"} />
               </span>
             </DataListCell>,
             <DataListCell key="description" width={5}>
-              <Markdown editing={editing}>{description}</Markdown>
+              <Markdown label={"Description"} editing={editing}>
+                {description}
+              </Markdown>
             </DataListCell>,
           ]}
         />
@@ -84,27 +80,7 @@ function Tag({
             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)}
-            >
-              <DropdownList>
-                <DropdownItem key="Rename">Rename</DropdownItem>
-                <DropdownItem key="Delete">Delete</DropdownItem>
-              </DropdownList>
-            </Dropdown>
+            <Button icon={<TrashIcon />} variant={"control"} />
           </DataListAction>
         )}
       </DataListItemRow>
diff --git a/packages/ui/src/pathDesigner/Servers.tsx b/packages/ui/src/pathDesigner/Servers.tsx
index cd13d2b..1ce1505 100644
--- a/packages/ui/src/pathDesigner/Servers.tsx
+++ b/packages/ui/src/pathDesigner/Servers.tsx
@@ -3,26 +3,37 @@ import {
   useMachineActorRef,
   useMachineSelector,
 } from "./PathDesignerMachineContext.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 (
     <SearchableTable
+      label={"server"}
       data={servers}
+      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}
+          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.");
       }}