Merge pull request #492 from alleslabs/feat/attach-schema-contract

feat: schema actions on contract detail
alleslabs · Aug 22, 2023 · 122b657 · 122b657
2 parents 9cfe5e6 + 952e935
commit 122b657
Show file tree

Hide file tree

Showing 11 changed files with 236 additions and 114 deletions.
diff --git 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
 - [#483](https://github.com/alleslabs/celatone-frontend/pull/483) Add json schema functionality to execute page
 - [#482](https://github.com/alleslabs/celatone-frontend/pull/482) Add json schema functionality to query page

diff --git a/src/lib/components/json-schema/EditSchemaButtons.tsx 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) => (
+  <Flex gap={2}>
+    <Button
+      variant="outline-gray"
+      size="sm"
+      leftIcon={<CustomIcon name="edit" boxSize={3} />}
+      onClick={openDrawer}
+    >
+      Reattach Schema
+    </Button>
+    <RemoveSchemaModal
+      codeId={String(codeId)}
+      codeHash={codeHash}
+      trigger={
+        <Button
+          variant="outline-gray"
+          size="sm"
+          leftIcon={<CustomIcon name="delete" boxSize={3} />}
+        >
+          Delete Schema
+        </Button>
+      }
+    />
+  </Flex>
+);
diff --git 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) => (
-  <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+  <Drawer
+    isOpen={isOpen}
+    onClose={onClose}
+    placement="bottom"
+    returnFocusOnClose={false}
+  >
     <DrawerOverlay />
     <DrawerContent h="80%">
       <DrawerHeader>
@@ -59,7 +64,11 @@ export const JsonSchemaDrawer = ({
             JSON schemas, they will be visible and accessible to others.
           </Text>
         </Box>
-        <UploadTemplate closeDrawer={onClose} codeHash={codeHash} />
+        <UploadTemplate
+          codeHash={codeHash}
+          codeId={codeId}
+          closeDrawer={onClose}
+        />
       </DrawerBody>
     </DrawerContent>
   </Drawer>

diff --git 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/form/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
@@ -148,7 +148,13 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
         chakraStyles={{
           control: (provided) => ({
             ...provided,
-            _disabled: { color: "text.main" },
+            _disabled: {
+              color: "text.main",
+            },
+          }),
+          dropdownIndicator: (provided, state) => ({
+            ...provided,
+            color: state.isDisabled ? "gray.700" : undefined,
           }),
           option: (provided, state) => ({
             ...provided,

diff --git 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
@@ -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
         </Heading>
         {!!jsonSchema && (
-          <Flex gap={1}>
-            <Button
-              variant="outline-gray"
-              p="8px 6px"
-              leftIcon={<CustomIcon name="edit" boxSize={4} />}
-              onClick={onOpen}
-            >
-              Reattach Schema
-            </Button>
-            <RemoveSchemaModal
-              codeId={String(codeId)}
-              codeHash={codeHash}
-              trigger={
-                <Button variant="outline-gray" p={0}>
-                  <CustomIcon name="delete" boxSize={4} />
-                </Button>
-              }
-            />
-          </Flex>
+          <EditSchemaButtons
+            codeId={codeId}
+            codeHash={codeHash}
+            openDrawer={onOpen}
+          />
         )}
       </Flex>
       <Text