CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Icu 10516 move metadata list to rose (#1824)

Browse Source 
* feat: 🎸 Add rose metadata-list component

✅ Closes: ICU-10516

* refactor: 💡 remove metadata-list component from admin app
This commit is contained in:
Cameron Perera authored and GitHub committed 2023-08-04 14:09:20 -05:00
1 parent 0c49790fa1
commit 18833c9f22
12 files changed
+111 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/metadata-list/index.hbs
+10
View File
@@ -0,0 +1,10 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<ul class='rose-metadata-list {{@orientation}}'>
{{yield
(hash Item=(component 'rose/metadata-list/item' icon=@icon color=@color))
}}
</ul>
addons/rose/addon/components/rose/metadata-list/index.stories.mdx
+50
View File
@@ -0,0 +1,50 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/MetadataList" component="MetadataList" />
# MetadataList
A page section component that allows for a list of metadata items.
```handlebars
<Rose::MetadataList @orientation='vertical' as |list|>
<list.Item @icon='arrow-up' @color='success'>
Text Here
</list.Item>
</Rose::MetadataList>
```
<Preview>
<Story name="MetadataList">
{{
template: hbs`
<Rose::MetadataList as |list|>
<list.Item @icon='clock' @color='success'>
Time Started: xx:xx:xx
</list.Item>
<list.Item @icon='clock' @color='critical'>
Time Ended: xx:xx:xx
</list.Item>
</Rose::MetadataList>
`,
}}
</Story>
</Preview>
<Preview>
<Story name="MetadataList vertical">
{{
template: hbs`
<Rose::MetadataList @orientation='vertical' as |list|>
<list.Item @icon='clock' @color='success'>
Time Started: xx:xx:xx
</list.Item>
<list.Item @icon='clock' @color='critical'>
Time Ended: xx:xx:xx
</list.Item>
</Rose::MetadataList>
`,
}}
</Story>
</Preview>
ui/admin/app/components/metadata-list/item/index.hbs → addons/rose/addon/components/rose/metadata-list/item/index.hbs
+1 -1
View File
@@ -3,7 +3,7 @@
SPDX-License-Identifier: MPL-2.0
}}
<li class='metadata-list-item {{(concat "hds-foreground-" @color)}}'>
<li class='rose-metadata-list-item {{(concat "hds-foreground-" @color)}}'>
{{#if @icon}}
<FlightIcon @name={{@icon}} />
{{/if}}
addons/rose/app/components/rose/metadata-list.js
+6
View File
@@ -0,0 +1,6 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
export { default } from 'rose/components/rose/metadata-list';
addons/rose/app/components/rose/metadata-list/item.js
+6
View File
@@ -0,0 +1,6 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
export { default } from 'rose/components/rose/metadata-list/item';
addons/rose/app/styles/rose/components/_index.scss
+1
View File
@@ -24,3 +24,4 @@
@import 'link-button';
@import 'toolbar';
@import 'code-editor';
@import 'metadata-list';
addons/rose/app/styles/rose/components/metadata-list/_index.scss
+17
View File
@@ -0,0 +1,17 @@
.rose-metadata-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
&.vertical {
flex-direction: column;
row-gap: 1rem;
}
.rose-metadata-list-item {
display: flex;
align-items: center;
column-gap: 0.3rem;
}
}
ui/admin/tests/integration/components/metadata-list/index-test.js → addons/rose/tests/integration/components/rose/metadata-list/index-test.js
+14 -19
View File
@@ -1,66 +1,61 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import { module, test } from 'qunit';
import { setupRenderingTest } from 'admin/tests/helpers';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | metadata-list/item', function (hooks) {
module('Integration | Component | rose/metadata-list', function (hooks) {
setupRenderingTest(hooks);
test('it renders horizontal (default) with icon, color and text', async function (assert) {
assert.expect(3);
await render(hbs`
<MetadataList as |list|>
<Rose::MetadataList as |list|>
<list.Item
@icon='arrow-up'
@color='success'
>
Sample text
</list.Item>
</MetadataList>
</Rose::MetadataList>
`);
assert.dom('[data-test-icon="arrow-up"]').isVisible();
assert.dom('li.metadata-list-item').hasClass('hds-foreground-success');
assert.dom('li.metadata-list-item').hasText('Sample text');
assert.dom('li.rose-metadata-list-item').hasClass('hds-foreground-success');
assert.dom('li.rose-metadata-list-item').hasText('Sample text');
});
test('it renders vertical with icon, color and text', async function (assert) {
assert.expect(4);
await render(hbs`
<MetadataList @orientation='vertical' as |list|>
<Rose::MetadataList @orientation='vertical' as |list|>
<list.Item
@icon='arrow-down'
@color='action'
>
Sample text 2
</list.Item>
</MetadataList>
</Rose::MetadataList>
`);
assert.dom('ul.metadata-list').hasClass('vertical');
assert.dom('ul.rose-metadata-list').hasClass('vertical');
assert.dom('[data-test-icon="arrow-down"]').isVisible();
assert.dom('li.metadata-list-item').hasClass('hds-foreground-action');
assert.dom('li.metadata-list-item').hasText('Sample text 2');
assert.dom('li.rose-metadata-list-item').hasClass('hds-foreground-action');
assert.dom('li.rose-metadata-list-item').hasText('Sample text 2');
});
test('it renders no icon if @icon not provided', async function (assert) {
assert.expect(2);
await render(hbs`
<MetadataList as |list|>
<Rose::MetadataList as |list|>
<list.Item
@color='action'
>
Sample text 3
</list.Item>
</MetadataList>
</Rose::MetadataList>
`);
assert.dom('.flight-icon').isNotVisible();
assert.dom('li.metadata-list-item').hasText('Sample text 3');
assert.dom('li.rose-metadata-list-item').hasText('Sample text 3');
});
});
ui/admin/app/components/metadata-list/index.hbs
-8
View File
@@ -1,8 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<ul class='metadata-list {{@orientation}}'>
{{yield (hash Item=(component 'metadata-list/item' icon=@icon color=@color))}}
</ul>
ui/admin/app/styles/app.scss
-19
View File
@@ -918,25 +918,6 @@
}
}
// Metadata List
.metadata-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
&.vertical {
flex-direction: column;
row-gap: 1rem;
}
.metadata-list-item {
display: flex;
align-items: center;
column-gap: 0.3rem;
}
}
// Session Recording Status
// overwrites recording badge icon to red
.session-recording-status-badge {
ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
+2 -2
View File
@@ -37,7 +37,7 @@
{{! Channel details information }}
<div class='section-details'>
<h2>{{t 'resources.session-recording.channel.details'}}</h2>
<MetadataList @orientation='vertical' as |list|>
<Rose::MetadataList @orientation='vertical' as |list|>
{{! Start time }}
{{#if @model.channelRecording.start_time}}
<list.Item @icon='calendar' @color='faint'>
@@ -78,7 +78,7 @@
}}
</list.Item>
{{/if}}
</MetadataList>
</Rose::MetadataList>
</div>
{{! Related information }}
ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
+4 -4
View File
@@ -96,7 +96,7 @@
</span>
</B.Td>
<B.Td>
<MetadataList as |list|>
<Rose::MetadataList as |list|>
{{! Bytes up }}
{{#if B.data.bytes_up}}
<list.Item @icon='arrow-up' @color='success'>
@@ -121,7 +121,7 @@
{{format-time-duration B.data.duration}}
</list.Item>
{{/if}}
</MetadataList>
</Rose::MetadataList>
</B.Td>
<B.Td>
<Copyable
@@ -173,7 +173,7 @@
<div class='section-details'>
<h2>{{t 'resources.session-recording.details'}}</h2>
<MetadataList @orientation='vertical' as |list|>
<Rose::MetadataList @orientation='vertical' as |list|>
{{! Session Recording Status }}
{{#if @model.sessionRecording.state}}
<list.Item>
@@ -222,7 +222,7 @@
}}
</list.Item>
{{/if}}
</MetadataList>
</Rose::MetadataList>
</div>
{{! Related information }}