diff --git a/app/guid-node/registrations/controller.ts b/app/guid-node/registrations/controller.ts index 764ac1b785a..74f2947a4e8 100644 --- a/app/guid-node/registrations/controller.ts +++ b/app/guid-node/registrations/controller.ts @@ -55,20 +55,15 @@ export default class GuidNodeRegistrations extends Controller { this.set('schemas', schemas); } - @computed('tab') - get activeTab() { - return this.tab ? this.tab : 'registrations'; - } - @computed('node.{id,root.id,root.userHasAdminPermission}') get isComponentRootAdmin() { return this.node && this.node.id !== this.node.root.get('id') && this.node.root.get('userHasAdminPermission'); } @action - changeTab(activeId: string) { - this.set('tab', activeId === 'registrations' ? undefined : activeId); - this.analytics.click('tab', `Registrations tab - Change tab to: ${activeId}`); + changeTab(activeId: number) { + const tabName = activeId === 0 ? 'registrations' : 'drafts'; + this.analytics.click('tab', `Registrations tab - Change tab to: ${tabName}`); } @action diff --git a/app/guid-node/registrations/styles.scss b/app/guid-node/registrations/styles.scss index e005378ff47..d88d4769385 100644 --- a/app/guid-node/registrations/styles.scss +++ b/app/guid-node/registrations/styles.scss @@ -69,3 +69,43 @@ h4:global(.NewRegistrationModal__header) { :global(.PreRegChallengeModal__consent) { font-weight: normal; } + +.Tabs { + /* stylelint-disable selector-no-qualifying-type */ + ul.TabList { + margin-bottom: 10px; + border-bottom: 1px solid #ddd; + box-sizing: border-box; + color: rgb(51, 51, 51); + display: block; + line-height: 20px; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + height: 41px; + padding: 0; + } + /* stylelint-enable selector-no-qualifying-type */ + .TabList { + li { + display: block; + position: relative; + margin-bottom: -1px; + float: left; + height: 41px; + padding: 10px 15px; + } + + li:global(.ember-tabs__tab--selected) { + background-color: #f8f8f8; + border-bottom: 2px solid #204762; + } + + li:hover { + border-color: transparent; + text-decoration: none; + background-color: #f8f8f8; + color: var(--primary-color); + } + } +} diff --git a/app/guid-node/registrations/template.hbs b/app/guid-node/registrations/template.hbs index 84dd28bff41..882bfc0e99e 100644 --- a/app/guid-node/registrations/template.hbs +++ b/app/guid-node/registrations/template.hbs @@ -8,16 +8,25 @@ >
- - + {{t 'node.registrations.registrations'}} + {{#if this.node.userHasReadPermission}} + + {{t 'node.registrations.draft_registrations'}} + + {{/if}} + +
- + {{#if this.node.userHasReadPermission}} - +
- + {{/if}} - +
{{#if this.node.userHasAdminPermission}}
diff --git a/package.json b/package.json index fca7fde25e2..b3bb019f129 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "ember-ajax": "^5.0.0", "ember-angle-bracket-invocation-polyfill": "^2.0.2", "ember-animated": "^0.9.0", + "ember-aria-tabs": "^4.0.0", "ember-auto-import": "^1.11.2", "ember-bootstrap": "^4.6.3", "ember-bootstrap-datepicker": "^2.0.9", diff --git a/tests/acceptance/guid-node/registrations-test.ts b/tests/acceptance/guid-node/registrations-test.ts index b7677c70982..28039c43f1e 100644 --- a/tests/acceptance/guid-node/registrations-test.ts +++ b/tests/acceptance/guid-node/registrations-test.ts @@ -42,7 +42,7 @@ module('Acceptance | guid-node/registrations', hooks => { 'There have been no completed registrations of this project.', ); - assert.dom('[data-test-registrations-container] a[href="#drafts"]').doesNotExist( + assert.dom('[data-test-drafts-tab]').doesNotExist( 'Logged out users cannot access draft registrations tab', ); }); @@ -91,11 +91,11 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-node-card]').exists({ count: 1 }, 'One registration card shown'); - assert.dom('[data-test-registrations-container] a[href="#drafts"]').exists( + assert.dom('[data-test-drafts-tab]').exists( 'read-permission contributors can see drafts tab', ); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-registrations-pane]').isNotVisible(); @@ -139,7 +139,7 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-node-card]').exists({ count: 1 }); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-registrations-pane]').isNotVisible(); assert.dom('[data-test-draft-registrations-pane]').isVisible(); @@ -177,7 +177,7 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-new-registration-button]').exists(); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-registrations-pane]').isNotVisible(); assert.dom('[data-test-draft-registrations-pane]').isVisible(); @@ -227,7 +227,7 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-node-card-body]').includesText(registrationSchemaName); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-registrations-pane]').isNotVisible(); assert.dom('[data-test-draft-registrations-pane]').isVisible(); @@ -272,7 +272,7 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-node-card]').includesText(node.title); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-registrations-pane]').isNotVisible(); assert.dom('[data-test-draft-registrations-pane]').isVisible(); @@ -320,7 +320,7 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-new-registration-button]').exists({ count: 1 }); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-draft-registrations-pane]').isVisible(); @@ -355,7 +355,7 @@ module('Acceptance | guid-node/registrations', hooks => { assert.dom('[data-test-new-registration-button]').exists({ count: 1 }); - await untrackedClick('[data-test-registrations-container] a[href="#drafts"]'); + await untrackedClick('[data-test-drafts-tab]'); assert.dom('[data-test-draft-registrations-pane]').isVisible(); diff --git a/yarn.lock b/yarn.lock index 0407830de5a..5e5ecb111bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4328,7 +4328,7 @@ babel-plugin-ember-modules-api-polyfill@^3.2.0: dependencies: ember-rfc176-data "^0.3.16" -babel-plugin-ember-modules-api-polyfill@^3.5.0: +babel-plugin-ember-modules-api-polyfill@^3.3.0, babel-plugin-ember-modules-api-polyfill@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-3.5.0.tgz#27b6087fac75661f779f32e60f94b14d0e9f6965" integrity sha512-pJajN/DkQUnStw0Az8c6khVcMQHgzqWr61lLNtVeu0g61LRW0k9jyK7vaedrHDWGe/Qe8sxG5wpiyW9NsMqFzA== @@ -7929,6 +7929,15 @@ ember-animated@^0.9.0: ember-maybe-import-regenerator "^0.1.5" ember-named-arguments-polyfill "^1.0.0" +ember-aria-tabs@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/ember-aria-tabs/-/ember-aria-tabs-4.0.0.tgz#01f9aaf98468ff21e254fdfaff7747972228cadc" + integrity sha512-hqQEXdzUMRA0RD6oMYJfkZzWngZfcFgYFBwbL4WSudBgnPSz0DrJgMtwvys0qjcP0Gs/16Jr1VAUQW8Y//lyQw== + dependencies: + ember-cached-decorator-polyfill "^0.1.1" + ember-cli-babel "7.24.0" + ember-cli-htmlbars "^5.3.1" + ember-asset-loader@^0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/ember-asset-loader/-/ember-asset-loader-0.6.1.tgz#2eb81221406164d19127eba5b3d10f908df89a17" @@ -8061,7 +8070,7 @@ ember-bootstrap@^4.6.3: silent-error "^1.0.1" tracked-toolbox "^1.2.1" -ember-cache-primitive-polyfill@^1.0.0: +ember-cache-primitive-polyfill@^1.0.0, ember-cache-primitive-polyfill@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/ember-cache-primitive-polyfill/-/ember-cache-primitive-polyfill-1.0.1.tgz#a27075443bd87e5af286c1cd8a7df24e3b9f6715" integrity sha512-hSPcvIKarA8wad2/b6jDd/eU+OtKmi6uP+iYQbzi5TQpjsqV6b4QdRqrLk7ClSRRKBAtdTuutx+m+X+WlEd2lw== @@ -8071,6 +8080,16 @@ ember-cache-primitive-polyfill@^1.0.0: ember-compatibility-helpers "^1.2.1" silent-error "^1.1.1" +ember-cached-decorator-polyfill@^0.1.1: + version "0.1.4" + resolved "https://registry.yarnpkg.com/ember-cached-decorator-polyfill/-/ember-cached-decorator-polyfill-0.1.4.tgz#f1e2c65cc78d0d9c4ac0e047e643af477eb85ace" + integrity sha512-JOK7kBCWsTVCzmCefK4nr9BACDJk0owt9oIUaVt6Q0UtQ4XeAHmoK5kQ/YtDcxQF1ZevHQFdGhsTR3JLaHNJgA== + dependencies: + "@glimmer/tracking" "^1.0.4" + ember-cache-primitive-polyfill "^1.0.1" + ember-cli-babel "^7.21.0" + ember-cli-babel-plugin-helpers "^1.1.1" + ember-changeset-validations@^3.14.2: version "3.14.2" resolved "https://registry.yarnpkg.com/ember-changeset-validations/-/ember-changeset-validations-3.14.2.tgz#bb2a326d03a11d1dc3347c35c455d2e091a88176" @@ -8113,6 +8132,39 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0, em resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.1.tgz#5016b80cdef37036c4282eef2d863e1d73576879" integrity sha512-sKvOiPNHr5F/60NLd7SFzMpYPte/nnGkq/tMIfXejfKHIhaiIkYFqX8Z9UFTKWLLn+V7NOaby6niNPZUdvKCRw== +ember-cli-babel@7.24.0: + version "7.24.0" + resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.24.0.tgz#d58670d0f214c63a46f44f86e7c407799d77fc45" + integrity sha512-IpqMqOS1VI2wVLIREdEXG9WG05YBulg20t0K27yl2aBjmShvLMRIodcNiKataTgf/dDiU0EWQBGl7VLBLBkFgQ== + dependencies: + "@babel/core" "^7.12.0" + "@babel/helper-compilation-targets" "^7.12.0" + "@babel/plugin-proposal-class-properties" "^7.10.4" + "@babel/plugin-proposal-decorators" "^7.10.5" + "@babel/plugin-transform-modules-amd" "^7.10.5" + "@babel/plugin-transform-runtime" "^7.12.0" + "@babel/plugin-transform-typescript" "^7.12.0" + "@babel/polyfill" "^7.11.5" + "@babel/preset-env" "^7.12.0" + "@babel/runtime" "^7.12.0" + amd-name-resolver "^1.3.1" + babel-plugin-debug-macros "^0.3.4" + babel-plugin-ember-data-packages-polyfill "^0.1.2" + babel-plugin-ember-modules-api-polyfill "^3.3.0" + babel-plugin-module-resolver "^3.2.0" + broccoli-babel-transpiler "^7.8.0" + broccoli-debug "^0.6.4" + broccoli-funnel "^2.0.2" + broccoli-source "^2.1.2" + clone "^2.1.2" + ember-cli-babel-plugin-helpers "^1.1.1" + ember-cli-version-checker "^4.1.0" + ensure-posix-path "^1.0.2" + fixturify-project "^1.10.0" + resolve-package-path "^3.1.0" + rimraf "^3.0.1" + semver "^5.5.0" + ember-cli-babel@7.5.0: version "7.5.0" resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.5.0.tgz#af654dcef23630391d2efe85aaa3bdf8b6ca17b7"