fix: UI improvements for configure metadata

radixdlt · Jan 18, 2024 · 749a514 · 749a514
1 parent fe67134
commit 749a514
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 86 deletions.
diff --git a/apps/console/src/lib/form/Form.svelte b/apps/console/src/lib/form/Form.svelte
@@ -77,7 +77,9 @@
   import type { SvelteComponent } from 'svelte'
   import PadlockIcon from '@icons/validators-menu.svg'
   import IconNew from '@components/_base/icon/IconNew.svelte'
-
+  import TrashIcon from '@icons/trash.svg'
+  import RestoreIcon from '@icons/replay_black_24dp.svg'
+  import Tooltip from '@components/_base/tooltip/Tooltip.svelte'
   export let items: FormItem[] = []
   export let state = writable<Record<string, any>>({})
   export let disabled = false
@@ -98,10 +100,29 @@
 {#each items as item}
   {#if item.showCondition && !item.showCondition($state)}{''}{:else}
     <div class="form-item">
-      {#if item.label}<Label {disabled}
-          >{item.label}{#if showPadLockWhenDisabled && disabledFields[item.key]}
-            <IconNew icon={PadlockIcon} />{/if}</Label
-        >{/if}
+      {#if item.label}
+        <Label {disabled}>
+          {item.label}
+
+          {#if showPadLockWhenDisabled && disabledFields[item.key]}
+            <IconNew icon={PadlockIcon} />
+          {/if}
+
+          {#if initialState && $initialState && JSON.stringify($initialState[item.key]) !== JSON.stringify($state[item.key])}
+            <Tooltip
+              text="Click to restore current on-network value"
+              headerText="Value has changed"
+            >
+              <button
+                class="restore-icon"
+                on:click={() => {
+                  $state[item.key] = $initialState?.[item.key]
+                }}><IconNew --size="1rem" icon={RestoreIcon} /></button
+              >
+            </Tooltip>
+          {/if}
+        </Label>
+      {/if}
       {#if item.formItemType === 'input'}
         <div class="with-action">
           {#if item.startDecorator}
@@ -205,33 +226,20 @@
                 class:disabled={disabled || disabledFields[item.key]}
                 on:click={() =>
                   ($state[item.key] = $state[item.key].toSpliced(index, 1))}
-                >Remove</button
               >
+                <IconNew icon={TrashIcon} --size="1.3rem" faded />
+              </button>
             {/if}
           </div>
         {/each}
       {/if}
-      {#if initialState && $initialState}
-        {#if JSON.stringify($initialState[item.key]) !== JSON.stringify($state[item.key])}
-          <div class="restore-original-value">
-            Value of "{item.label}" field has changed.
-            <button
-              class="restore-button"
-              on:click={() => {
-                $state[item.key] = $initialState?.[item.key]
-              }}>Restore to original value</button
-            >
-          </div>
-        {/if}
-      {/if}
     </div>
   {/if}
 {/each}
 
 <style lang="scss">
-  .restore-button {
-    text-decoration: underline;
-    margin-top: 0.5rem;
+  .restore-icon {
+    transform: translateY(1px);
   }
 
   .form-item {
@@ -260,6 +268,8 @@
   }
 
   .add-button {
+    color: var(--theme-button-primary);
+    font-weight: var(--font-weight-bold-1);
     position: absolute;
     right: 0;
     top: 0;

diff --git a/apps/console/src/pages/navbar-pages/configure-metadata/ConfigureMetadata.svelte b/apps/console/src/pages/navbar-pages/configure-metadata/ConfigureMetadata.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store'
   import EntitySearchInput from './EntitySearchInput.svelte'
-
+  import Divider from '@components/_base/divider/Divider.svelte'
   import type { Entity } from './EntitySearchInput.svelte'
   import UpdateMetadataForm from './UpdateMetadataForm.svelte'
   import {
@@ -102,6 +102,13 @@
     component: MetadataForDisplay
   }
 
+  const divider: FormItem = {
+    key: '',
+    showCondition: () => true,
+    formItemType: 'svelteComponent',
+    component: Divider
+  }
+
   const dAppDefinitionsFormItem: FormItem = {
     key: 'dapp_definitions',
     label: 'dapp_definitions',
@@ -112,8 +119,10 @@
     startDecoratorPropertiesFn: () => ({
       entityAddress: $entityDetails?.address
     }),
-    addLabel: 'Add dApp definition',
-    showCondition: (formState) => formState.account_type === 'dapp definition',
+    addLabel: '+ Add dApp definition',
+    showCondition: (formState) =>
+      formState.account_type === 'dapp definition' ||
+      formState.dapp_definitions.length,
     transformValue: function (value: string[]) {
       const entityAddresses = value
         .map((value) => value.trim())
@@ -135,7 +144,8 @@
     formItemType: 'textarea',
     rows: 3,
     metadata: { type: MetadataType.String },
-    showCondition: (formState) => formState.account_type === 'dapp definition',
+    showCondition: (formState) =>
+      formState.account_type === 'dapp definition' || formState.description,
     transformValue: function (value) {
       return value === ''
         ? removeMetadata($entityDetails?.address || '', this.key)
@@ -149,7 +159,8 @@
     placeholder: 'dApp name (truncated after 32 characters)',
     formItemType: 'input',
     metadata: { type: MetadataType.String },
-    showCondition: (formState) => formState.account_type === 'dapp definition',
+    showCondition: (formState) =>
+      formState.account_type === 'dapp definition' || formState.name,
     transformValue: function (value) {
       return value === ''
         ? removeMetadata($entityDetails?.address || '', this.key)
@@ -166,7 +177,8 @@
       message: 'Must provide URL that starts with https://'
     }),
     metadata: { type: MetadataType.Url },
-    showCondition: (formState) => formState.account_type === 'dapp definition',
+    showCondition: (formState) =>
+      formState.account_type === 'dapp definition' || formState.icon_url,
     transformValue: function (value: string) {
       return value === ''
         ? removeMetadata($entityDetails?.address || '', this.key)
@@ -191,22 +203,29 @@
         ? setStringArrayMetaData($entityDetails?.address || '', this.key, tags)
         : removeMetadata($entityDetails?.address || '', this.key)
     },
-    showCondition: (formState) => formState.account_type === 'dapp definition'
+    showCondition: (formState) =>
+      formState.account_type === 'dapp definition' || formState.tags
   }
 
   const accountMetadataFormItems: FormItem[] = [
+    divider,
     {
       ...metadataForDisplay,
-      showCondition: (formState) => formState.account_type === 'dapp definition'
+      showCondition: (formState) =>
+        formState.account_type === 'dapp definition' ||
+        formState.name ||
+        formState.description ||
+        formState.tags ||
+        formState.icon_url
     },
     {
       key: 'account_type',
-      label: 'Is dApp definition?',
+      label: 'account_type',
       placeholder: '',
       formItemType: 'select',
       items: [
-        { id: 'dapp definition', label: 'Yes' },
-        { id: 'false', label: 'No' }
+        { id: 'dapp definition', label: 'dapp definition' },
+        { id: 'false', label: '-- not set --' }
       ],
       transformValue: function (value) {
         return value === 'dapp definition'
@@ -218,9 +237,21 @@
     descriptionFormItem,
     tagsFormItem,
     iconUrlFormItem,
+    {
+      ...divider,
+      showCondition: (formState) =>
+        formState.account_type === 'dapp definition' ||
+        formState.claimed_entities.length ||
+        formState.claimed_websites.length ||
+        formState.dapp_definitions.length
+    },
     {
       ...metadataForVerification,
-      showCondition: (formState) => formState.account_type === 'dapp definition'
+      showCondition: (formState) =>
+        formState.account_type === 'dapp definition' ||
+        formState.claimed_entities.length ||
+        formState.claimed_websites.length ||
+        formState.dapp_definitions.length
     },
     {
       key: 'claimed_entities',
@@ -232,9 +263,10 @@
       startDecoratorPropertiesFn: () => ({
         entityAddress: $entityDetails?.address
       }),
-      addLabel: 'Add Claimed Entity',
+      addLabel: '+ Add Claimed Entity',
       showCondition: (formState) =>
-        formState.account_type === 'dapp definition',
+        formState.account_type === 'dapp definition' ||
+        formState.claimed_entities.length,
       transformValue: function (value: string[]) {
         const entityAddresses = value
           .map((value) => value.trim())
@@ -258,9 +290,10 @@
         entityAddress: $entityDetails?.address
       }),
       metadata: {},
-      addLabel: 'Add Claimed Website',
+      addLabel: '+ Add Claimed Website',
       showCondition: (formState: Record<string, any>) =>
-        formState.account_type === 'dapp definition',
+        formState.account_type === 'dapp definition' ||
+        formState.claimed_websites.length,
       transformValue: function (value: string[]) {
         const entityAddresses = value
           .map((value) => value.trim())
@@ -278,6 +311,7 @@
   ]
 
   const fungibleResourceMetadataFormItems: FormItem[] = [
+    divider,
     metadataForDisplay,
     {
       ...nameFormItem,
@@ -330,22 +364,24 @@
           : setUrlMetaData($entityDetails?.address || '', this.key, value)
       }
     },
+    divider,
     metadataForVerification,
     {
       ...dAppDefinitionsFormItem,
       showCondition: () => true
     }
   ]
 
-  const nonFungibleResourceMetadataFormItems = [
+  const nonFungibleResourceMetadataFormItems: FormItem[] = [
     ...fungibleResourceMetadataFormItems.filter((item) => item.key !== 'symbol')
   ]
 
   const componentMetadataFormItems: FormItem[] = [
+    divider,
     metadataForDisplay,
     {
       ...nameFormItem,
-      placeholder: 'Simple name',
+      placeholder: 'Simple name of the component',
       showCondition: () => true
     },
     {
@@ -358,6 +394,7 @@
       placeholder: 'List of descriptive tags',
       showCondition: () => true
     },
+    divider,
     metadataForVerification,
     {
       key: 'dapp_definition',
@@ -379,6 +416,7 @@
   ]
 
   const validatorMetadataFormItems: FormItem[] = [
+    divider,
     metadataForDisplay,
     {
       ...nameFormItem,
@@ -414,7 +452,7 @@
   ]
 </script>
 
-<div style:width="35rem">
+<div style:width="37rem">
   <EntitySearchInput
     {query}
     onEntityDetails={(value) => ($entityDetails = value)}
@@ -424,7 +462,6 @@
     <UpdateMetadataForm
       on:entityUpdated={() => entityDetails.set(undefined)}
       {accountsResources}
-      type={$entityDetails.type}
       entityAddress={$entityDetails.address}
       explicitMetadata={[
         'account_type',
@@ -475,7 +512,6 @@
     <UpdateMetadataForm
       on:entityUpdated={() => entityDetails.set(undefined)}
       {accountsResources}
-      type="Fungible Resource"
       entityAddress={$entityDetails.address}
       explicitMetadata={[
         'dapp_definitions',
@@ -518,7 +554,6 @@
     <UpdateMetadataForm
       on:entityUpdated={() => entityDetails.set(undefined)}
       {accountsResources}
-      type="Non Fungible Resource"
       entityAddress={$entityDetails.address}
       explicitMetadata={[
         'dapp_definitions',
@@ -558,7 +593,6 @@
     <UpdateMetadataForm
       on:entityUpdated={() => entityDetails.set(undefined)}
       {accountsResources}
-      type={$entityDetails.type}
       entityAddress={$entityDetails.address}
       explicitMetadata={['dapp_definition', 'name', 'description', 'tags']}
       expectedMetadataResponse={createStandardMetadata({
@@ -581,7 +615,6 @@
     <UpdateMetadataForm
       on:entityUpdated={() => entityDetails.set(undefined)}
       {accountsResources}
-      type={$entityDetails.type}
       entityAddress={$entityDetails.address}
       explicitMetadata={['name', 'description', 'icon_url', 'info_url']}
       expectedMetadataResponse={createStandardMetadata({

diff --git a/apps/console/src/pages/navbar-pages/configure-metadata/InformationBox.svelte b/apps/console/src/pages/navbar-pages/configure-metadata/InformationBox.svelte
@@ -8,8 +8,10 @@
   style:margin-top="var(--spacing-xl)"
   style:margin-bottom="var(--spacing-sm)"
 >
-  <div style:font-weight="bold">{header}</div>
-  <div>
+  <div style:font-weight="bold" style:margin-bottom="var(--spacing-md)">
+    {header}
+  </div>
+  <div style:margin-bottom="var(--spacing-md)">
     {text}
   </div>
   <a href={link} target="_blank">More information</a>