Public tags form improvements (blockscout#2796)

* adjust validation of comment field

* add icon url to public tag form

* update screenshots

* fix ts

Author: tom2drum

toolkit/components/forms/fields/image/FormFieldImagePreview.tsx

@@ -35,6 +35,7 @@ export const FormFieldImagePreview = chakra(React.memo(({
 
   return (
     <Image
+      key={ src }
       className={ className }
       src={ src }
       alt="Image preview"

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -124,11 +124,11 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
               required
               placeholder={
                 isMobile ?
-                  'Confirm the connection between addresses and tags.' :
-                  'Provide a comment to confirm the connection between addresses and tags.'
+                  'Confirm the connection between addresses and tags' :
+                  'Provide a comment to confirm the connection between addresses and tags (max 500 characters)'
               }
               maxH="160px"
-              rules={{ maxLength: 80 }}
+              rules={{ maxLength: 500 }}
               asComponent="Textarea"
               size="2xl"
             />

ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png

@@ -14,6 +14,7 @@ import { FormFieldUrl } from 'toolkit/components/forms/fields/FormFieldUrl';
 import { colorValidator } from 'toolkit/components/forms/validators/color';
 import EntityTag from 'ui/shared/EntityTags/EntityTag';
 
+import PublicTagsSubmitFieldTagIcon from './PublicTagsSubmitFieldTagIcon';
 import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
 
 const CIRCLE_BG_COLOR_DEFAULT = {
@@ -79,6 +80,9 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
             placeholder="Text (Hex)"
             sampleDefaultBgColor={ CIRCLE_BG_COLOR_DEFAULT.textColor }
           />
+          <GridItem colSpan={{ base: 1, lg: 4 }}>
+            <PublicTagsSubmitFieldTagIcon index={ index }/>
+          </GridItem>
           <GridItem colSpan={{ base: 1, lg: 4 }}>
             <FormFieldText<FormFields>
               name={ `tags.${ index }.tooltipDescription` }
@@ -118,6 +122,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
               name: field.name || 'Tag name',
               tagType: field.type[0],
               meta: {
+                tagIcon: errors?.iconUrl ? undefined : field.iconUrl,
                 tagUrl: field.url,
                 bgColor: field.bgColor && colorValidator(field.bgColor) === true ? field.bgColor : undefined,
                 textColor: field.textColor && colorValidator(field.textColor) === true ? field.textColor : undefined,

ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png

@@ -0,0 +1,39 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FormFields } from '../types';
+
+import { FormFieldUrl } from 'toolkit/components/forms/fields/FormFieldUrl';
+import { FormFieldImagePreview } from 'toolkit/components/forms/fields/image/FormFieldImagePreview';
+import { useImageField } from 'toolkit/components/forms/fields/image/useImageField';
+import IconSvg from 'ui/shared/IconSvg';
+
+import PublicTagsSubmitFieldTagIconPreview from './PublicTagsSubmitFieldTagIconPreview';
+
+interface Props {
+  index: number;
+}
+
+const PublicTagsSubmitFieldTagIcon = ({ index }: Props) => {
+
+  const imageField = useImageField({ name: `tags.${ index }.iconUrl`, isRequired: false });
+
+  return (
+    <Flex columnGap={ 3 }>
+      <FormFieldUrl<FormFields>
+        name={ `tags.${ index }.iconUrl` }
+        placeholder="Label icon URL"
+        { ...imageField.input }
+      />
+      <PublicTagsSubmitFieldTagIconPreview url={ imageField.preview.src } isInvalid={ imageField.preview.isInvalid }>
+        <FormFieldImagePreview
+          { ...imageField.preview }
+          fallback={ <IconSvg name="blobs/image" color="gray.500" boxSize="30px"/> }
+          boxSize="30px"
+        />
+      </PublicTagsSubmitFieldTagIconPreview>
+    </Flex>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagIcon);

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -0,0 +1,27 @@
+import { Center } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  url: string | undefined;
+  isInvalid: boolean;
+  children: React.ReactElement;
+}
+
+const PublicTagsSubmitFieldTagIconPreview = ({ url, isInvalid, children }: Props) => {
+  const borderColorActive = isInvalid ? 'error' : 'input.border.filled';
+
+  return (
+    <Center
+      boxSize="60px"
+      flexShrink={ 0 }
+      borderWidth="2px"
+      borderColor={ url ? borderColorActive : 'input.border' }
+      borderRadius="base"
+      backgroundColor="global.body.bg"
+    >
+      { children }
+    </Center>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagIconPreview);

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagIcon.tsx

@@ -26,6 +26,7 @@ const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
       name: '',
       type: [ 'name' ],
       url: undefined,
+      iconUrl: undefined,
       bgColor: undefined,
       textColor: undefined,
       tooltipDescription: undefined,

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagIconPreview.tsx

@@ -14,6 +14,7 @@ export interface FormFieldTag {
   name: string;
   type: Array<AddressMetadataTagType>;
   url: string | undefined;
+  iconUrl: string | undefined;
   bgColor: string | undefined;
   textColor: string | undefined;
   tooltipDescription: string | undefined;
@@ -32,6 +33,7 @@ export interface SubmitRequestBody {
     bgColor?: string;
     textColor?: string;
     tagUrl?: string;
+    tagIcon?: string;
     tooltipDescription?: string;
   };
 }

ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx

@@ -25,6 +25,7 @@ export function convertFormDataToRequestsBody(data: FormFields): Array<SubmitReq
           bgColor: tag.bgColor,
           textColor: tag.textColor,
           tagUrl: tag.url,
+          tagIcon: tag.iconUrl,
           tooltipDescription: tag.tooltipDescription,
         }, Boolean),
       });
@@ -39,6 +40,7 @@ export function convertTagApiFieldsToFormFields(tag: Pick<SubmitRequestBody, 'na
     name: tag.name,
     type: [ tag.tagType ],
     url: tag.meta.tagUrl,
+    iconUrl: tag.meta.tagIcon,
     bgColor: tag.meta.bgColor,
     textColor: tag.meta.textColor,
     tooltipDescription: tag.meta.tooltipDescription,