Skip to content

Commit

Permalink
Changes to support the new view modes
Browse files Browse the repository at this point in the history
  • Loading branch information
@riccardo-forina
riccardo-forina committed Nov 20, 2024
1 parent fd1f090 commit 49a76f4
Show file tree
Hide file tree
Showing 21 changed files with 507 additions and 608 deletions.
182 changes: 95 additions & 87 deletions packages/ui/src/OpenApiEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -281,7 +288,7 @@ function Editor() {
canGoBack={selectedNode.type !== "root"}
/>
<Drawer
isExpanded={true}
isExpanded={showNavigation}
isInline={true}
position={"start"}
className={`apicurio-editor ${classes.editor}`}
Expand All @@ -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
Expand Down
31 changes: 26 additions & 5 deletions packages/ui/src/OpenApiEditorMachine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -35,6 +36,12 @@ type Events =
| {
readonly type: "xstate.init";
}
| {
readonly type: "SHOW_NAVIGATION";
}
| {
readonly type: "HIDE_NAVIGATION";
}
| {
readonly type: "FILTER";
readonly filter: string;
Expand Down Expand Up @@ -185,6 +192,7 @@ export const OpenApiEditorMachine = setup({
type: "root",
},
view: "visualize",
showNavigation: false,
},
initial: "viewChanged",
states: {
Expand All @@ -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;
Expand All @@ -222,20 +230,23 @@ export const OpenApiEditorMachine = setup({
input: {
parentRef: self,
path: context.selectedNode,
editable: context.view === "design",
},
});
case "datatype":
return spawn("dataTypeDesigner", {
input: {
parentRef: self,
dataType: context.selectedNode,
editable: context.view === "design",
},
});
case "response":
return spawn("responseDesigner", {
input: {
parentRef: self,
response: context.selectedNode,
editable: context.view === "design",
},
});
}
Expand Down Expand Up @@ -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",
}),
],
Expand Down Expand Up @@ -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,
}),
},
},
});
13 changes: 0 additions & 13 deletions packages/ui/src/components/EditorSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -32,12 +31,6 @@ export function EditorSidebar() {

return (
<>
<PageSection
stickyOnBreakpoint={{ default: "top" }}
style={{ boxShadow: "none" }}
>
<OmniSearch />
</PageSection>
<PageSection>
{(() => {
switch (isFiltering) {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
26 changes: 16 additions & 10 deletions packages/ui/src/components/EditorToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 49a76f4

Please sign in to comment.