-
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-21435] Message details (#24645)
* WIP * Fix timezone bug * Fix date issues on create/edit form * Add details screen * Use allFields instead of formFields * Fix tests * Address comments!
- Loading branch information
1 parent
7fb7a19
commit 1a69722
Showing
8 changed files
with
216 additions
and
13 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
50 changes: 50 additions & 0 deletions
50
ui/lib/config-ui/addon/components/messages/page/details.hbs
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,50 @@ | ||
| {{! | ||
| Copyright (c) HashiCorp, Inc. | ||
| SPDX-License-Identifier: BUSL-1.1 | ||
| ~}} | ||
|
|
||
| <Messages::TabPageHeader | ||
| @authenticated={{@message.authenticated}} | ||
| @pageTitle={{@message.title}} | ||
| @breadcrumbs={{@breadcrumbs}} | ||
| /> | ||
|
|
||
| <Toolbar> | ||
| <ToolbarActions aria-label="message delete and edit"> | ||
| {{#if @message.canDeleteCustomMessages}} | ||
| <ConfirmAction | ||
| class="toolbar-button" | ||
| @buttonColor="secondary" | ||
| @onConfirmAction={{this.deleteMessage}} | ||
| @confirmTitle="Are you sure?" | ||
| @confirmMessage="This will delete this message permanently. You cannot undo this action." | ||
| @buttonText="Delete message" | ||
| data-test-confirm-action="Delete message" | ||
| /> | ||
| <div class="toolbar-separator"></div> | ||
| {{/if}} | ||
| {{#if @message.canEditCustomMessages}} | ||
| <LinkTo class="toolbar-link" @route="messages.message.edit" @model={{@message.id}} data-test-link="edit"> | ||
| Edit message | ||
| <Icon @name="chevron-right" /> | ||
| </LinkTo> | ||
| {{/if}} | ||
| </ToolbarActions> | ||
| </Toolbar> | ||
|
|
||
| {{#each @message.allFields as |attr|}} | ||
| {{#if (or (eq attr.name "endTime") (eq attr.name "startTime"))}} | ||
| {{! if the attr is an endTime and is falsy, we want to show a 'Never' text value }} | ||
| <InfoTableRow | ||
| @label={{capitalize (humanize (dasherize attr.name))}} | ||
| @value={{if | ||
| (and (eq attr.name "endTime") (not (get @message attr.name))) | ||
| "Never" | ||
| (date-format (get @message attr.name) "MMM d, yyyy hh:mm aaa" withTimeZone=true) | ||
| }} | ||
| /> | ||
| {{else}} | ||
| <InfoTableRow @label={{capitalize (humanize (dasherize attr.name))}} @value={{get @message attr.name}} /> | ||
| {{/if}} | ||
|
|
||
| {{/each}} |
32 changes: 32 additions & 0 deletions
32
ui/lib/config-ui/addon/components/messages/page/details.js
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,32 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: BUSL-1.1 | ||
| */ | ||
|
|
||
| import Component from '@glimmer/component'; | ||
| import { inject as service } from '@ember/service'; | ||
| import { action } from '@ember/object'; | ||
|
|
||
| /** | ||
| * @module Page::MessageDetails | ||
| * Page::MessageDetails components are used to display a message | ||
| * @example | ||
| * ```js | ||
| * <Page::MessageDetails @message={{this.message}} /> | ||
| * ``` | ||
| * @param {model} message - message model | ||
| */ | ||
|
|
||
| export default class MessageDetails extends Component { | ||
| @service store; | ||
| @service router; | ||
| @service flashMessages; | ||
|
|
||
| @action | ||
| async deleteMessage() { | ||
| this.store.clearDataset('config-ui/message'); | ||
| await this.args.message.destroyRecord(this.args.message.id); | ||
| this.router.transitionTo('vault.cluster.config-ui.messages'); | ||
| this.flashMessages.success(`Successfully deleted ${this.args.message.title}.`); | ||
| } | ||
| } |
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
87 changes: 87 additions & 0 deletions
87
ui/tests/integration/components/config-ui/messages/page/details-test.js
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,87 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: BUSL-1.1 | ||
| */ | ||
|
|
||
| import { module, test } from 'qunit'; | ||
| import { setupRenderingTest } from 'vault/tests/helpers'; | ||
| import { setupMirage } from 'ember-cli-mirage/test-support'; | ||
| import { setupEngine } from 'ember-engines/test-support'; | ||
| import { render } from '@ember/test-helpers'; | ||
| import { hbs } from 'ember-cli-htmlbars'; | ||
| import { dateFormat } from 'core/helpers/date-format'; | ||
|
|
||
| const allFields = [ | ||
| { label: 'Active', key: 'active' }, | ||
| { label: 'Type', key: 'type' }, | ||
| { label: 'Authenticated', key: 'authenticated' }, | ||
| { label: 'Title', key: 'title' }, | ||
| { label: 'Message', key: 'message' }, | ||
| { label: 'Start time', key: 'startTime' }, | ||
| { label: 'End time', key: 'endTime' }, | ||
| ]; | ||
|
|
||
| module('Integration | Component | messages/page/details', function (hooks) { | ||
| setupRenderingTest(hooks); | ||
| setupEngine(hooks, 'config-ui'); | ||
| setupMirage(hooks); | ||
|
|
||
| hooks.beforeEach(function () { | ||
| this.context = { owner: this.engine }; | ||
| this.store = this.owner.lookup('service:store'); | ||
|
|
||
| this.server.post('/sys/capabilities-self', () => ({ | ||
| data: { | ||
| capabilities: ['root'], | ||
| }, | ||
| })); | ||
|
|
||
| this.store.pushPayload('config-ui/message', { | ||
| modelName: 'config-ui/message', | ||
| id: '01234567-89ab-cdef-0123-456789abcdef', | ||
| active: true, | ||
| type: 'banner', | ||
| authenticated: true, | ||
| title: 'Message title 1', | ||
| message: 'Some long long long message', | ||
| link: { title: 'here', href: 'www.example.com' }, | ||
| startTime: '2021-08-01T00:00:00Z', | ||
| endTime: '', | ||
| canDeleteCustomMessages: true, | ||
| canEditCustomMessages: true, | ||
| }); | ||
| }); | ||
|
|
||
| test('it should show the message details', async function (assert) { | ||
| this.message = await this.store.peekRecord('config-ui/message', '01234567-89ab-cdef-0123-456789abcdef'); | ||
|
|
||
| await render(hbs`<Messages::Page::Details @message={{this.message}} />`, { | ||
| owner: this.engine, | ||
| }); | ||
| assert.dom('[data-test-page-title]').hasText('Message title 1'); | ||
| assert | ||
| .dom('[data-test-component="info-table-row"]') | ||
| .exists({ count: allFields.length }, 'Correct number of filtered fields render'); | ||
| allFields.forEach((field) => { | ||
| assert | ||
| .dom(`[data-test-row-label="${field.label}"]`) | ||
| .hasText(field.label, `${field.label} label renders`); | ||
| if (field.key === 'startTime' || field.key === 'endTime') { | ||
| const formattedDate = dateFormat([this.message[field.key], 'MMM d, yyyy hh:mm aaa'], { | ||
| withTimeZone: true, | ||
| }); | ||
| assert | ||
| .dom(`[data-test-row-value="${field.label}"]`) | ||
| .hasText(formattedDate || 'Never', `${field.label} value renders`); | ||
| } else if (field.key === 'authenticated' || field.key === 'active') { | ||
| assert | ||
| .dom(`[data-test-value-div="${field.label}"]`) | ||
| .hasText(this.message[field.key] ? 'Yes' : 'No', `${field.label} value renders`); | ||
| } else { | ||
| assert | ||
| .dom(`[data-test-row-value="${field.label}"]`) | ||
| .hasText(this.message[field.key], `${field.label} value renders`); | ||
| } | ||
| }); | ||
| }); | ||
| }); |
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