Finish up redirect service

Author: futa-ikeda

app/guid-node/addons/index/template.hbs

@@ -28,7 +28,14 @@
                 >
                     {{#if (eq manager.pageMode 'terms')}}
                         {{#if manager.selectedProviderIsRedirectService}}
-                            {{t 'addons.terms.redirect.disclaimer'}}
+                            <p>
+                                {{t 'addons.terms.redirect.disclaimer'}}
+                            </p>
+                            <p>
+                                <i>
+                                    {{t 'addons.terms.redirect.pop-up-tooltip'}}
+                                </i>
+                            </p>
                         {{else}}
                             <AddonsService::TermsOfService
                                 @provider={{provider.provider}}

app/settings/addons/styles.scss

@@ -120,4 +120,9 @@
         background-color: $bg-light;
         color: var(--primary-color);
     }
+
+    .disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
 }

app/settings/addons/template.hbs

@@ -23,9 +23,20 @@
                             <h3>
                                 {{t 'addons.terms.heading' providerName=manager.selectedProvider.provider.displayName}}
                             </h3>
-                            <AddonsService::TermsOfService
-                                @provider={{manager.selectedProvider.provider}}
-                            />
+                            {{#if manager.selectedProviderIsRedirectService}}
+                                <p>
+                                    {{t 'addons.terms.redirect.disclaimer'}}
+                                </p>
+                                <p>
+                                    <i>
+                                        {{t 'addons.terms.redirect.pop-up-tooltip'}}
+                                    </i>
+                                </p>
+                            {{else}}
+                                <AddonsService::TermsOfService
+                                    @provider={{manager.selectedProvider.provider}}
+                                />
+                            {{/if}}
                             <div local-class='float-right'>
                                 <Button
                                     data-test-addon-cancel-button
@@ -40,7 +51,11 @@
                                     @type='primary'
                                     {{on 'click' manager.acceptProviderTerms}}
                                 >
-                                    {{t 'general.confirm'}}
+                                    {{#if manager.selectedProviderIsRedirectService}}
+                                        {{t 'addons.terms.go-to-service' providerName=manager.selectedProvider.provider.displayName}}
+                                    {{else}}
+                                        {{t 'general.confirm'}}
+                                    {{/if}}
                                 </Button>
                             </div>
                         </div>
@@ -94,14 +109,14 @@
                         {{/each}}
                     </div>
                     <AriaTabs
-                        @selectedIndex={{manager.tabIndex}} @onSelect={{action manager.changeTab}} 
+                        @selectedIndex={{manager.tabIndex}} @onSelect={{action manager.changeTab}}
                         as |tab|
                     >
                         <tab.tabList
                             local-class='tab-list'
                             as |tablist|
                         >
-                            <tablist.tab 
+                            <tablist.tab
                                 data-analytics-name='All Addons Tab'
                                 data-test-all-addons-tab-control
                             >
@@ -110,6 +125,8 @@
                             <tablist.tab
                                 data-test-connected-accounts-tab-control
                                 data-analytics-name='Connected Accounts Tab'
+                                local-class='{{if manager.connectAccountsTabDisabled 'disabled'}}'
+                                @disabled={{manager.connectAccountsTabDisabled}}
                             >
                                 {{t 'addons.list.connected-accounts'}}
                             </tablist.tab>

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

@@ -53,6 +53,7 @@ export default class UserAddonManagerComponent extends Component<Args> {
     user = this.args.user;
     @tracked userReference!: UserReferenceModel;
     @tracked tabIndex = 0;
+    @tracked connectAccountsTabDisabled = false;
 
     possibleFilterTypes = Object.values(FilterTypes);
     @tracked filterTypeMapper = {
@@ -116,6 +117,11 @@ export default class UserAddonManagerComponent extends Component<Args> {
             this.filterText = '';
         }
         this.activeFilterType = type;
+        this.connectAccountsTabDisabled = false;
+        if (this.activeFilterType === FilterTypes.REDIRECT_SERVICE) {
+            this.changeTab(0);
+            this.connectAccountsTabDisabled = true;
+        }
         const activeFilterObject = this.filterTypeMapper[type];
         if (activeFilterObject.list.length === 0) {
             activeFilterObject.fetchProvidersTask.perform();
@@ -152,6 +158,10 @@ export default class UserAddonManagerComponent extends Component<Args> {
         return activeFilterObject.fetchProvidersTask.isRunning;
     }
 
+    get selectedProviderIsRedirectService() {
+        return this.selectedProvider?.provider instanceof ExternalRedirectServiceModel;
+    }
+
     @action
     connectNewProviderAccount(provider: Provider) {
         this.pageMode = UserSettingPageModes.TERMS;
@@ -160,6 +170,21 @@ export default class UserAddonManagerComponent extends Component<Args> {
 
     @action
     acceptProviderTerms() {
+        if (this.selectedProviderIsRedirectService) {
+            const openURL = new URL((this.selectedProvider!.provider as ExternalRedirectServiceModel).redirectUrl);
+            const newWindow = window.open(
+                openURL.toString(),
+                '_blank', 'popup,width=600,height=600,scrollbars=yes,resizable=yes',
+            );
+            if (newWindow) {
+                newWindow.focus();
+            } else {
+                this.toast.error(this.intl.t('addons.redirect.pop-up-error'));
+            }
+
+            this.cancelSetup();
+            return;
+        }
         this.pageMode = UserSettingPageModes.ACCOUNT_CREATE;
     }
 

lib/osf-components/addon/components/addons-service/user-addons-manager/template.hbs

@@ -10,8 +10,10 @@
     currentTypeAuthorizedServiceIds=this.currentTypeAuthorizedServiceIds
     pageMode=this.pageMode
     tabIndex=this.tabIndex
+    connectAccountsTabDisabled=this.connectAccountsTabDisabled
     changeTab=this.changeTab
     selectedProvider=this.selectedProvider
+    selectedProviderIsRedirectService=this.selectedProviderIsRedirectService
     selectedAccount=this.selectedAccount
     connectNewProviderAccount=this.connectNewProviderAccount
     acceptProviderTerms=this.acceptProviderTerms

translations/en-us.yml

@@ -321,7 +321,9 @@ addons:
             registering-false: '{provider} content will not be registered.'
             file-versions-false: '{provider} files can be viewed/downloaded outside OSF only. Version history is not supported.'
         redirect:
-            disclaimer: 'This add-on connects your OSF project to an external service. Use of this service is bound by its terms and conditions. The OSF is not responsible for the service. Danger ahead or something.'
+            disclaimer: "Clicking the button below will redirect you outside of OSF. You will need to follow that service's permissions to continue."
+            pop-up-tooltip: 'Tip: If the page does not open, try disabling your pop-up blocker.'
+            pop-up-error: 'Unable to open pop-up window. Please disable your pop-up blocker and try again.'
     accountSelect:
         heading: 'Log in to {providerName} or select an account'
         no-accounts: 'No accounts available'