-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI: VAULT-21538 unauth endpoint message display (#24665)
* WIP unauth display * Add modal custom message * Close multiple modals * Update todo with ticket number * On init make custom message request * Use serializer * Update fetchMessages * Add copyright headers * Add services and serializers * Send null instead of empty strings * Fix tests! * Add copywrite headers * Add some acceptance tests * Test cleanup * Put tests back * pass hooks to module * Move module out * Seperate tests * Copywrite * Add aria-prohibited-attr runList options * Code cleanup * Add date-time-local transform * Add copyright headers * Remove comments * Remove date transform stuff for now! * Put getISODateFormat back into the serailize function
- Loading branch information
1 parent
833c527
commit 1622f09
Showing
12 changed files
with
331 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: BUSL-1.1 | ||
| */ | ||
|
|
||
| import Service, { inject as service } from '@ember/service'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
|
|
||
| export default class CustomMessageService extends Service { | ||
| @service store; | ||
| @service namespace; | ||
| @tracked messages = []; | ||
| @tracked showMessageModal = true; | ||
|
|
||
| constructor() { | ||
| super(...arguments); | ||
| this.fetchMessages(this.namespace.path); | ||
| } | ||
|
|
||
| get bannerMessages() { | ||
| return this.messages?.filter((message) => message?.type === 'banner'); | ||
| } | ||
|
|
||
| get modalMessages() { | ||
| return this.messages?.filter((message) => message?.type === 'modal'); | ||
| } | ||
|
|
||
| async fetchMessages(ns) { | ||
| try { | ||
| const url = '/v1/sys/internal/ui/unauthenticated-messages'; | ||
| const opts = { | ||
| method: 'GET', | ||
| headers: {}, | ||
| }; | ||
| if (ns) { | ||
| opts.headers['X-Vault-Namespace'] = ns; | ||
| } | ||
| const result = await fetch(url, opts); | ||
| const body = await result.json(); | ||
| if (body.errors) return (this.messages = []); | ||
| const serializer = this.store.serializerFor('config-ui/message'); | ||
| this.messages = serializer.mapPayload(body); | ||
| } catch (e) { | ||
| return e; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: BUSL-1.1 | ||
| */ | ||
|
|
||
| import { module, test } from 'qunit'; | ||
| import { setupApplicationTest } from 'ember-qunit'; | ||
| import { click, visit } from '@ember/test-helpers'; | ||
| import { PAGE } from 'vault/tests/helpers/config-ui/message-selectors'; | ||
| import { setupMirage } from 'ember-cli-mirage/test-support'; | ||
|
|
||
| const unauthenticatedMessageResponse = { | ||
| request_id: '664fbad0-fcd8-9023-4c5b-81a7962e9f4b', | ||
| lease_id: '', | ||
| renewable: false, | ||
| lease_duration: 0, | ||
| data: { | ||
| key_info: { | ||
| 'some-awesome-id-2': { | ||
| authenticated: false, | ||
| end_time: null, | ||
| link: { | ||
| title: '', | ||
| }, | ||
| message: 'aGVsbG8gd29ybGQgaGVsbG8gd29scmQ=', | ||
| options: null, | ||
| start_time: '2024-01-04T08:00:00Z', | ||
| title: 'Banner title', | ||
| type: 'banner', | ||
| }, | ||
| 'some-awesome-id-1': { | ||
| authenticated: false, | ||
| end_time: null, | ||
| link: { | ||
| title: '', | ||
| }, | ||
| message: 'aGVyZSBpcyBhIGNvb2wgbWVzc2FnZQ==', | ||
| options: null, | ||
| start_time: '2024-01-01T08:00:00Z', | ||
| title: 'Modal title', | ||
| type: 'modal', | ||
| }, | ||
| }, | ||
| keys: ['some-awesome-id-2', 'some-awesome-id-1'], | ||
| }, | ||
| wrap_info: null, | ||
| warnings: null, | ||
| auth: null, | ||
| mount_type: '', | ||
| }; | ||
|
|
||
| module('Acceptance | auth custom messages auth tests', function (hooks) { | ||
| setupApplicationTest(hooks); | ||
| setupMirage(hooks); | ||
|
|
||
| hooks.beforeEach(function () { | ||
| return this.server.get('/sys/internal/ui/mounts', () => ({})); | ||
| }); | ||
|
|
||
| test('it shows the alert banner and modal message', async function (assert) { | ||
| this.server.get('/sys/internal/ui/unauthenticated-messages', function () { | ||
| return unauthenticatedMessageResponse; | ||
| }); | ||
| await visit('/vault/auth'); | ||
| const modalId = 'some-awesome-id-1'; | ||
| const alertId = 'some-awesome-id-2'; | ||
| assert.dom(PAGE.modal(modalId)).exists(); | ||
| assert.dom(PAGE.modalTitle(modalId)).hasText('Modal title'); | ||
| assert.dom(PAGE.modalBody(modalId)).exists(); | ||
| assert.dom(PAGE.modalBody(modalId)).hasText('here is a cool message'); | ||
| await click(PAGE.modalButton(modalId)); | ||
| assert.dom(PAGE.alertTitle(alertId)).hasText('Banner title'); | ||
| assert.dom(PAGE.alertDescription(alertId)).hasText('hello world hello wolrd'); | ||
| }); | ||
| test('it shows the multiple modal messages', async function (assert) { | ||
| const modalIdOne = 'some-awesome-id-2'; | ||
| const modalIdTwo = 'some-awesome-id-1'; | ||
|
|
||
| this.server.get('/sys/internal/ui/unauthenticated-messages', function () { | ||
| unauthenticatedMessageResponse.data.key_info[modalIdOne].type = 'modal'; | ||
| unauthenticatedMessageResponse.data.key_info[modalIdOne].title = 'Modal title 1'; | ||
| unauthenticatedMessageResponse.data.key_info[modalIdTwo].type = 'modal'; | ||
| unauthenticatedMessageResponse.data.key_info[modalIdTwo].title = 'Modal title 2'; | ||
| return unauthenticatedMessageResponse; | ||
| }); | ||
| await visit('/vault/auth'); | ||
| assert.dom(PAGE.modal(modalIdOne)).exists(); | ||
| assert.dom(PAGE.modalTitle(modalIdOne)).hasText('Modal title 1'); | ||
| assert.dom(PAGE.modalBody(modalIdOne)).exists(); | ||
| assert.dom(PAGE.modalBody(modalIdOne)).hasText('hello world hello wolrd'); | ||
| await click(PAGE.modalButton(modalIdOne)); | ||
| assert.dom(PAGE.modal(modalIdTwo)).exists(); | ||
| assert.dom(PAGE.modalTitle(modalIdTwo)).hasText('Modal title 2'); | ||
| assert.dom(PAGE.modalBody(modalIdTwo)).exists(); | ||
| assert.dom(PAGE.modalBody(modalIdTwo)).hasText('here is a cool message'); | ||
| await click(PAGE.modalButton(modalIdTwo)); | ||
| }); | ||
| test('it shows the multiple banner messages', async function (assert) { | ||
| const bannerIdOne = 'some-awesome-id-2'; | ||
| const bannerIdTwo = 'some-awesome-id-1'; | ||
|
|
||
| this.server.get('/sys/internal/ui/unauthenticated-messages', function () { | ||
| unauthenticatedMessageResponse.data.key_info[bannerIdOne].type = 'banner'; | ||
| unauthenticatedMessageResponse.data.key_info[bannerIdOne].title = 'Banner title 1'; | ||
| unauthenticatedMessageResponse.data.key_info[bannerIdTwo].type = 'banner'; | ||
| unauthenticatedMessageResponse.data.key_info[bannerIdTwo].title = 'Banner title 2'; | ||
| return unauthenticatedMessageResponse; | ||
| }); | ||
| await visit('/vault/auth'); | ||
| assert.dom(PAGE.alertTitle(bannerIdOne)).hasText('Banner title 1'); | ||
| assert.dom(PAGE.alertDescription(bannerIdOne)).hasText('hello world hello wolrd'); | ||
| assert.dom(PAGE.alertTitle(bannerIdTwo)).hasText('Banner title 2'); | ||
| assert.dom(PAGE.alertDescription(bannerIdTwo)).hasText('here is a cool message'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: MPL-2.0 | ||
| */ | ||
|
|
||
| export const PAGE = { | ||
| // General selectors that are common between pages | ||
| radio: (radioName) => `[data-test-radio="${radioName}"]`, | ||
| field: (fieldName) => `[data-test-field="${fieldName}"]`, | ||
| input: (input) => `[data-test-input="${input}"]`, | ||
| button: (buttonName) => `[data-test-button="${buttonName}"]`, | ||
| inlineErrorMessage: `[data-test-inline-error-message]`, | ||
| fieldVaildation: (fieldName) => `[data-test-field-validation="${fieldName}"]`, | ||
| modal: (name) => `[data-test-modal="${name}"]`, | ||
| modalTitle: (title) => `[data-test-modal-title="${title}"]`, | ||
| modalBody: (name) => `[data-test-modal-body="${name}"]`, | ||
| modalButton: (name) => `[data-test-modal-button="${name}"]`, | ||
| alert: (name) => `data-test-alert=${name}`, | ||
| alertTitle: (name) => `[data-test-alert-title="${name}"]`, | ||
| alertDescription: (name) => `[data-test-alert-description="${name}"]`, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.