fix: Key form name field, add max length validation and fix css issue (…

…#898) * fix: Key form name field, add max length validation and fix css issue * fix: headers in detail pages --------- Co-authored-by: Oleksandr Raspopov <[email protected]>
0xPolygonID · Jan 27, 2025 · 447ba8e · 447ba8e
1 parent b8cc99f
commit 447ba8e
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 11 deletions.
diff --git a/ui/src/components/display-methods/DisplayMethodDetails.tsx b/ui/src/components/display-methods/DisplayMethodDetails.tsx
@@ -208,7 +208,14 @@ export function DisplayMethodDetails() {
         layout="vertical"
         onFinish={handleEdit}
       >
-        <Form.Item label="Name" name="name" rules={[{ message: VALUE_REQUIRED, required: true }]}>
+        <Form.Item
+          label="Name"
+          name="name"
+          rules={[
+            { message: VALUE_REQUIRED, required: true },
+            { max: 60, message: "Name cannot be longer than 60 characters" },
+          ]}
+        >
           <Input placeholder="Enter name" />
         </Form.Item>
 
@@ -229,7 +236,16 @@ export function DisplayMethodDetails() {
 
   const cardTitle = isAsyncTaskDataAvailable(displayMethod) && (
     <Flex align="center" gap={8} justify="space-between">
-      <Typography.Text style={{ fontWeight: 600 }}>{displayMethod.data.name}</Typography.Text>
+      <Typography.Text
+        style={{
+          fontWeight: 600,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {displayMethod.data.name}
+      </Typography.Text>
       <Flex gap={8}>
         <Button
           icon={<EditIcon />}

diff --git a/ui/src/components/display-methods/DisplayMethodForm.tsx b/ui/src/components/display-methods/DisplayMethodForm.tsx
@@ -57,7 +57,10 @@ export function DisplayMethodForm({
               <Form.Item
                 label="Name"
                 name="name"
-                rules={[{ message: VALUE_REQUIRED, required: true }]}
+                rules={[
+                  { message: VALUE_REQUIRED, required: true },
+                  { max: 60, message: "Name cannot be longer than 60 characters" },
+                ]}
               >
                 <Input placeholder="Enter name" />
               </Form.Item>

diff --git a/ui/src/components/identities/Identity.tsx b/ui/src/components/identities/Identity.tsx
@@ -118,7 +118,14 @@ export function Identity() {
                 className="centered"
                 title={
                   <Flex align="center" gap={8} justify="space-between">
-                    <Typography.Text style={{ fontWeight: 600 }}>
+                    <Typography.Text
+                      style={{
+                        fontWeight: 600,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
                       {identity.data.displayName}
                     </Typography.Text>
                     <Flex gap={8}>
@@ -174,7 +181,10 @@ export function Identity() {
                 >
                   <Form.Item
                     name="displayName"
-                    rules={[{ message: VALUE_REQUIRED, required: true }]}
+                    rules={[
+                      { message: VALUE_REQUIRED, required: true },
+                      { max: 60, message: "Name cannot be longer than 60 characters" },
+                    ]}
                   >
                     <Input placeholder="Enter name" />
                   </Form.Item>

diff --git a/ui/src/components/identities/IdentityForm.tsx b/ui/src/components/identities/IdentityForm.tsx
@@ -169,7 +169,10 @@ export function IdentityForm({
               <Form.Item
                 label="Identity name"
                 name="displayName"
-                rules={[{ message: VALUE_REQUIRED, required: true }]}
+                rules={[
+                  { message: VALUE_REQUIRED, required: true },
+                  { max: 60, message: "Name cannot be longer than 60 characters" },
+                ]}
               >
                 <Input placeholder="Enter name" />
               </Form.Item>

diff --git a/ui/src/components/keys/CreateKey.tsx b/ui/src/components/keys/CreateKey.tsx
@@ -52,7 +52,10 @@ export function CreateKey() {
             <Form.Item
               label="Key name"
               name="name"
-              rules={[{ message: VALUE_REQUIRED, required: true }]}
+              rules={[
+                { message: VALUE_REQUIRED, required: true },
+                { max: 60, message: "Name cannot be longer than 60 characters" },
+              ]}
             >
               <Input placeholder="Enter name" />
             </Form.Item>

diff --git a/ui/src/components/keys/Key.tsx b/ui/src/components/keys/Key.tsx
@@ -142,7 +142,16 @@ export function Key() {
                 className="centered"
                 title={
                   <Flex align="center" gap={8} justify="space-between">
-                    <Typography.Text style={{ fontWeight: 600 }}>{key.data.name}</Typography.Text>
+                    <Typography.Text
+                      style={{
+                        fontWeight: 600,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {key.data.name}
+                    </Typography.Text>
                     <Flex gap={8}>
                       <Button
                         icon={<EditIcon />}
@@ -207,7 +216,10 @@ export function Key() {
                   <Form.Item
                     label="Name"
                     name="name"
-                    rules={[{ message: VALUE_REQUIRED, required: true }]}
+                    rules={[
+                      { message: VALUE_REQUIRED, required: true },
+                      { max: 60, message: "Name cannot be longer than 60 characters" },
+                    ]}
                   >
                     <Input placeholder="Enter name" />
                   </Form.Item>

diff --git a/ui/src/components/payments/PaymentOption.tsx b/ui/src/components/payments/PaymentOption.tsx
@@ -142,7 +142,14 @@ export function PaymentOption() {
                 className="centered"
                 title={
                   <Flex align="center" gap={8} justify="space-between">
-                    <Typography.Text style={{ fontWeight: 600 }}>
+                    <Typography.Text
+                      style={{
+                        fontWeight: 600,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
                       {paymentOption.data.name}
                     </Typography.Text>
                     <Flex gap={8}>

diff --git a/ui/src/components/payments/PaymentOptionForm.tsx b/ui/src/components/payments/PaymentOptionForm.tsx
@@ -280,7 +280,10 @@ export function PaymentOptionForm({
                 <Form.Item
                   label="Name"
                   name="name"
-                  rules={[{ message: VALUE_REQUIRED, required: true }]}
+                  rules={[
+                    { message: VALUE_REQUIRED, required: true },
+                    { max: 60, message: "Name cannot be longer than 60 characters" },
+                  ]}
                 >
                   <Input placeholder="Enter name" />
                 </Form.Item>