[ENG-8078] Show a dedicated empty linked services page when no LINK add-on is configured (#2574)

Author: opaduchak

app/guid-node/links/styles.scss

@@ -22,3 +22,8 @@
     max-width: 50px;
     max-height: 50px;
 }
+
+.links-page-wrapper {
+    margin: 20px;
+}
+

app/guid-node/links/template.hbs

@@ -1,38 +1,47 @@
-<h2>{{t 'links.linked-services'}}</h2>
-
-<table local-class='table'>
-    <thead>
-        <tr local-class='table-row'>
-            <th local-class='table-header'>{{t 'links.linked-service'}}</th>
-            <th local-class='table-header'>{{t 'links.display-name'}}</th>
-            <th local-class='table-header'>{{t 'links.resource-type'}}</th>
-            <th local-class='table-header'>
-                {{#if this.currentUserCanEdit}}
-                    <OsfLink
-                        @route='guid-node.addons'
-                        @queryParams={{hash
-                            activeFilterType='verified-link'
-                            tabIndex='1'
-                        }}
-                        @models={{array this.model.node.id}}
-                    >
-                        {{t 'links.edit'}}
-                    </OsfLink>
-                {{/if}}
-            </th>
-        </tr>
-    </thead>
-    <tbody>
-        {{#each this.model.configuredLinkAddons as |configuredLinkAddon|}}
-            <tr local-class='table-row'>
-                <td local-class='table-cell'>
-                    <img alt={{t 'links.logo'}} local-class='logo' src={{configuredLinkAddon.externalLinkService.iconUrl}}>
-                    <span>{{configuredLinkAddon.externalLinkService.displayName}}</span>
-                </td>
-                <td local-class='table-cell'>{{configuredLinkAddon.displayName}}</td>
-                <td local-class='table-cell'>{{configuredLinkAddon.resourceType}}</td>
-                <td local-class='table-cell'><a href={{configuredLinkAddon.targetUrl}}>{{t 'links.link'}}</a></td>
-            </tr>
-        {{/each}}
-    </tbody>
-</table>
+<div local-class='links-page-wrapper'>
+    <h2>{{t 'links.linked-services'}}</h2>
+    {{#if this.model.configuredLinkAddons}}
+        <table local-class='table'>
+            <thead>
+                <tr local-class='table-row'>
+                    <th local-class='table-header'>{{t 'links.linked-service'}}</th>
+                    <th local-class='table-header'>{{t 'links.display-name'}}</th>
+                    <th local-class='table-header'>{{t 'links.resource-type'}}</th>
+                    <th local-class='table-header'>
+                        {{#if this.currentUserCanEdit}}
+                            <OsfLink
+                                @route='guid-node.addons'
+                                @queryParams={{hash
+                                activeFilterType='verified-link'
+                                tabIndex='1'
+                            }}
+                                @models={{array this.model.node.id}}
+                            >
+                                {{t 'links.edit'}}
+                            </OsfLink>
+                        {{/if}}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {{#each this.model.configuredLinkAddons as |configuredLinkAddon|}}
+                    <tr local-class='table-row'>
+                        <td local-class='table-cell'>
+                            <img alt={{t 'links.logo'}} local-class='logo'
+                                 src={{configuredLinkAddon.externalLinkService.iconUrl}}>
+                            <span>{{configuredLinkAddon.externalLinkService.displayName}}</span>
+                        </td>
+                        <td local-class='table-cell'>{{configuredLinkAddon.displayName}}</td>
+                        <td local-class='table-cell'>{{configuredLinkAddon.resourceType}}</td>
+                        <td local-class='table-cell'><a href={{configuredLinkAddon.targetUrl}}>{{t 'links.link'}}</a></td>
+                    </tr>
+                {{/each}}
+            </tbody>
+        </table>
+    {{else}}
+        <p>{{t 'links.empty-screen-message'}}</p>
+        {{#if this.currentUserCanEdit}}
+            <p> {{t 'links.point-to-addons-message'}} <a href='/{{this.model.node.id}}/addons?activeFilterType=verified-link'>{{t 'addons.heading'}}</a></p>
+        {{/if}}
+    {{/if}}
+</div>

lib/osf-components/addon/components/addons-service/file-manager/component.ts

@@ -14,6 +14,7 @@ import AuthorizedAccountModel from 'ember-osf-web/models/authorized-account';
 import ConfiguredAddonModel from 'ember-osf-web/models/configured-addon';
 import captureException, { getApiErrorMessage } from 'ember-osf-web/utils/capture-exception';
 import ConfiguredLinkAddonModel from 'ember-osf-web/models/configured-link-addon';
+import AuthorizedLinkAccountModel from 'ember-osf-web/models/authorized-link-account';
 
 interface Args {
     configuredAddon?: ConfiguredAddonModel;
@@ -48,7 +49,8 @@ export default class FileManager extends Component<Args> {
     }
 
     get isLinkAddon() {
-        return this.operationInvocableModel instanceof ConfiguredLinkAddonModel;
+        return this.operationInvocableModel instanceof ConfiguredLinkAddonModel ||
+            this.operationInvocableModel instanceof AuthorizedLinkAccountModel ;
     }
 
     constructor(owner: unknown, args: Args) {

translations/en-us.yml

@@ -381,6 +381,8 @@ links:
     linked-service: 'Linked Service'
     display-name: 'Display Name'
     resource-type: 'Resource Type'
+    empty-screen-message: 'This project has no configured linked services at a moment '
+    point-to-addons-message: 'In order to add linked service visit'
     link: 'Link'
     edit: 'Edit'
     icon: '{addonName} icon'