fix: enable display method selection for schemas with default values (#…

…886) Co-authored-by: Oleksandr Raspopov <[email protected]>
0xPolygonID · Jan 14, 2025 · 7af6801 · 7af6801
1 parent 83b4b45
commit 7af6801
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/ui/src/components/credentials/IssueCredentialForm.tsx b/ui/src/components/credentials/IssueCredentialForm.tsx
@@ -134,12 +134,17 @@ export function IssueCredentialForm({
 
   const [inputErrors, setInputErrors] = useState<InputErrors>();
 
-  const [refreshServiceChecked, setRefreshServiceChecked] = useState(
-    initialValues.refreshService.enabled
-  );
-  const [displayMethodChecked, setDisplayMethodChecked] = useState(
-    initialValues.displayMethod.enabled
-  );
+  const displayMethodChecked =
+    Form.useWatch<IssueCredentialFormData["displayMethod"]["enabled"]>(
+      ["displayMethod", "enabled"],
+      form
+    ) || initialValues.displayMethod.enabled;
+
+  const refreshServiceChecked =
+    Form.useWatch<IssueCredentialFormData["refreshService"]["enabled"]>(
+      ["refreshService", "enabled"],
+      form
+    ) || initialValues.refreshService.enabled;
 
   const isPositiveBigInt = (x: string) => {
     try {
@@ -329,16 +334,14 @@ export function IssueCredentialForm({
                   initialValues.credentialSubject || {}
                 ),
                 displayMethod: {
-                  enabled: initialValues.displayMethod.enabled,
+                  enabled: !!schemaDefaultDisplayMethod,
                   ...(schemaDefaultDisplayMethod
                     ? { type: schemaDefaultDisplayMethod.type, url: schemaDefaultDisplayMethod.url }
                     : { type: "", url: "" }),
                 },
               }
             : initialValues;
           form.setFieldsValue(initialValuesWithSchemaValues);
-          setRefreshServiceChecked(initialValues.refreshService.enabled);
-          setDisplayMethodChecked(initialValues.displayMethod.enabled);
         } else {
           if (!isAbortedError(response.error)) {
             setJsonSchema({ error: response.error, status: "failed" });
@@ -655,12 +658,7 @@ export function IssueCredentialForm({
                           noStyle
                           valuePropName="checked"
                         >
-                          <Checkbox
-                            checked={refreshServiceChecked}
-                            onChange={() => {
-                              setRefreshServiceChecked(!refreshServiceChecked);
-                            }}
-                          >
+                          <Checkbox checked={refreshServiceChecked}>
                             Refresh Service{" ("}
                             <Typography.Link
                               href="https://docs.privado.id/docs/category/refresh-service"
@@ -701,14 +699,7 @@ export function IssueCredentialForm({
                           noStyle
                           valuePropName="checked"
                         >
-                          <Checkbox
-                            checked={displayMethodChecked}
-                            onChange={() => {
-                              setDisplayMethodChecked(!displayMethodChecked);
-                            }}
-                          >
-                            Display Method
-                          </Checkbox>
+                          <Checkbox checked={displayMethodChecked}>Display Method</Checkbox>
                         </Form.Item>
                         <Form.Item hidden={!displayMethodChecked} name={["displayMethod", "url"]}>
                           <Select

diff --git a/ui/src/components/schemas/SchemaViewer.tsx b/ui/src/components/schemas/SchemaViewer.tsx
@@ -5,6 +5,7 @@ import { UpdateSchema } from "src/adapters/api/schemas";
 
 import ChevronDownIcon from "src/assets/icons/chevron-down.svg?react";
 import IconLink from "src/assets/icons/link-external-01.svg?react";
+import IconClose from "src/assets/icons/x.svg?react";
 import { JSONHighlighter } from "src/components/schemas/JSONHighlighter";
 import { SchemaTree } from "src/components/schemas/SchemaTree";
 import { DisplayMethod, Json, JsonLdType, JsonSchema } from "src/domain";
@@ -44,6 +45,10 @@ export function SchemaViewer({
     }
 )) {
   const [form] = Form.useForm<UpdateSchema>();
+  const selectedDisplayMethod = Form.useWatch<UpdateSchema["displayMethodID"]>(
+    "displayMethodID",
+    form
+  );
   const [jsonView, setJsonView] = useState<JsonView>("formatted");
 
   const {
@@ -73,7 +78,6 @@ export function SchemaViewer({
                 style={{ marginBottom: 0, width: "100%" }}
               >
                 <Select className="full-width" placeholder="Choose the default display method">
-                  <Select.Option value={null}>None</Select.Option>
                   {Object.values(displayMethods).map((displayMethods) => (
                     <Select.Option key={displayMethods.id} value={displayMethods.id}>
                       {displayMethods.name}
@@ -83,11 +87,21 @@ export function SchemaViewer({
               </Form.Item>
 
               <Button
-                disabled={!displayMethodID}
+                disabled={!selectedDisplayMethod}
+                icon={<IconClose />}
+                onClick={() => {
+                  onEdit({ ...form.getFieldsValue(), displayMethodID: null });
+                }}
+                style={{ flexShrink: 0 }}
+              />
+
+              <Button
+                disabled={!selectedDisplayMethod}
                 href={generatePath(ROUTES.displayMethodDetails.path, {
                   displayMethodID: displayMethodID ?? "",
                 })}
                 icon={<IconLink />}
+                style={{ flexShrink: 0 }}
                 target="_blank"
               />
             </Flex>