feat(ui): fix input avatars for org & member registration (#366)

* show/hide member avatar
* org registration show/hide avatar
* fix test
* Use conditional instead of css
* Remove avatar from user
Co-authored-by: Alexander Simmerl <a.simmerl@gmail.com>

cypress/integration/add_member_to_org.spec.js

@@ -10,11 +10,12 @@ before(() => {
 });
 
 context("add member to org", () => {
-  beforeEach(() => {
-    cy.select("sidebar", "org").click();
-    cy.select("projects", "add-member-button").click();
-  });
   context("navigation", () => {
+    beforeEach(() => {
+      cy.select("sidebar", "org").click();
+      cy.select("projects", "add-member-button").click();
+    });
+
     it("can be closed by pressing cancel", () => {
       cy.select("add-member-modal").contains("Register a member");
       cy.select("add-member-modal", "cancel-button").click();
@@ -46,6 +47,11 @@ context("add member to org", () => {
   });
 
   context("validations", () => {
+    beforeEach(() => {
+      cy.select("sidebar", "org").click();
+      cy.select("projects", "add-member-button").click();
+    });
+
     it("prevents the user from adding an invalid user", () => {
       // no empty input
       cy.select("add-member-modal", "name-input").type("aname");
@@ -59,4 +65,15 @@ context("add member to org", () => {
       cy.select("add-member-modal", "submit-button").should("be.disabled");
     });
   });
+
+  context("aesthetics", () => {
+    it("shows avatar when handle exists and hides otherwise", () => {
+      cy.select("add-member-modal", "name-input").clear();
+      cy.select("add-member-modal", "name-input").type("sickhandle");
+      cy.select("add-member-modal", "avatar").should("be.visible");
+
+      cy.select("add-member-modal", "name-input").clear();
+      cy.select("add-member-modal", "avatar").should("not.be.visible");
+    });
+  });
 });

cypress/integration/org_registration.spec.js

@@ -89,4 +89,15 @@ context("org registration", () => {
       cy.select("org-reg-modal", "submit-button").should("be.disabled");
     });
   });
+
+  context("aesthetics", () => {
+    it("shows avatar when handle exists and hides otherwise", () => {
+      cy.select("org-reg-modal", "name-input").clear();
+      cy.select("org-reg-modal", "name-input").type("sick_org");
+      cy.select("org-reg-modal", "avatar").should("be.visible");
+
+      cy.select("org-reg-modal", "name-input").clear();
+      cy.select("org-reg-modal", "avatar").should("not.be.visible");
+    });
+  });
 });

ui/DesignSystem/Primitive/Input/Text.svelte

@@ -10,12 +10,8 @@
   export let dataCy = null;
 
   export let disabled = null;
-
-  // TODO(sos): replace with actual slot presence check once
-  // https://github.com/sveltejs/svelte/issues/2106 is solved
-  let slotFallback;
-
   export let validation = null;
+  export let showAvatar = false;
   export let showSuccessCheck = false;
 </script>
 
@@ -76,33 +72,33 @@
   }
 
   .avatar-wrapper {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    padding-left: 8px;
+    align-items: center;
     display: flex;
     height: 40px;
     justify-content: center;
-    align-items: center;
+    left: 0px;
+    padding-left: 8px;
+    position: absolute;
+    top: 0px;
   }
 </style>
 
 <div {style} class="wrapper">
   <input
     data-cy={dataCy}
     class:invalid={validation && validation.status === ValidationStatus.Error}
-    class:avatar={!slotFallback}
+    class:avatar={showAvatar}
     {placeholder}
     bind:value
     {disabled}
     on:change
     on:input />
 
-  <div class="avatar-wrapper">
-    <slot name="avatar">
-      <div bind:this={slotFallback} />
-    </slot>
-  </div>
+  {#if showAvatar}
+    <div class="avatar-wrapper">
+      <slot name="avatar" />
+    </div>
+  {/if}
 
   {#if validation}
     {#if validation.status === ValidationStatus.Loading}

ui/Screen/Org/MemberRegistration.svelte

@@ -21,6 +21,7 @@
   let state = RegistrationFlowState.NameSelection;
   let userHandle,
     avatarFallback,
+    showAvatar,
     transaction,
     subject,
     payer,
@@ -60,10 +61,17 @@
     if (validating) validation.updateInput(userHandle);
   }
 
+  // TODO(sos): replace with user avatar fetch
   const updateAvatar = async (handle) => {
-    if (handle !== "") {
-      avatarFallback = await avatar.get(avatar.Usage.Identity, handle);
+    if (!handle || handle.length < 1) {
+      showAvatar = false;
+      return;
     }
+
+    avatarFallback = await avatar.get(avatar.Usage.Identity, handle);
+
+    // check userHandle in case input was cleared during the promise
+    showAvatar = userHandle.length && !!avatarFallback;
   };
 
   $: updateAvatar(userHandle);
@@ -87,9 +95,14 @@
       style="width: 100%;"
       showSuccessCheck
       validation={$validation}
+      {showAvatar}
       dataCy="name-input">
       <div slot="avatar">
-        <Avatar {avatarFallback} size="small" variant="circle" />
+        <Avatar
+          {avatarFallback}
+          size="small"
+          variant="circle"
+          dataCy="avatar" />
       </div>
     </Input.Text>
   {:else if state === RegistrationFlowState.TransactionConfirmation}

ui/Screen/OrgRegistration.svelte

@@ -23,7 +23,7 @@
   } from "../DesignSystem/Component";
   import { Avatar, Input, Text } from "../DesignSystem/Primitive";
 
-  let orgName, transaction, subject, payer, avatarFallback;
+  let orgName, transaction, subject, payer, avatarFallback, showAvatar;
   let state = RegistrationFlowState.NameSelection;
 
   // Create a new validation store
@@ -77,9 +77,15 @@
   };
 
   const updateAvatar = async (id) => {
-    if (id !== "") {
-      avatarFallback = await avatar.get(avatar.Usage.Org, id);
+    if (!id || id.length < 1) {
+      showAvatar = false;
+      return;
     }
+
+    avatarFallback = await avatar.get(avatar.Usage.Org, id);
+
+    // check orgName in case input was cleared during the promise
+    showAvatar = orgName.length && !!avatarFallback;
   };
 
   $: updateAvatar(orgName);
@@ -113,9 +119,14 @@
       bind:value={orgName}
       style="width: 100%;"
       showSuccessCheck
+      {showAvatar}
       validation={$validation}>
       <div slot="avatar">
-        <Avatar {avatarFallback} size="small" variant="square" />
+        <Avatar
+          {avatarFallback}
+          size="small"
+          variant="square"
+          dataCy="avatar" />
       </div>
     </Input.Text>
   {:else if state === RegistrationFlowState.TransactionConfirmation}

ui/src/user.ts

@@ -3,13 +3,13 @@ import * as transaction from "./transaction";
 
 // TYPES
 
+// TODO(sos): Avatar should not be optional once users can have avatarUrls
 export interface User {
   handle: string;
   maybeEntityId?: string;
 }
 
 // EVENTS
-
 interface RegisterInput {
   handle: string;
   maybeEntityId?: string;