Added a share icon and fixed the routing to reflect the current tab

CenterForOpenScience · Feb 5, 2024 · 4711d13 · 4711d13
1 parent 65eb157
commit 4711d13
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 11 deletions.
diff --git a/lib/osf-components/addon/components/cedar-metadata-renderer/component.ts b/lib/osf-components/addon/components/cedar-metadata-renderer/component.ts
@@ -7,6 +7,7 @@ import config from 'ember-osf-web/config/environment';
 import CedarMetadataRecordModel from 'ember-osf-web/models/cedar-metadata-record';
 import NodeModel from 'ember-osf-web/models/node';
 
+const { OSF: { url: baseURL } } = config;
 
 interface Args {
     cedarMetadataRecord: CedarMetadataRecordModel;
@@ -32,6 +33,11 @@ export default class CedarMetadataRenderer extends Component<Args> {
         return !this.args.cedarMetadataRecord.isPublished;
     }
 
+    public get buildCopyLink(): string {
+        const target = this.args.cedarMetadataRecord.target as NodeModel;
+        return `${baseURL}${target.get('id')}/metadata/${this.args.cedarMetadataRecord.id}`;
+    }
+
     @action
     public edit(): void {
         this.isShowEditor = true;

diff --git a/lib/osf-components/addon/components/cedar-metadata-renderer/styles.scss b/lib/osf-components/addon/components/cedar-metadata-renderer/styles.scss
@@ -39,7 +39,11 @@
             align-items: center;
 
             .spacer {
+                color: #2d6a9f;
                 margin-right: 10px;
+                border: 0;
+                background-color: inherit;
+                cursor: pointer;
             }
 
             svg {
@@ -56,11 +60,11 @@
 
         .action-container {
             .explanation-container {
-                width: calc(100% - 10px);
+                width: calc(100% - 115px);
             }
 
             .button-container {
-                width: 100px;
+                width: 115px;
             }
         }
     }

diff --git a/lib/osf-components/addon/components/cedar-metadata-renderer/template.hbs b/lib/osf-components/addon/components/cedar-metadata-renderer/template.hbs
@@ -17,6 +17,19 @@
                 </div>
             {{/if}}
             <div local-class='button-container'>
+                <CopyButton
+                    data-test-share-icon
+                    @clipboardText={{this.buildCopyLink}}
+                    local-class='spacer'
+                    aria-label={{t 'cedar.editor.share'}}
+                >
+                    <FaIcon @icon='share-alt' />
+                    <EmberTooltip
+                        @side='right'
+                    >
+                        {{t 'cedar.editor.share'}}
+                    </EmberTooltip>
+                </CopyButton>
                 <OsfLink
                     data-test-download-icon
                     local-class='spacer'
@@ -25,15 +38,11 @@
                     @target='_blank'
                 >
                     <FaIcon @icon='download' />
-                    {{#if @displayFileMetadata}}
-                        <EmberTooltip
-                            @side='right'
-                        >
-                            {{t 'metadata.download'}}
-                        </EmberTooltip>
-                    {{else}}
-                        {{t 'general.download'}}
-                    {{/if}}
+                    <EmberTooltip
+                        @side='right'
+                    >
+                        {{t 'metadata.download'}}
+                    </EmberTooltip>
                 </OsfLink>
                 {{#if this.hasWritePermission}}
                     <Button

diff --git a/lib/osf-components/addon/components/metadata/metadata-tabs/component.ts b/lib/osf-components/addon/components/metadata/metadata-tabs/component.ts
@@ -24,9 +24,26 @@ export default class MetadataTabs extends Component<TabArgs> {
     @tracked showTabs = false;
     @tracked showMore = false;
 
+    constructor(owner: unknown, args: TabArgs) {
+        super(owner, args);
+        this.replaceHistory();
+    }
+
+    private replaceHistory(): void {
+        if (this.activeId < 1) {
+            window.history.replaceState( {} , '',
+                `/${this.target.id}/metadata` );
+        } else {
+            const cedarMetadataRecord = this.cedarMetadataRecords[this.activeId - 1];
+            window.history.replaceState( {} , '',
+                `/${this.target.id}/metadata/${cedarMetadataRecord.id}` );
+        }
+    }
+
     @action
     changeTab(activeId: number) {
         this.activeId = activeId;
+        this.replaceHistory();
     }
 
     get isMobile() {

diff --git a/mirage/scenarios/registrations.lite.ts b/mirage/scenarios/registrations.lite.ts
@@ -64,6 +64,7 @@ function createDecafRegistration(server: Server, currentUser: ModelInstance<User
 
     const cedarMetadataRecords = server.createList('cedar-metadata-record', 2);
     cedarMetadataRecords.push(server.create('cedar-metadata-record', 'isDraft'));
+    cedarMetadataRecords.push(server.create('cedar-metadata-record', 'isTesting'));
 
     decaf.update({
         cedarMetadataRecords,

diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -246,6 +246,7 @@ cedar:
         cancel-button: 'Cancel'
         error: 'Save Failed. Please try again.'
         edit-tooltip: 'Edit the metadata record.'
+        share: 'Copy url to clipboard to share.'
     renderer:
         draft: 'Draft'
         draft-explanation: "This metadata has a status of 'Draft' and is not publicly viewable. To 'Publish' this metadata please fill in all required fields and resubmit the data."