Improve legibility on design view

Apicurio · Nov 20, 2024 · 65574ba · 65574ba
1 parent 49a76f4
commit 65574ba
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 208 deletions.
diff --git 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
@@ -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
@@ -1,11 +1,14 @@
 import {
+  Button,
   ClipboardCopy,
   ClipboardCopyButton,
   CodeBlock,
   CodeBlockAction,
   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
@@ -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
@@ -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
@@ -55,6 +55,7 @@ export function SourceEditor({
 
   useEffect(() => {
     setCode(source);
+    editorRef.current?.setValue(source ?? "");
   }, [source]);
 
   const onEditorDidMount: CodeEditorProps["onEditorDidMount"] = (e) => {