From b6b7172817ecbdab8ea9e092789342c8ecdd4b70 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 22 Aug 2023 15:15:08 +0700 Subject: [PATCH 1/5] feat: schema actions on contract detail --- CHANGELOG.md | 1 + .../json-schema/EditSchemaButtons.tsx | 40 ++++++ .../json-schema/JsonSchemaDrawer.tsx | 6 +- .../components/json-schema/UploadTemplate.tsx | 6 +- src/lib/components/json-schema/index.ts | 1 + .../json-schema/CodeSchemaSection.tsx | 31 ++--- .../components/CommandSection.tsx | 117 +++++++++++++----- src/lib/pages/contract-details/index.tsx | 6 +- src/lib/stores/schema.test.ts | 11 +- src/lib/stores/schema.ts | 9 +- 10 files changed, 170 insertions(+), 58 deletions(-) create mode 100644 src/lib/components/json-schema/EditSchemaButtons.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bf10baea..ca400f340 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#492](https://github.com/alleslabs/celatone-frontend/pull/492) Add jsonschema actions on contract detail page - [#486](https://github.com/alleslabs/celatone-frontend/pull/486) Switch to schema tab when available and prefill,expand,and scroll to the prefill msg - [#482](https://github.com/alleslabs/celatone-frontend/pull/482) Add json schema functionality to query page - [#477](https://github.com/alleslabs/celatone-frontend/pull/477) Add json schema section on code detail page diff --git a/src/lib/components/json-schema/EditSchemaButtons.tsx b/src/lib/components/json-schema/EditSchemaButtons.tsx new file mode 100644 index 000000000..8809c68e3 --- /dev/null +++ b/src/lib/components/json-schema/EditSchemaButtons.tsx @@ -0,0 +1,40 @@ +import { Button, Flex } from "@chakra-ui/react"; + +import { CustomIcon } from "../icon"; +import { RemoveSchemaModal } from "../modal/RemoveSchemaModal"; + +interface EditSchemaButtonsProps { + codeId: number; + codeHash: string; + openDrawer: () => void; +} + +export const EditSchemaButtons = ({ + codeId, + codeHash, + openDrawer, +}: EditSchemaButtonsProps) => ( + + + } + > + Delete Schema + + } + /> + +); diff --git a/src/lib/components/json-schema/JsonSchemaDrawer.tsx b/src/lib/components/json-schema/JsonSchemaDrawer.tsx index 968ef4b75..5e7beab85 100644 --- a/src/lib/components/json-schema/JsonSchemaDrawer.tsx +++ b/src/lib/components/json-schema/JsonSchemaDrawer.tsx @@ -59,7 +59,11 @@ export const JsonSchemaDrawer = ({ JSON schemas, they will be visible and accessible to others. - + diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx index 20e78b0cd..f7578b76c 100644 --- a/src/lib/components/json-schema/UploadTemplate.tsx +++ b/src/lib/components/json-schema/UploadTemplate.tsx @@ -170,11 +170,13 @@ const MethodRender = ({ interface UploadTemplateInterface { codeHash: string; + codeId: string; closeDrawer: () => void; } export const UploadTemplate = ({ codeHash, + codeId, closeDrawer, }: UploadTemplateInterface) => { const { saveNewSchema } = useSchemaStore(); @@ -224,11 +226,11 @@ export const UploadTemplate = ({ error: schemaValidateError, }); } - saveNewSchema(codeHash, JSON.parse(schemaString)); + saveNewSchema(codeHash, codeId, JSON.parse(schemaString)); setUrlLoading(false); closeDrawer(); return dispatchJsonState({ type: ActionType.RESET, method }); - }, [codeHash, method, jsonState, closeDrawer, saveNewSchema]); + }, [closeDrawer, codeHash, codeId, jsonState, method, saveNewSchema]); const disabledState = useMemo(() => { const methodSchemaString = jsonState[method].schemaString; diff --git a/src/lib/components/json-schema/index.ts b/src/lib/components/json-schema/index.ts index 8f6de4766..b5df2cc67 100644 --- a/src/lib/components/json-schema/index.ts +++ b/src/lib/components/json-schema/index.ts @@ -1,5 +1,6 @@ export * from "./form"; export * from "./AttachSchemaCard"; +export * from "./EditSchemaButtons"; export * from "./JsonSchemaDrawer"; export * from "./UploadTemplate"; export * from "./ViewSchemaButton"; diff --git a/src/lib/pages/code-details/components/json-schema/CodeSchemaSection.tsx b/src/lib/pages/code-details/components/json-schema/CodeSchemaSection.tsx index 040d9b049..15ac96183 100644 --- a/src/lib/pages/code-details/components/json-schema/CodeSchemaSection.tsx +++ b/src/lib/pages/code-details/components/json-schema/CodeSchemaSection.tsx @@ -1,5 +1,4 @@ import { - Button, chakra, Flex, Heading, @@ -14,9 +13,11 @@ import { capitalize } from "lodash"; import { CustomTab } from "lib/components/CustomTab"; import { CustomIcon } from "lib/components/icon"; -import { JsonSchemaDrawer } from "lib/components/json-schema"; +import { + JsonSchemaDrawer, + EditSchemaButtons, +} from "lib/components/json-schema"; import { Loading } from "lib/components/Loading"; -import { RemoveSchemaModal } from "lib/components/modal/RemoveSchemaModal"; import type { CodeSchema } from "lib/stores/schema"; import { SchemaProperties } from "lib/stores/schema"; import type { Option } from "lib/types"; @@ -67,25 +68,11 @@ export const CodeSchemaSection = ({ JSON Schema {!!jsonSchema && ( - - - - - - } - /> - + )} { +export const CommandSection = ({ + contractAddress, + codeHash, + codeId, +}: CommandSectionProps) => { const navigate = useInternalNavigate(); + const { isOpen, onClose, onOpen } = useDisclosure(); + + const { getSchemaByCodeHash } = useSchemaStore(); + const attached = !!getSchemaByCodeHash(codeHash); const { isFetching: isQueryCmdsFetching, queryCmds } = useQueryCmds(contractAddress); - const { isFetching: isExecuteCmdsFetching, execCmds } = useExecuteCmds(contractAddress); @@ -66,35 +91,71 @@ export const CommandSection = ({ contractAddress }: CommandSectionProps) => { }; return ( - - - - Query Shortcuts - - {renderCmds(isQueryCmdsFetching, queryCmds, "query")} + + + + Available command shortcuts + + {attached ? ( + + + + Attached JSON Schema + + + + ) : ( + + + + )} - - Execute Shortcuts - - {renderCmds(isExecuteCmdsFetching, execCmds, "execute")} + + + Query Shortcuts + + {renderCmds(isQueryCmdsFetching, queryCmds, "query")} + + + + Execute Shortcuts + + {renderCmds(isExecuteCmdsFetching, execCmds, "execute")} + + ); }; diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx index da5030834..f4d37ad08 100644 --- a/src/lib/pages/contract-details/index.tsx +++ b/src/lib/pages/contract-details/index.tsx @@ -63,7 +63,11 @@ const ContractDetailsBody = observer( {/* Contract Description Section */} {/* Query/Execute commands section */} - + {/* Instantiate/Contract Info Section */} { schemaStore = new SchemaStore(); }); beforeEach(() => { - schemaStore.saveNewSchema(codeHash, exampleSchema); + schemaStore.saveNewSchema(codeHash, codeId, exampleSchema); }); describe("SchemaStore initialization", () => { @@ -77,6 +81,9 @@ describe("getSchemaProperty", () => { expect( schemaStore.getSchemaProperty(codeHash, SchemaProperties.RESPONSES) ).toStrictEqual(exampleSchema.responses); + expect( + schemaStore.getSchemaProperty(codeHash, SchemaProperties.ATTACHED_CODE_ID) + ).toStrictEqual(exampleSchema.attached_code_id); }); test("correctly retrieve schema property from uppercase code hash", () => { diff --git a/src/lib/stores/schema.ts b/src/lib/stores/schema.ts index dd695ab1f..3de4e6890 100644 --- a/src/lib/stores/schema.ts +++ b/src/lib/stores/schema.ts @@ -14,6 +14,7 @@ export enum SchemaProperties { MIGRATE = "migrate", SUDO = "sudo", RESPONSES = "responses", + ATTACHED_CODE_ID = "attached_code_id", } type NullableJsonSchema = JsonSchema | null; @@ -35,6 +36,7 @@ export interface CodeSchema { [SchemaProperties.MIGRATE]: NullableJsonSchema; [SchemaProperties.SUDO]: NullableJsonSchema; [SchemaProperties.RESPONSES]: { [key: string]: JsonSchema }; + [SchemaProperties.ATTACHED_CODE_ID]: string; } export type QuerySchema = Array<[QueryExecuteSchema, JsonSchema]>; @@ -68,8 +70,11 @@ export class SchemaStore { }); } - saveNewSchema(codeHash: string, schema: CodeSchema) { - this.jsonSchemas[normalize(codeHash)] = schema; + saveNewSchema(codeHash: string, codeId: string, schema: CodeSchema) { + this.jsonSchemas[normalize(codeHash)] = { + ...schema, + [SchemaProperties.ATTACHED_CODE_ID]: codeId, + }; } deleteSchema(codeHash: string) { From c7eabdddc8fef71d1b36645a47dd7a28cd1c8a2d Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 22 Aug 2023 15:43:01 +0700 Subject: [PATCH 2/5] fix: drawer --- .../json-schema/EditSchemaButtons.tsx | 8 +- .../json-schema/JsonSchemaDrawer.tsx | 7 +- .../components/CommandSection.tsx | 239 +++++++++--------- 3 files changed, 129 insertions(+), 125 deletions(-) diff --git a/src/lib/components/json-schema/EditSchemaButtons.tsx b/src/lib/components/json-schema/EditSchemaButtons.tsx index 8809c68e3..77d102813 100644 --- a/src/lib/components/json-schema/EditSchemaButtons.tsx +++ b/src/lib/components/json-schema/EditSchemaButtons.tsx @@ -17,8 +17,8 @@ export const EditSchemaButtons = ({ diff --git a/src/lib/components/json-schema/JsonSchemaDrawer.tsx b/src/lib/components/json-schema/JsonSchemaDrawer.tsx index 5e7beab85..bdc665866 100644 --- a/src/lib/components/json-schema/JsonSchemaDrawer.tsx +++ b/src/lib/components/json-schema/JsonSchemaDrawer.tsx @@ -28,7 +28,12 @@ export const JsonSchemaDrawer = ({ isOpen, onClose, }: JsonSchemaDrawerProps) => ( - + diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx index 60c007388..b38375f43 100644 --- a/src/lib/pages/contract-details/components/CommandSection.tsx +++ b/src/lib/pages/contract-details/components/CommandSection.tsx @@ -8,6 +8,7 @@ import { Text, useDisclosure, } from "@chakra-ui/react"; +import { observer } from "mobx-react-lite"; import { useInternalNavigate } from "lib/app-provider"; import { ContractCmdButton } from "lib/components/ContractCmdButton"; @@ -28,134 +29,132 @@ interface CommandSectionProps { codeId: number; } -export const CommandSection = ({ - contractAddress, - codeHash, - codeId, -}: CommandSectionProps) => { - const navigate = useInternalNavigate(); - const { isOpen, onClose, onOpen } = useDisclosure(); +export const CommandSection = observer( + ({ contractAddress, codeHash, codeId }: CommandSectionProps) => { + const navigate = useInternalNavigate(); + const { isOpen, onClose, onOpen } = useDisclosure(); - const { getSchemaByCodeHash } = useSchemaStore(); - const attached = !!getSchemaByCodeHash(codeHash); + const { getSchemaByCodeHash } = useSchemaStore(); + const attached = !!getSchemaByCodeHash(codeHash); - const { isFetching: isQueryCmdsFetching, queryCmds } = - useQueryCmds(contractAddress); - const { isFetching: isExecuteCmdsFetching, execCmds } = - useExecuteCmds(contractAddress); + const { isFetching: isQueryCmdsFetching, queryCmds } = + useQueryCmds(contractAddress); + const { isFetching: isExecuteCmdsFetching, execCmds } = + useExecuteCmds(contractAddress); - const renderCmds = ( - isFetching: boolean, - cmds: [string, string][], - type: string - ) => { - if (isFetching) { - return ; - } - if (cmds.length) { + const renderCmds = ( + isFetching: boolean, + cmds: [string, string][], + type: string + ) => { + if (isFetching) { + return ; + } + if (cmds.length) { + return ( + button": { + marginInlineStart: "0 !important", + marginInlineEnd: "1", + }, + }} + > + {cmds.sort().map(([cmd, msg]) => ( + { + navigate({ + pathname: `/${type}`, + query: { + contract: contractAddress, + msg: encode(jsonPrettify(msg)), + }, + }); + }} + /> + ))} + + ); + } return ( - button": { - marginInlineStart: "0 !important", - marginInlineEnd: "1", - }, - }} - > - {cmds.sort().map(([cmd, msg]) => ( - { - navigate({ - pathname: `/${type}`, - query: { - contract: contractAddress, - msg: encode(jsonPrettify(msg)), - }, - }); - }} - /> - ))} - + + No messages available + ); - } - return ( - - No messages available - - ); - }; + }; - return ( - - - - Available command shortcuts - - {attached ? ( - - - - Attached JSON Schema - - - - ) : ( - - - - )} - - - - - Query Shortcuts - - {renderCmds(isQueryCmdsFetching, queryCmds, "query")} + return ( + + + + Available command shortcuts + + {attached ? ( + + + + Attached JSON Schema + + + + ) : ( + + + + )} - - Execute Shortcuts - - {renderCmds(isExecuteCmdsFetching, execCmds, "execute")} + + + Query Shortcuts + + {renderCmds(isQueryCmdsFetching, queryCmds, "query")} + + + + Execute Shortcuts + + {renderCmds(isExecuteCmdsFetching, execCmds, "execute")} + + - - - ); -}; + ); + } +); From 23849cedaff66a40477c20bbd6b4d2ea9a0af9d2 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:10:20 +0700 Subject: [PATCH 3/5] fix: use Boolean --- src/lib/pages/contract-details/components/CommandSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx index b38375f43..7e5fc6ab6 100644 --- a/src/lib/pages/contract-details/components/CommandSection.tsx +++ b/src/lib/pages/contract-details/components/CommandSection.tsx @@ -35,7 +35,7 @@ export const CommandSection = observer( const { isOpen, onClose, onOpen } = useDisclosure(); const { getSchemaByCodeHash } = useSchemaStore(); - const attached = !!getSchemaByCodeHash(codeHash); + const attached = Boolean(getSchemaByCodeHash(codeHash)); const { isFetching: isQueryCmdsFetching, queryCmds } = useQueryCmds(contractAddress); From 43663de9285edf9d65acabb27a31192a5b21b425 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:33:43 +0700 Subject: [PATCH 4/5] fix: chevron color --- .../components/json-schema/form/widgets/SelectWidget.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx index 9972957b1..d9578ffda 100644 --- a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx +++ b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx @@ -148,7 +148,11 @@ const SelectWidget = (props: WidgetProps) => { chakraStyles={{ control: (provided) => ({ ...provided, - _disabled: { color: "text.main" }, + _disabled: undefined, + }), + dropdownIndicator: (provided, state) => ({ + ...provided, + color: state.isDisabled ? "gray.700" : undefined, }), option: (provided, state) => ({ ...provided, From 952e9359755c30d7e381eedb897b7478b8dd6b9b Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:37:00 +0700 Subject: [PATCH 5/5] fix: text --- src/lib/components/json-schema/form/widgets/SelectWidget.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx index d9578ffda..b2aca4957 100644 --- a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx +++ b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx @@ -148,7 +148,9 @@ const SelectWidget = (props: WidgetProps) => { chakraStyles={{ control: (provided) => ({ ...provided, - _disabled: undefined, + _disabled: { + color: "text.main", + }, }), dropdownIndicator: (provided, state) => ({ ...provided,