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) => (
+
+ }
+ onClick={openDrawer}
+ >
+ Reattach Schema
+
+ }
+ >
+ 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 && (
-
- }
- onClick={onOpen}
- >
- Reattach Schema
-
-
-
-
- }
- />
-
+
)}
{
+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 = ({
}
+ size="sm"
+ leftIcon={}
onClick={openDrawer}
>
Reattach Schema
@@ -29,8 +29,8 @@ export const EditSchemaButtons = ({
trigger={
}
+ size="sm"
+ leftIcon={}
>
Delete Schema
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,