Added the remove options for a link

bp-cos · Apr 5, 2024 · e088553 · e088553
1 parent d9d32a4
commit e088553
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 30 deletions.
diff --git a/app/preprints/-components/submit/author-assertions/data-link-widget/component.ts b/app/preprints/-components/submit/author-assertions/data-link-widget/component.ts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import PreprintStateMachine from 'ember-osf-web/preprints/-components/submit/preprint-state-machine/component';
 import { action, notifyPropertyChange } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Intl from 'ember-intl/services/intl';
@@ -10,7 +9,6 @@ import { tracked } from '@glimmer/tracking';
  * The Data Link Widget Args
  */
 interface DataLinkWidgetArgs {
-    manager: PreprintStateMachine;
     update: (_: string[]) => {};
 }
 
@@ -24,12 +22,24 @@ export default class DataLinkWidget extends Component<DataLinkWidgetArgs>{
     @action
     public async onUpdate(value: string, index: number): Promise<void> {
         this.links[index] = value;
-        this.args.update(this.links);
+        await this.args.update(this.links);
+        notifyPropertyChange(this, 'links');
     }
 
     @action
     public async addLink(): Promise<void> {
         this.links.push('');
         notifyPropertyChange(this, 'links');
     }
+
+    @action
+    public async removeLink(index: number): Promise<void> {
+        if (index === 0 && this.links.length === 1) {
+            this.onUpdate('', index);
+        } else {
+            this.links.splice(index, 1);
+            await this.args.update(this.links);
+            notifyPropertyChange(this, 'links');
+        }
+    }
 }
diff --git a/app/preprints/-components/submit/author-assertions/data-link-widget/data-link/component.ts b/app/preprints/-components/submit/author-assertions/data-link-widget/data-link/component.ts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import PreprintStateMachine from 'ember-osf-web/preprints/-components/submit/preprint-state-machine/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Intl from 'ember-intl/services/intl';
@@ -12,7 +11,7 @@ import buildChangeset from 'ember-osf-web/utils/build-changeset';
  * The Data Link Args
  */
 interface DataLinkArgs {
-    manager: PreprintStateMachine;
+    remove: (__:number) => {};
     update: (_: string, __:number) => {};
     value: string;
     index: number;
@@ -51,6 +50,11 @@ export default class DataLink extends Component<DataLinkArgs>{
             return;
         }
         this.dataLinkFormChangeset.execute();
-        this.args.update(this.dataLinkFormChangeset.get('value'), this.args.index);
+        await this.args.update(this.dataLinkFormChangeset.get('value'), this.args.index);
+    }
+
+    @action
+    public async removeLink(): Promise<void> {
+        await this.args.remove(this.args.index);
     }
 }
diff --git a/app/preprints/-components/submit/author-assertions/data-link-widget/data-link/styles.scss b/app/preprints/-components/submit/author-assertions/data-link-widget/data-link/styles.scss
@@ -2,17 +2,26 @@
 
 .form-container {
     width: 100%;
-
-    .required {
-        color: $brand-danger;
-    }
+    margin-top: 20px;
 
     .input-container {
-        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        .input {
+            width: calc(100% - 50px);
+        }
+
+        .delete-container {
+            display: flex;
+            justify-content: center;
+            width: 50px;
+
+            .delete {
+                color: $brand-danger;
 
-        &.textarea-container {
-            * > textarea {
-                height: 75px;
             }
         }
     }

diff --git a/app/preprints/-components/submit/author-assertions/data-link-widget/data-link/template.hbs b/app/preprints/-components/submit/author-assertions/data-link-widget/data-link/template.hbs
@@ -1,19 +1,32 @@
 <div local-class='form-container'>
-    <div local-class='huh'>
-        {{@value}}
-    </div>
     <FormControls
         @changeset={{this.dataLinkFormChangeset}}
         data-test-form
         as |form|
     >
-        <form.text
-            data-test-data-link-input
-            @isRequired={{true}}
-            {{on 'focusout' this.onUpdate}}
-            local-class='input-container'
-            @placeholder={{t 'preprints.submit.step-three.public-data-link-placeholder'}}
-            @valuePath={{'value'}}
-        />
+        <div local-class='input-container'>
+            <form.text
+                data-test-data-link-input
+                @isRequired={{true}}
+                {{on 'focusout' this.onUpdate}}
+                @placeholder={{t 'preprints.submit.step-three.public-data-link-placeholder'}}
+                @valuePath={{'value'}}
+                local-class='input'
+            />
+
+            <div local-class='delete-container'>
+                <Button
+                    data-test-remove-link
+                    aria-label={{t 'preprints.submit.step-three.public-data-link-remove-button'}}
+                    @layout='fake-link'
+                    {{on 'click' this.removeLink}}
+                >
+                    <FaIcon @icon='times' local-class='delete' />
+                    <EmberTooltip>
+                        {{t 'preprints.submit.step-three.public-data-link-remove-button'}}
+                    </EmberTooltip>
+                </Button>
+            </div>
+        </div>
     </FormControls>
 </div>
diff --git a/app/preprints/-components/submit/author-assertions/data-link-widget/template.hbs b/app/preprints/-components/submit/author-assertions/data-link-widget/template.hbs
@@ -2,7 +2,7 @@
     {{#each this.links as |link index|}}
         <div local-class='data-link'>
             <Preprints::-Components::Submit::AuthorAssertions::DataLinkWidget::DataLink
-                @manager={{@manager}}
+                @remove={{this.removeLink}}
                 @update={{this.onUpdate}}
                 @value={{link}}
                 @index={{index}}
@@ -12,12 +12,12 @@
 
     <Button
         data-test-add-another-link
-        aria-label={{t 'preprints.submit.step-three.public-data-link-button'}}
+        aria-label={{t 'preprints.submit.step-three.public-data-link-add-button'}}
         local-class='add-another-link'
         @layout='fake-link'
         {{on 'click' this.addLink}}
     >
         <FaIcon @icon='plus' local-class='plus-icon' />
-        {{t 'preprints.submit.step-three.public-data-link-button'}}
+        {{t 'preprints.submit.step-three.public-data-link-add-button'}}
     </Button>
 </div>
diff --git a/app/preprints/-components/submit/author-assertions/public-data/template.hbs b/app/preprints/-components/submit/author-assertions/public-data/template.hbs
@@ -32,7 +32,6 @@
         {{#if this.displayPublicDataLinks}}
             <div local-class='input-container'>
                 <Preprints::-Components::Submit::AuthorAssertions::DataLinkWidget
-                @manager={{@manager}}
                 @update={{this.updatePublicDataLinks}}
             />
             </div>

diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -1196,7 +1196,8 @@ preprints:
             public-data-input: 'Public Data'
             public-data-description: 'Data refers to raw and/or processed information (quantitative or qualitative) used for the analyses, case studies, and/or descriptive interpretation in the preprint. Public data could include data posted to open-access repositories, public archival library collection, or government archive. For data that is available under limited circumstances (e.g., after signing a data sharing agreement), choose the ‘No’ option and use the comment box to explain how others could access the data.'
             public-data-link-placeholder: 'Link to data'
-            public-data-link-button: 'Add another'
+            public-data-link-add-button: 'Add another'
+            public-data-link-remove-button: 'Remove link'
             public-data-no-placeholder: 'Describe'
             public-data-na-placeholder: 'Author asserted there is no data associated with this preprint.'
         step-four: