fix: Update add to collection modal

app/components/pipeline/header/component.js

@@ -80,20 +80,17 @@ export default class PipelineHeaderComponent extends Component {
 
   @action
   async openAddToCollectionModal() {
-    if (!this.collections) {
-      this.collections = await this.shuttle
-        .fetchFromApi('get', '/collections')
-        .catch(err => {
-          this.errorMessage = `Could not get collections.  ${err.message}`;
-        });
-    }
+    this.collections = await this.shuttle
+      .fetchFromApi('get', '/collections')
+      .catch(err => {
+        this.errorMessage = `Could not get collections.  ${err.message}`;
+      });
 
     this.addToCollectionModalOpen = true;
   }
 
   @action
-  closeAddToCollectionModal(collections) {
+  closeAddToCollectionModal() {
     this.addToCollectionModalOpen = false;
-    this.collections = collections;
   }
 }

app/components/pipeline/header/template.hbs

@@ -80,7 +80,7 @@
   />
 
   {{#if this.addToCollectionModalOpen}}
-    <Collection::Modal::AddToCollection
+    <Pipeline::Modal::AddToCollection
       @pipeline={{@pipeline}}
       @collections={{this.collections}}
       @errorMessage={{this.errorMessage}}

app/components/pipeline/modal/add-to-collection/styles.scss

@@ -0,0 +1,65 @@
+@use 'screwdriver-colors' as colors;
+@use 'variables';
+
+@mixin styles {
+  #add-to-collection-modal {
+    &.modal {
+      .modal-dialog {
+        max-width: 30rem;
+
+        .modal-body {
+          .modal-title {
+            font-size: 1.25rem;
+            font-weight: variables.$weight-bold;
+            padding-bottom: 0.75rem;
+          }
+
+          .create-new-collection {
+            label {
+              display: flex;
+              justify-content: space-between;
+
+              > div {
+                margin: auto;
+                padding-right: 0.25rem;
+                width: 6rem;
+              }
+
+              input {
+                flex: 1;
+                border-radius: 4px;
+                border: 1px solid colors.$sd-text-med;
+                padding-left: 0.5rem;
+                margin-left: 0.25rem;
+              }
+            }
+          }
+
+          .select-collections {
+            max-height: 10rem;
+            overflow: scroll;
+
+            .btn-group {
+              display: flex;
+              flex-direction: column;
+
+              > .btn {
+                border-radius: 3px;
+                margin: 0.25rem;
+
+                &.active {
+                  background-color: rgba(colors.$sd-running, 0.75);
+                  color: colors.$sd-white;
+                }
+              }
+            }
+          }
+        }
+
+        #submit-collections {
+          width: 15rem;
+        }
+      }
+    }
+  }
+}

app/components/collection/modal/add-to-collection/template.hbs → app/components/pipeline/modal/add-to-collection/template.hbs

@@ -25,20 +25,19 @@
     <div class="modal-title">Add to a new collection</div>
     <div class="create-new-collection">
       <label>
-        <div>Collection name:</div>
+        <div>Name:</div>
         <Input
           id="new-collection-name-input"
           @type="text"
           @value={{this.newCollectionName}}
-          placeholder="Please enter a name for your new collection"
         />
       </label>
       <label>
-        <div>Collection description:</div>
+        <div>Description:</div>
         <Input
           @type="text"
           @value={{this.newCollectionDescription}}
-          placeholder="Optional: enter a name description for your new collection"
+          placeholder="Optional"
         />
       </label>
     </div>

app/components/pipeline/modal/styles.scss

@@ -1,10 +1,12 @@
+@use 'add-to-collection/styles' as addToCollection;
 @use 'confirm-action/styles' as confirmAction;
 @use 'event-group-history/styles' as eventGroup;
 @use 'search-event/styles' as searchEvent;
 @use 'start-event/styles' as startEvent;
 @use 'toggle-job/styles' as toggleJob;
 
 @mixin styles {
+  @include addToCollection.styles;
   @include confirmAction.styles;
   @include eventGroup.styles;
   @include searchEvent.styles;

app/components/styles.scss

@@ -1,7 +1,5 @@
-@use 'collection/styles' as collection;
 @use 'pipeline/styles' as pipeline;
 
 @mixin styles {
-  @include collection.styles;
   @include pipeline.styles;
 }

tests/integration/components/collection/modal/add-to-collection/component-test.js → tests/integration/components/pipeline/modal/add-to-collection/component-test.js

@@ -3,10 +3,10 @@ import { setupRenderingTest } from 'screwdriver-ui/tests/helpers';
 import { click, fillIn, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
-import { createCollectionBody } from 'screwdriver-ui/components/collection/modal/add-to-collection/util';
+import { createCollectionBody } from 'screwdriver-ui/components/pipeline/modal/add-to-collection/util';
 
 module(
-  'Integration | Component | collection/modal/add-to-collection',
+  'Integration | Component | pipeline/modal/add-to-collection',
   function (hooks) {
     setupRenderingTest(hooks);
 
@@ -17,7 +17,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @closeModal={{this.closeModal}}
         />`
@@ -42,7 +42,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @errorMessage={{this.errorMessage}}
             @pipeline={{this.pipeline}}
             @closeModal={{this.closeModal}}
@@ -64,7 +64,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @collections={{this.collections}}
             @closeModal={{this.closeModal}}
@@ -84,7 +84,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @closeModal={{this.closeModal}}
         />`
@@ -105,7 +105,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @collections={{this.collections}}
             @closeModal={{this.closeModal}}
@@ -129,7 +129,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @closeModal={{this.closeModal}}
         />`
@@ -163,7 +163,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @closeModal={{this.closeModal}}
         />`
@@ -188,7 +188,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @collections={{this.collections}}
             @closeModal={{this.closeModal}}
@@ -220,7 +220,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @collections={{this.collections}}
             @closeModal={{this.closeModal}}
@@ -249,7 +249,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @collections={{this.collections}}
             @closeModal={{this.closeModal}}
@@ -284,7 +284,7 @@ module(
       });
 
       await render(
-        hbs`<Collection::Modal::AddToCollection
+        hbs`<Pipeline::Modal::AddToCollection
             @pipeline={{this.pipeline}}
             @collections={{this.collections}}
             @closeModal={{this.closeModal}}

tests/unit/components/collection/modal/add-to-collection/util-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import {
   createCollectionBody,
   getCollectionsWithoutPipeline
-} from 'screwdriver-ui/components/collection/modal/add-to-collection/util';
+} from 'screwdriver-ui/components/pipeline/modal/add-to-collection/util';
 
 module(
   'Unit | Component | collection/modal/add-to-collection/util',