fix: UI issues (#893)

* fix: issue credential form placeholders * fix: display method card logo size * fix: update the issue display name when edit in sider menu --------- Co-authored-by: Oleksandr Raspopov <[email protected]>
0xPolygonID · Jan 21, 2025 · f3f513c · f3f513c
1 parent 249d5ae
commit f3f513c
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 11 deletions.
diff --git a/ui/src/adapters/api/identities.ts b/ui/src/adapters/api/identities.ts
@@ -36,7 +36,7 @@ export async function getIdentities({
   signal,
 }: {
   env: Env;
-  signal: AbortSignal;
+  signal?: AbortSignal;
 }): Promise<Response<List<Identity>>> {
   try {
     const response = await axios({

diff --git a/ui/src/adapters/parsers/view.ts b/ui/src/adapters/parsers/view.ts
@@ -201,7 +201,7 @@ export type IssueCredentialFormData = {
   credentialExpiration?: dayjs.Dayjs | null;
   credentialStatusType: CredentialStatusType | null;
   credentialSubject?: Record<string, unknown>;
-  displayMethod: { enabled: boolean; type: DisplayMethodType | ""; url: string };
+  displayMethod: { enabled: boolean; type: DisplayMethodType | ""; url: string | null };
   proofTypes: ProofType[];
   refreshService: { enabled: boolean; url: string };
   schemaID?: string;
@@ -215,7 +215,7 @@ const issueCredentialFormDataParser = getStrictParser<IssueCredentialFormData>()
     displayMethod: z.object({
       enabled: z.boolean(),
       type: z.union([z.nativeEnum(DisplayMethodType), z.literal("")]),
-      url: z.union([z.string().url(), z.literal("")]),
+      url: z.union([z.string().url().nullable(), z.literal("")]),
     }),
     proofTypes: z.array(z.nativeEnum(ProofType)).min(1, "At least one proof type is required"),
     refreshService: z.object({
@@ -253,7 +253,7 @@ export const credentialFormParser = getStrictParser<
 
       const baseIssuance = {
         credentialDisplayMethod:
-          displayMethod.enabled && displayMethod.type !== ""
+          displayMethod.enabled && displayMethod.type !== "" && displayMethod.url
             ? { type: displayMethod.type, url: displayMethod.url }
             : undefined,
         credentialExpiration: credentialExpiration ? credentialExpiration.toDate() : undefined,

diff --git a/ui/src/components/credentials/IssueCredential.tsx b/ui/src/components/credentials/IssueCredential.tsx
@@ -37,7 +37,7 @@ const defaultCredentialFormInput: CredentialFormInput = {
   },
   issueCredential: {
     credentialStatusType: null,
-    displayMethod: { enabled: false, type: "", url: "" },
+    displayMethod: { enabled: false, type: "", url: null },
     proofTypes: [ProofType.BJJSignature2021],
     refreshService: { enabled: false, url: "" },
   },

diff --git a/ui/src/components/credentials/IssueCredentialForm.tsx b/ui/src/components/credentials/IssueCredentialForm.tsx
@@ -337,7 +337,7 @@ export function IssueCredentialForm({
                   enabled: !!schemaDefaultDisplayMethod,
                   ...(schemaDefaultDisplayMethod
                     ? { type: schemaDefaultDisplayMethod.type, url: schemaDefaultDisplayMethod.url }
-                    : { type: "", url: "" }),
+                    : { type: "", url: null }),
                 },
               }
             : initialValues;
@@ -638,7 +638,7 @@ export function IssueCredentialForm({
                       <Select
                         className="full-width"
                         loading={isAsyncTaskStarting(credentialStatusTypes)}
-                        placeholder="Valid URL of the display method"
+                        placeholder="Choose revocation status"
                       >
                         {isAsyncTaskDataAvailable(credentialStatusTypes) &&
                           credentialStatusTypes.data.map((status) => (
@@ -705,7 +705,7 @@ export function IssueCredentialForm({
                           <Select
                             className="full-width"
                             loading={isAsyncTaskStarting(displayMethods)}
-                            placeholder="Valid URL of the display method"
+                            placeholder="Select display method"
                           >
                             {isAsyncTaskDataAvailable(displayMethods) &&
                               displayMethods.data.map(({ id, name, url }) => (

diff --git a/ui/src/components/display-methods/DisplayMethodCard.tsx b/ui/src/components/display-methods/DisplayMethodCard.tsx
@@ -80,7 +80,7 @@ export function DisplayMethodCard({ metadata }: { metadata: DisplayMethodMetadat
           alt={metadata.logo.alt}
           preview={false}
           src={processedLogoImageUrl.success ? processedLogoImageUrl.data : metadata.logo.uri}
-          style={{ fontSize, width: getEmSize(44) }}
+          style={{ fontSize, maxHeight: getEmSize(44), maxWidth: getEmSize(44) }}
         />
         <Flex vertical>
           <Typography.Text

diff --git a/ui/src/components/identities/Identity.tsx b/ui/src/components/identities/Identity.tsx
@@ -12,6 +12,7 @@ import { ErrorResult } from "src/components/shared/ErrorResult";
 import { LoadingResult } from "src/components/shared/LoadingResult";
 import { SiderLayoutContent } from "src/components/shared/SiderLayoutContent";
 import { useEnvContext } from "src/contexts/Env";
+import { useIdentityContext } from "src/contexts/Identity";
 import { AppError, IdentityDetails } from "src/domain";
 import { AsyncTask, hasAsyncTaskFailed, isAsyncTaskStarting } from "src/utils/async";
 import { isAbortedError, makeRequestAbortable } from "src/utils/browser";
@@ -20,6 +21,7 @@ import { formatIdentifier } from "src/utils/forms";
 
 export function Identity() {
   const env = useEnvContext();
+  const { fetchIdentities } = useIdentityContext();
   const [identity, setIdentity] = useState<AsyncTask<IdentityDetails, AppError>>({
     status: "pending",
   });
@@ -74,6 +76,7 @@ export function Identity() {
       if (response.success) {
         void fetchIdentity().then(() => {
           setIsEditModalOpen(false);
+          void fetchIdentities();
           void message.success("Identity edited successfully");
         });
       } else {

diff --git a/ui/src/contexts/Identity.tsx b/ui/src/contexts/Identity.tsx
@@ -31,7 +31,7 @@ import {
 } from "src/utils/constants";
 
 type IdentityState = {
-  fetchIdentities: (signal: AbortSignal) => void;
+  fetchIdentities: (signal?: AbortSignal) => void;
   getSelectedIdentity: () => Identity | undefined;
   identifier: string;
   identityList: AsyncTask<Identity[], AppError>;
@@ -61,7 +61,7 @@ export function IdentityProvider(props: PropsWithChildren) {
   const identifierParam = searchParams.get(IDENTIFIER_SEARCH_PARAM);
 
   const fetchIdentities = useCallback(
-    async (signal: AbortSignal) => {
+    async (signal?: AbortSignal) => {
       setIdentityList((previousState) =>
         isAsyncTaskDataAvailable(previousState)
           ? { data: previousState.data, status: "reloading" }