feat: 🎸 Add related info to session recording and player (#195)
* feat: 🎸 Add related info to session recording and player --------- Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
This commit is contained in:
Carlos Alcaide CorvoandCameron Perera authored and 
GitHub committed
1 parent
87aea507f8
commit
db408a9acd
4 files changed
+199
-43
No files matched your search
@@ -1,19 +1,36 @@
|
||||
<li class='link-list-item'>
|
||||
{{#if @route}}
|
||||
<LinkTo @route={{@route}} @model={{@model}}>
|
||||
<div class='link-list-item__info'>
|
||||
{{#if @icon}}
|
||||
<Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
|
||||
{{/if}}
|
||||
{{#if (is-array @model)}}
|
||||
<LinkTo @route={{@route}} @models={{@model}}>
|
||||
<div class='link-list-item__info'>
|
||||
{{#if @icon}}
|
||||
<Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
|
||||
{{/if}}
|
||||
|
||||
<div>
|
||||
<p class='link-list-item__text'>{{@text}}</p>
|
||||
{{yield}}
|
||||
<div>
|
||||
<p class='link-list-item__text'>{{@text}}</p>
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlightIcon @name='arrow-right' />
|
||||
</LinkTo>
|
||||
<FlightIcon @name='arrow-right' />
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route={{@route}} @model={{@model}}>
|
||||
<div class='link-list-item__info'>
|
||||
{{#if @icon}}
|
||||
<Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
|
||||
{{/if}}
|
||||
|
||||
<div>
|
||||
<p class='link-list-item__text'>{{@text}}</p>
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlightIcon @name='arrow-right' />
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<div class='link-list-item__info'>
|
||||
{{#if @icon}}
|
||||
|
||||
+44
-16
@@ -44,26 +44,54 @@
|
||||
</MetadataList>
|
||||
</div>
|
||||
|
||||
{{! Channel related information }}
|
||||
{{! Related information }}
|
||||
<div>
|
||||
<h3>{{t 'resources.session-recording.related'}}</h3>
|
||||
{{! User name }}
|
||||
<p>
|
||||
<FlightIcon @name='user' />
|
||||
<LinkListPanel as |list|>
|
||||
{{! User name }}
|
||||
{{#if @model.sessionRecording.user}}
|
||||
{{@model.sessionRecording.userDisplayName}}
|
||||
<list.Item
|
||||
@icon='user'
|
||||
@color='boundary'
|
||||
@route='scopes.scope.users.user'
|
||||
@model={{array
|
||||
@model.sessionRecording.user.scopeId
|
||||
@model.sessionRecording.user.id
|
||||
}}
|
||||
@text={{@model.sessionRecording.userDisplayName}}
|
||||
/>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{! Target name }}
|
||||
<p>
|
||||
<FlightIcon @name='target' />
|
||||
{{@model.sessionRecording.target.name}}
|
||||
</p>
|
||||
{{! Bucket name }}
|
||||
<p>
|
||||
<FlightIcon @name='cloud-check' />
|
||||
{{@model.storageBucket.name}}
|
||||
</p>
|
||||
{{! Target name }}
|
||||
{{#if @model.sessionRecording.target}}
|
||||
<list.Item
|
||||
@icon='target'
|
||||
@color='boundary'
|
||||
@route='scopes.scope.targets.target'
|
||||
@model={{array
|
||||
@model.sessionRecording.target.scopeId
|
||||
@model.sessionRecording.target.id
|
||||
}}
|
||||
@text={{@model.sessionRecording.target.name}}
|
||||
>
|
||||
{{#if @model.sessionRecording.target.type}}
|
||||
<Hds::Badge @text={{@model.sessionRecording.target.type}} />
|
||||
{{/if}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Bucket name }}
|
||||
{{#if @model.storageBucket}}
|
||||
<list.Item
|
||||
@icon='cloud-check'
|
||||
@color='boundary'
|
||||
@route='scopes.scope.storage-buckets.storage-bucket'
|
||||
@model={{array
|
||||
@model.storageBucket.scope.id
|
||||
@model.storageBucket.id
|
||||
}}
|
||||
@text={{@model.storageBucket.name}}
|
||||
/>
|
||||
{{/if}}
|
||||
</LinkListPanel>
|
||||
</div>
|
||||
</sb.Sidebar>
|
||||
</Layout::Sidebar>
|
||||
|
||||
+45
-16
@@ -93,26 +93,55 @@
|
||||
</list.Item>
|
||||
</MetadataList>
|
||||
</div>
|
||||
{{! Related }}
|
||||
|
||||
{{! Related information }}
|
||||
<div>
|
||||
<h3>{{t 'resources.session-recording.related'}}</h3>
|
||||
{{! User name }}
|
||||
<p>
|
||||
<FlightIcon @name='user' />
|
||||
<LinkListPanel as |list|>
|
||||
{{! User name }}
|
||||
{{#if @model.sessionRecording.user}}
|
||||
{{@model.sessionRecording.userDisplayName}}
|
||||
<list.Item
|
||||
@icon='user'
|
||||
@color='boundary'
|
||||
@route='scopes.scope.users.user'
|
||||
@model={{array
|
||||
@model.sessionRecording.user.scopeId
|
||||
@model.sessionRecording.user.id
|
||||
}}
|
||||
@text={{@model.sessionRecording.userDisplayName}}
|
||||
/>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{! Target name }}
|
||||
<p>
|
||||
<FlightIcon @name='target' />
|
||||
{{@model.sessionRecording.target.name}}
|
||||
</p>
|
||||
{{! Bucket name }}
|
||||
<p>
|
||||
<FlightIcon @name='cloud-check' />
|
||||
{{@model.storageBucket.name}}
|
||||
</p>
|
||||
{{! Target name }}
|
||||
{{#if @model.sessionRecording.target}}
|
||||
<list.Item
|
||||
@icon='target'
|
||||
@color='boundary'
|
||||
@route='scopes.scope.targets.target'
|
||||
@model={{array
|
||||
@model.sessionRecording.target.scopeId
|
||||
@model.sessionRecording.target.id
|
||||
}}
|
||||
@text={{@model.sessionRecording.target.name}}
|
||||
>
|
||||
{{#if @model.sessionRecording.target.type}}
|
||||
<Hds::Badge @text={{@model.sessionRecording.target.type}} />
|
||||
{{/if}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Bucket name }}
|
||||
{{#if @model.storageBucket}}
|
||||
<list.Item
|
||||
@icon='cloud-check'
|
||||
@color='boundary'
|
||||
@route='scopes.scope.storage-buckets.storage-bucket'
|
||||
@model={{array
|
||||
@model.storageBucket.scope.id
|
||||
@model.storageBucket.id
|
||||
}}
|
||||
@text={{@model.storageBucket.name}}
|
||||
/>
|
||||
{{/if}}
|
||||
</LinkListPanel>
|
||||
</div>
|
||||
</sb.Sidebar>
|
||||
</Layout::Sidebar>
|
||||
|
||||
@@ -47,4 +47,86 @@ module('Integration | Component | link-list-panel/index', function (hooks) {
|
||||
assert.dom('.link-list-item__text').hasText('Storage Bucket');
|
||||
assert.dom('li.link-list-item > a').doesNotExist();
|
||||
});
|
||||
|
||||
test('it renders link correctly supplying a single model', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
// ScopeId global
|
||||
this.modelA = { scopeId: 'global' };
|
||||
await render(hbs`
|
||||
<LinkListPanel as |P|>
|
||||
<P.Item @route='scopes.scope.users' @model={{this.modelA.scopeId}}></P.Item>
|
||||
</LinkListPanel>
|
||||
`);
|
||||
assert
|
||||
.dom('li.link-list-item > a')
|
||||
.hasAttribute('href', `/scopes/${this.modelA.scopeId}/users`);
|
||||
|
||||
// ScopeId org
|
||||
this.modelB = { scopeId: 's_id6ozx3wue' };
|
||||
await render(hbs`
|
||||
<LinkListPanel as |P|>
|
||||
<P.Item @route='scopes.scope.users' @model={{this.modelB.scopeId}}></P.Item>
|
||||
</LinkListPanel>
|
||||
`);
|
||||
assert
|
||||
.dom('li.link-list-item > a')
|
||||
.hasAttribute('href', `/scopes/${this.modelB.scopeId}/users`);
|
||||
});
|
||||
|
||||
test('it renders a link correctly supplying multiple models', async function (assert) {
|
||||
assert.expect(2);
|
||||
// ScopeId global
|
||||
this.modelA = { scopeId: 'global', id: 'u_umasjqde46' };
|
||||
await render(hbs`
|
||||
<LinkListPanel as |P|>
|
||||
<P.Item @route='scopes.scope.users.user' @model={{array this.modelA.scopeId this.modelA.id}}></P.Item>
|
||||
</LinkListPanel>
|
||||
`);
|
||||
assert
|
||||
.dom('li.link-list-item > a')
|
||||
.hasAttribute(
|
||||
'href',
|
||||
`/scopes/${this.modelA.scopeId}/users/${this.modelA.id}`
|
||||
);
|
||||
|
||||
// ScopeId org
|
||||
this.modelB = { scopeId: 's_id6ozx3wue', id: 'u_umasjqde46' };
|
||||
await render(hbs`
|
||||
<LinkListPanel as |P|>
|
||||
<P.Item @route='scopes.scope.users.user' @model={{array this.modelB.scopeId this.modelB.id}}></P.Item>
|
||||
</LinkListPanel>
|
||||
`);
|
||||
assert
|
||||
.dom('li.link-list-item > a')
|
||||
.hasAttribute(
|
||||
'href',
|
||||
`/scopes/${this.modelB.scopeId}/users/${this.modelB.id}`
|
||||
);
|
||||
});
|
||||
|
||||
test('it renders multiple links correctly supplying a combination of single and multiple models', async function (assert) {
|
||||
this.modelA = { scopeId: 's_id6ozx3wue' };
|
||||
this.modelB = { scopeId: 's_id6ozx3wue', id: 'u_umasjqde46' };
|
||||
this.modelC = { scopeId: 'global' };
|
||||
await render(hbs`
|
||||
<LinkListPanel as |P|>
|
||||
<P.Item @route='scopes.scope.users' @model={{array this.modelA.scopeId}}></P.Item>
|
||||
<P.Item @route='scopes.scope.users.user' @model={{array this.modelB.scopeId this.modelB.id}}></P.Item>
|
||||
<P.Item @route='scopes.scope.users' @model={{array this.modelC.scopeId}}></P.Item>
|
||||
</LinkListPanel>
|
||||
`);
|
||||
assert
|
||||
.dom('li.link-list-item:nth-child(1) > a')
|
||||
.hasAttribute('href', `/scopes/${this.modelA.scopeId}/users`);
|
||||
assert
|
||||
.dom('li.link-list-item:nth-child(2) > a')
|
||||
.hasAttribute(
|
||||
'href',
|
||||
`/scopes/${this.modelB.scopeId}/users/${this.modelB.id}`
|
||||
);
|
||||
assert
|
||||
.dom('li.link-list-item:nth-child(3) > a')
|
||||
.hasAttribute('href', `/scopes/${this.modelC.scopeId}/users`);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user