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

app/guid-file/-components/file-detail-layout/styles.scss

@@ -1,18 +1,29 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
 .container {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
 }
 
 .main-column {
-    flex-grow: 3;
     z-index: 1;
+    width: 70%;
+
+    &.mobile {
+        width: 100%;
+    }
+
+    &.is-closed {
+        flex: 1;
+        width: calc(100% - 72px);
+    }
 
     h3 {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        max-width: 70vw;
+        width: 70%;
     }
 }
 
@@ -22,25 +33,28 @@
     flex-basis: 300px;
     flex-direction: column;
     flex-grow: 1;
-    width: 28vw;
+    width: calc(30% - 72px);
+    min-width: 400px;
 
     &.is-closed {
         display: none;
     }
 }
 
 .right-buttons {
-    @media (max-width: 767px) {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-        border-top: 1px solid #ddd;
-    }
     flex-grow: 0;
     display: flex;
     flex-direction: column;
     border-left: 1px solid #ddd;
     z-index: 1;
+    width: 72px;
+    min-width: 72px;
+
+    &.mobile {
+        flex-direction: row;
+        width: 100%;
+        margin-bottom: 10px;
+    }
 }
 
 .slide-in {

app/guid-file/-components/file-detail-layout/template.hbs

@@ -1,8 +1,8 @@
 <div local-class='container'>
     {{#if @isMobile}}
-        <div local-class='main-column'>
+        <div local-class='main-column mobile'>
             {{yield to='header'}}
-            <div local-class='right-buttons'>
+            <div local-class='right-buttons mobile'>
                 {{yield to='rightButtons'}}
             </div>
             <div>
@@ -14,7 +14,8 @@
             </div>
         </div>
     {{else}}
-        <div local-class='main-column'>
+
+        <div local-class='main-column {{if @rightColumnClosed 'is-closed'}}'>
             {{yield to='header'}}
             {{yield to='body'}}
         </div>

app/guid-file/-components/file-header/styles.scss

@@ -38,6 +38,8 @@
 
 
     &.mobile {
+        padding: 0;
+
         .flex-container-row {
             padding: 0;
             flex-direction: column;

app/guid-file/index/styles.scss

@@ -34,6 +34,7 @@
     min-width: 330px;
 
     &.mobile {
+        margin-bottom: 10px;
         margin-top: 0;
         margin-left: 10px;
         margin-right: 10px;
@@ -51,17 +52,9 @@
     background-color: $color-bg-white;
     border: 1px transparent;
     color: $color-link-dark;
-    margin: 20px 20px 0;
-
-    @media (max-width: 767px) {
-        margin: 0;
-    }
+    margin: 0;
 
     &.active {
-        @media (max-width: 767px) {
-            background-color: $color-bg-white;
-            color: $color-bg-black;
-        }
         background-color: $color-bg-gray-light;
     }
 }

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;

lib/osf-components/addon/components/cedar-metadata-renderer/styles.scss

@@ -39,7 +39,11 @@
             align-items: center;
 
             .spacer {
+                color: $color-link-dark;
                 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;
             }
         }
     }

lib/osf-components/addon/components/cedar-metadata-renderer/template.hbs

@@ -17,6 +17,21 @@
                 </div>
             {{/if}}
             <div local-class='button-container'>
+                {{#unless @displayFileMetadata}}
+                    <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>
+                {{/unless}}
                 <OsfLink
                     data-test-download-icon
                     local-class='spacer'
@@ -25,15 +40,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

lib/osf-components/addon/components/metadata/metadata-tabs/component.ts

@@ -10,6 +10,7 @@ interface TabArgs {
     target: NodeModel;
     cedarMetadataRecords: CedarMetadataRecordModel[];
     defaultIndex: number;
+    displayFileMetadata: boolean;
 }
 
 export default class MetadataTabs extends Component<TabArgs> {
@@ -24,9 +25,28 @@ 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.args.displayFileMetadata) {
+            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() {

lib/osf-components/addon/components/tos-consent-banner/styles.scss

@@ -14,7 +14,7 @@
     text-align: center;
 
     a {
-        color: #2d6a9f;
+        color: $color-link-dark;
     }
 
     label {

mirage/scenarios/dashboard.ts

@@ -102,7 +102,7 @@ function create3CedarMetadataFile(server: Server, currentUser: ModelInstance<Use
 
     const filesNode = server.create('node', {
         id: 'read-only',
-        title: 'Read-only user and non-admin',
+        title: 'Read-only user and non-admin and a super long name to see if there is overflow into the right nav area',
         boaEnabled: true,
         currentUserPermissions: [Permission.Read],
     }, 'withFiles', 'withStorage', 'withContributors', 'withAffiliatedInstitutions', 'withDoi', 'withLinkedByNodes');
@@ -113,7 +113,8 @@ function create3CedarMetadataFile(server: Server, currentUser: ModelInstance<Use
 
     const cedarFileNode = server.create('file', {
         id: '3-cedar-metadata-file',
-        name: 'cedar metadata file',
+        // eslint-disable-next-line max-len
+        name: 'Cedar Metadata File on a read-only user and non-admin with a super long name to see if there is overflow in the right nav area',
         checkout: currentUser.id,
         target: filesNode,
         parentFolder: filesNodeOsfStorage.rootFolder,

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,

mirage/serializers/cedar-metadata-record.ts

@@ -16,7 +16,7 @@ export default class CedarMetadataRecordMirageSerializer extends ApplicationSeri
     buildNormalLinks(model: ModelInstance<MirageCedarMetadataRecordModel>) {
         return {
             self: `${apiUrl}/_/cedar_metadata_records/${model.id}/`,
-            metadataDownload: `${apiUrl}/_/cedar_metadata_records/${model.id}/metadata_download/`,
+            metadata_download: `${apiUrl}/_/cedar_metadata_records/${model.id}/metadata_download/`,
         };
     }
 

translations/en-us.yml

@@ -172,7 +172,7 @@ file-detail:
     registration-date: 'Date registered'
     withdrawal-date: 'Date withdrawn'
     metadata:
-        add-schema: 'Add Schema'
+        add-schema: 'Add Record'
         add-schema-tooltip: 'Add a Cedar Metadata schema to this file.'
         return-to-file: 'Return to {fileName}'
     resource-help-dialog:
@@ -221,23 +221,19 @@ metadata:
     main-tab: 'OSF'
     header: 'Metadata'
     download: 'Download Metadata Record'
-    add-schema: 'Add Community Metadata Schemas'
+    add-schema: 'Add Community Metadata Records'
     see-more: 'Click to see more metadata options'
     see-less: 'Click to see less metadata options'
     add-flow:
-        select-metadata-schema: 'Select a Metadata Schema'
-        select-different-metadata-schema: 'Select a different schema'
-        explanation: 'OSF has partnered with CEDAR to provide more ways to annotate your research with domain-specific metadata schemas. If a schema is missing, let us know at <a href="mailto:{supportEmail}">{supportEmail}</a>.'
-        available-schemas: 'Available Schemas from CEDAR'
+        select-metadata-schema: 'Select a Metadata Template'
+        select-different-metadata-schema: 'Select a different template'
+        explanation: 'OSF has partnered with CEDAR <a target="_new" href="https://metadatacenter.org/">https://metadatacenter.org</a> to provide more ways to annotate your research with domain or community-specific metadata records.  If you would like to request the addition of a new metadata template, contact us at <a href="mailto:{supportEmail}">{supportEmail}</a>.'
+        available-schemas: 'Available Templates from CEDAR'
         select: 'Select'
-        tab-title-select: 'Select Schema'
+        tab-title-select: 'Select Record'
         tab-title-add: 'Add'
-        saving: 'Saving Template'
-        edit: 'Edit Template'
-    detail:
-        popover:
-            header: 'This is a default header'
-            content: 'This is a default content'
+        saving: 'Saving Record'
+        edit: 'Edit Record'
 cedar:
     editor:
         save-draft-button: 'Save Draft'
@@ -246,6 +242,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."