Set animation rules

hashicorp-forge · Jul 10, 2023 · 85a957c · 85a957c
1 parent 9f84566
commit 85a957c
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 99 deletions.
diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
@@ -25,6 +25,33 @@
       {{/let}}
 
       <div class="sidebar-body-container">
+        <div class="flex flex-col items-start">
+          <Document::Sidebar::RelatedResources
+            @productArea={{@document.product}}
+            @objectID={{@document.objectID}}
+            @onChange={{this.onRelatedResourcesChange}}
+            @allowAddingExternalLinks={{true}}
+            @headerTitle="Related resources"
+            @modalHeaderTitle="Add related resource"
+            @modalInputPlaceholder="Paste a URL or search documents..."
+            @optionalSearchFilters={{array
+              (concat "product:" @document.product)
+            }}
+          />
+        </div>
+
+        <div class="flex flex-col items-start">
+          <Document::Sidebar::RelatedResources
+            @productArea={{@document.product}}
+            @objectID={{@document.objectID}}
+            @onChange={{this.onRelatedResourcesChange}}
+            @headerTitle="PRD"
+            @modalHeaderTitle="Add PRD"
+            @modalInputPlaceholder="Search PRDs..."
+            @searchFilters="docType:PRD"
+            @itemLimit={{1}}
+          />
+        </div>
         <div class="flex flex-col items-start space-y-2">
           {{#if (is-empty @document.docNumber)}}
             <small
@@ -272,35 +299,6 @@
           <p>{{@document.lastModified}}</p>
         </div>
 
-        <div class="flex flex-col items-start">
-
-          <Document::Sidebar::RelatedResources
-            @productArea={{@document.product}}
-            @objectID={{@document.objectID}}
-            @onChange={{this.onRelatedResourcesChange}}
-            @allowAddingExternalLinks={{true}}
-            @headerTitle="Related resources"
-            @modalHeaderTitle="Add related resource"
-            @modalInputPlaceholder="Paste a URL or search documents..."
-            @optionalSearchFilters={{array
-              (concat "product:" @document.product)
-            }}
-          />
-        </div>
-
-        <div class="flex flex-col items-start">
-          <Document::Sidebar::RelatedResources
-            @productArea={{@document.product}}
-            @objectID={{@document.objectID}}
-            @onChange={{this.onRelatedResourcesChange}}
-            @headerTitle="PRD"
-            @modalHeaderTitle="Add PRD"
-            @modalInputPlaceholder="Search PRDs..."
-            @searchFilters="docType:PRD"
-            @itemLimit={{1}}
-          />
-        </div>
-
         {{#each-in this.customEditableFields as |field attributes|}}
           {{#if
             (or

diff --git a/web/app/components/document/sidebar/related-resources.hbs b/web/app/components/document/sidebar/related-resources.hbs
@@ -5,17 +5,39 @@
   @buttonAction={{this.showAddResourceModal}}
 />
 
-<Document::Sidebar::RelatedResources::List
-  @items={{this.relatedResourcesObjectEntries}}
->
-  <:resource as |r|>
-    <Document::Sidebar::RelatedResources::ListItem
-      @resource={{r}}
-      @removeResource={{this.removeResource}}
-      @editResource={{this.editResource}}
+{{#if this.loadRelatedResources.isRunning}}
+  <div class="h-[26px]">
+    <FlightIcon @name="loading" class="mt-1.5" />
+  </div>
+{{else if this.loadingHasFailed}}
+  <div class="h-16">
+    <div
+      class="text-display-300 text-color-foreground-faint opacity-50 font-semibold mb-2"
+    >
+      Failed to load
+    </div>
+    <Hds::Button
+      @color="secondary"
+      @size="small"
+      @text="Retry"
+      @icon="reload"
+      {{on "click" (perform this.loadRelatedResources)}}
     />
-  </:resource>
-</Document::Sidebar::RelatedResources::List>
+  </div>
+{{else}}
+  <Document::Sidebar::RelatedResources::List
+    @items={{this.relatedResourcesObjectEntries}}
+    @itemLimit={{@itemLimit}}
+  >
+    <:resource as |r|>
+      <Document::Sidebar::RelatedResources::ListItem
+        @resource={{r}}
+        @removeResource={{this.removeResource}}
+        @editResource={{this.editResource}}
+      />
+    </:resource>
+  </Document::Sidebar::RelatedResources::List>
+{{/if}}
 
 {{#if this.addResourceModalIsShown}}
   <Document::Sidebar::RelatedResources::Add

diff --git a/web/app/components/document/sidebar/related-resources.ts b/web/app/components/document/sidebar/related-resources.ts
@@ -1,11 +1,9 @@
 import Component from "@glimmer/component";
-import { A } from "@ember/array";
 import { action } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
 import { HermesDocument } from "hermes/types/document";
 import FetchService from "hermes/services/fetch";
-import NativeArray from "@ember/array/-private/native-array";
 import ConfigService from "hermes/services/config";
 import AlgoliaService from "hermes/services/algolia";
 import { restartableTask, task, timeout } from "ember-concurrency";
@@ -54,6 +52,8 @@ export default class DocumentSidebarRelatedResourcesComponent extends Component<
 
   @tracked addResourceModalIsShown = false;
 
+  @tracked loadingHasFailed = false;
+
   get relatedResources(): {
     [key: string]: RelatedResource;
   } {
@@ -198,6 +198,7 @@ export default class DocumentSidebarRelatedResourcesComponent extends Component<
   }
 
   protected loadRelatedResources = task(async () => {
+    await timeout(500);
     // make a fetch GET request to the back end
     try {
       // TODO: use when API is built
@@ -232,7 +233,9 @@ export default class DocumentSidebarRelatedResourcesComponent extends Component<
 
       this.relatedDocuments = fakeResources.hermesDocuments;
       this.relatedLinks = fakeResources.externalLinks;
+      this.loadingHasFailed = false;
     } catch (e: unknown) {
+      this.loadingHasFailed = true;
       // do an inline error with ability to retry
     }
   });

diff --git a/web/app/components/document/sidebar/related-resources/list-item/resource.ts b/web/app/components/document/sidebar/related-resources/list-item/resource.ts
@@ -48,46 +48,6 @@ export default class DocumentSidebarRelatedResourcesListItemResourceComponent ex
     return this.args.resource.url;
   }
 
-  protected get iconName() {
-    const resource = this.args.resource;
-    assert("resource must be an external link", "url" in resource);
-    const url = resource.url;
-
-    const urlParts = url.split("/");
-    let domain = urlParts[2];
-
-    assert("domain must exist", domain);
-    const domainParts = domain.split(".");
-
-    domain = domainParts[domainParts.length - 2];
-
-    if (domain) {
-      if (domain.includes("figma")) {
-        return "figma-color";
-      }
-      if (domain.includes("google")) {
-        return "google-color";
-      }
-      if (domain.includes("datadog")) {
-        return "datadog-color";
-      }
-      if (domain.includes("github")) {
-        return "github-color";
-      }
-      if (domain.includes("codepen")) {
-        return "codepen-color";
-      }
-      if (domain.includes("slack")) {
-        return "slack-color";
-      }
-      if (domain.includes("loom")) {
-        return "loom-color";
-      }
-    }
-
-    return "external-link";
-  }
-
   @action protected removeResource(): void {
     this.args.removeResource(this.args.resource);
   }

diff --git a/web/app/components/document/sidebar/related-resources/list.hbs b/web/app/components/document/sidebar/related-resources/list.hbs
@@ -1,19 +1,27 @@
 <AnimatedContainer class="w-full">
-  {{#if this.listIsEmpty}}
-    <div class="mt-1.5" data-test-related-resources-list-empty-state>
-      <CustomEditableFields::EmptyState />
-    </div>
-  {{else}}
-    <ul class="related-resources-list" ...attributes>
-      {{#animated-each
-        @items
-        use=this.transition
-        initialInsertion=true
-        finalRemoval=true
-        as |resource|
-      }}
-        {{yield resource to="resource"}}
-      {{/animated-each}}
-    </ul>
-  {{/if}}
+  <div {{did-insert this.didInsert}}>
+    {{#if this.listIsEmpty}}
+      <div class="mt-1.5" data-test-related-resources-list-empty-state>
+        <CustomEditableFields::EmptyState />
+      </div>
+    {{else}}
+      <ul class="related-resources-list" ...attributes>
+        {{#animated-each
+          @items
+          rules=this.transitionRules
+          initialInsertion=true
+          finalRemoval=true
+          as |resource i|
+        }}
+          {{#if @itemLimit}}
+            {{#if (lt i @itemLimit)}}
+              {{yield resource to="resource"}}
+            {{/if}}
+          {{else}}
+            {{yield resource to="resource"}}
+          {{/if}}
+        {{/animated-each}}
+      </ul>
+    {{/if}}
+  </div>
 </AnimatedContainer>
diff --git a/web/app/components/document/sidebar/related-resources/list.ts b/web/app/components/document/sidebar/related-resources/list.ts
@@ -4,22 +4,50 @@ import animateScale from "hermes/utils/ember-animated/animate-scale";
 import { easeOutQuad } from "hermes/utils/ember-animated/easings";
 import { TransitionContext, wait } from "ember-animated/.";
 import { fadeIn, fadeOut } from "ember-animated/motions/opacity";
+import { action } from "@ember/object";
+import { Transition } from "ember-animated/-private/transition";
 
 interface DocumentSidebarRelatedResourcesListComponentSignature {
   Element: HTMLUListElement;
   Args: {
     items: any[];
+    itemLimit?: number;
   };
   Blocks: {
     resource: [resource: any];
   };
 }
 
+export function* emptyTransition(context: TransitionContext) {}
+
 export default class DocumentSidebarRelatedResourcesListComponent extends Component<DocumentSidebarRelatedResourcesListComponentSignature> {
+  shouldAnimate = false;
+
   get listIsEmpty() {
     return this.args.items.length === 0;
   }
 
+  @action protected didInsert() {
+    this.shouldAnimate = true;
+  }
+
+  @action transitionRules({
+    firstTime,
+    oldItems,
+    newItems,
+  }: {
+    firstTime: boolean;
+    oldItems: unknown[];
+    newItems: unknown[];
+  }): Transition {
+    if (firstTime) {
+      if (this.shouldAnimate === false) {
+        return emptyTransition;
+      }
+    }
+    return this.transition;
+  }
+
   *transition({
     insertedSprites,
     keptSprites,
@@ -33,11 +61,11 @@ export default class DocumentSidebarRelatedResourcesListComponent extends Compon
       void fadeOut(sprite, { duration: 0 });
     }
 
+    yield wait(100);
     for (let sprite of insertedSprites) {
       sprite.applyStyles({
         opacity: "0",
       });
-      yield wait(100);
       void animateScale(sprite, {
         from: 0.95,
         to: 1,

diff --git a/web/types/glint/index.d.ts b/web/types/glint/index.d.ts
@@ -6,6 +6,7 @@ import WillDestroyModifier from "ember-render-modifiers/modifiers/will-destroy";
 import AndHelper from "ember-truth-helpers/helpers/and";
 import EqHelper from "ember-truth-helpers/helpers/eq";
 import IsEmptyHelper from "ember-truth-helpers/helpers/is-empty";
+import LtHelper from "ember-truth-helpers/helpers/lt";
 import NotHelper from "ember-truth-helpers/helpers/not";
 import OrHelper from "ember-truth-helpers/helpers/or";
 import { FlightIconComponent } from "hds/flight-icon";
@@ -53,6 +54,7 @@ declare module "@glint/environment-ember-loose/registry" {
     eq: typeof EqHelper;
     and: typeof AndHelper;
     not: typeof NotHelper;
+    lt: typeof LtHelper;
     "is-empty": IsEmptyHelper;
     FlashMessage: FlashMessageComponent;
     FlightIcon: FlightIconComponent;