Icu 8227 display storage buckets (#113)
* create list UI for storage-buckets * refactor: 💡 removed future code Removed code that was used in testing ✅ Closes: ICU-8227 * Update app.scss fixed lint * Update ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com> * Update addons/core/translations/resources/en-us.yaml Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com> * Update ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com> * Update en-us.yaml moving this into forms translation * Update en-us.yaml moving edit into `actions` translations for `storage-bucket` dropdown * refactor: 💡 yaml cleanup Refactored storage bucket list translations ✅ Closes: ICU-8227 * refactor: 💡 refactored storage-bucket list Refactored `storage-bucket` list to have copyable id and removed `border-collapse` from `reset.scss` that was causing `HDS::Table` not to have rounded edges. ✅ Closes: ICU-8227 * Update ui/admin/app/routes/scopes/scope/storage-buckets.js Co-authored-by: lisbet-alvarez <107949262+lisbet-alvarez@users.noreply.github.com> * refactor: 💡 quick refactor for scope.hbs Refactored sidebar navigation for `storage-bucket` to include navigate override ability for `storage-bucket` ✅ Closes: ICU-8227 * refactor: 💡 refactored hbs file for storage-bucket list Removed unneeded storage bucket list wrapper div. ✅ Closes: ICU-8227 --------- Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com> Co-authored-by: lisbet-alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
This commit is contained in:
8 files changed
+136
-11
No files matched your search
@@ -3,6 +3,7 @@
|
||||
|
||||
add: Add
|
||||
cancel: Cancel
|
||||
edit: Edit
|
||||
delete: Delete
|
||||
remove: Remove
|
||||
discard: Discard
|
||||
|
||||
@@ -224,6 +224,14 @@ storage-bucket:
|
||||
title_plural: Storage Buckets
|
||||
titles:
|
||||
new: New Storage Bucket
|
||||
aws: AWS
|
||||
global: Global
|
||||
orgs: Orgs
|
||||
actions:
|
||||
delete: Delete Storage Bucket
|
||||
form:
|
||||
scope: Scope
|
||||
provider: Provider
|
||||
project:
|
||||
title: Project
|
||||
title_plural: Projects
|
||||
|
||||
@@ -4,10 +4,37 @@
|
||||
*/
|
||||
|
||||
import Route from '@ember/routing/route';
|
||||
import { inject as service } from '@ember/service';
|
||||
|
||||
export default class ScopesScopeStorageBucketsRoute extends Route {
|
||||
model() {
|
||||
// Temporary placeholder
|
||||
return [{ scope_id: 'sb_123456' }];
|
||||
// =services
|
||||
|
||||
@service store;
|
||||
@service intl;
|
||||
@service session;
|
||||
@service can;
|
||||
@service router;
|
||||
|
||||
// =methods
|
||||
|
||||
/**
|
||||
* If arriving here unauthenticated, redirect to index for further processing.
|
||||
*/
|
||||
beforeModel() {
|
||||
if (!this.session.isAuthenticated) this.router.transitionTo('index');
|
||||
}
|
||||
|
||||
/**
|
||||
* Load all storage buckets under current scope.
|
||||
* @return {Promise{[StorageBucketModel]}}
|
||||
*/
|
||||
async model() {
|
||||
const scope = this.modelFor('scopes.scope');
|
||||
const { id: scope_id } = scope;
|
||||
if (this.can.can('list storage-bucket', scope, { collection: 'storage-buckets' })) {
|
||||
return this.store.query('storage-bucket', { scope_id });
|
||||
}
|
||||
}
|
||||
|
||||
// =actions
|
||||
}
|
||||
@@ -4,11 +4,22 @@
|
||||
*/
|
||||
|
||||
import Route from '@ember/routing/route';
|
||||
import { inject as service } from '@ember/service';
|
||||
|
||||
export default class ScopesScopeStorageBucketsStorageBucketRoute extends Route {
|
||||
model() {
|
||||
return {
|
||||
scope_id: 'sb_1234567890',
|
||||
};
|
||||
// =services
|
||||
|
||||
@service store;
|
||||
|
||||
// =methods
|
||||
|
||||
/**
|
||||
* Load a user in current scope.
|
||||
* @param {object} params
|
||||
* @param {string} params.storage_bucket_id
|
||||
* @return {StorageBucketModel}
|
||||
*/
|
||||
async model({ storage_bucket_id }) {
|
||||
return this.store.findRecord('storage-bucket', storage_bucket_id);
|
||||
}
|
||||
}
|
||||
@@ -776,3 +776,7 @@
|
||||
'sidebar';
|
||||
}
|
||||
}
|
||||
|
||||
.storage-bucket-list {
|
||||
border-collapse: revert;
|
||||
}
|
||||
@@ -26,13 +26,16 @@
|
||||
<Rose::Icon @name='flight-icons/svg/org-16' @size='medium' />
|
||||
{{t 'resources.org.title_plural'}}
|
||||
</nav.link>
|
||||
{{! TODO: Check can abilities }}
|
||||
{{#if (feature-flag 'session-recording')}}
|
||||
<nav.link @route='scopes.scope.session-recordings'>
|
||||
<Rose::Icon @name='flight-icons/svg/film-16' @size='medium' />
|
||||
{{t 'resources.session-recording.title_plural'}}
|
||||
</nav.link>
|
||||
{{#if (can 'navigate model' @model collection='storage-buckets')}}
|
||||
{{#if
|
||||
(can
|
||||
'navigate storage-bucket' @model collection='storage-buckets'
|
||||
)
|
||||
}}
|
||||
<nav.link @route='scopes.scope.storage-buckets'>
|
||||
<Rose::Icon
|
||||
@name='flight-icons/svg/cloud-upload-16'
|
||||
|
||||
@@ -28,5 +28,77 @@
|
||||
{{/if}}
|
||||
</page.actions>
|
||||
|
||||
<page.body />
|
||||
<page.body>
|
||||
{{#if @model}}
|
||||
<Hds::Table
|
||||
class='storage-bucket-list'
|
||||
@valign='middle'
|
||||
@model={{@model}}
|
||||
@columns={{array
|
||||
(hash label=(t 'form.name.label'))
|
||||
(hash label=(t 'form.id.label'))
|
||||
(hash label=(t 'resources.storage-bucket.form.provider'))
|
||||
(hash label=(t 'resources.storage-bucket.form.scope'))
|
||||
(hash label='')
|
||||
}}
|
||||
>
|
||||
<:body as |B|>
|
||||
<B.Tr>
|
||||
<B.Td>
|
||||
{{#if (can 'read storage-bucket' B.data)}}
|
||||
<LinkTo
|
||||
@route='scopes.scope.storage-buckets.storage-bucket'
|
||||
@model={{B.data.id}}
|
||||
>
|
||||
{{B.data.displayName}}
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
{{B.data.displayName}}
|
||||
{{/if}}
|
||||
{{#if B.data.description}}
|
||||
<p>{{B.data.description}}</p>
|
||||
{{/if}}
|
||||
</B.Td>
|
||||
<B.Td>
|
||||
<Copyable
|
||||
@text={{B.data.id}}
|
||||
@buttonText={{t 'actions.copy-to-clipboard'}}
|
||||
@acknowledgeText={{t 'states.copied'}}
|
||||
>
|
||||
<code>{{B.data.id}}</code>
|
||||
</Copyable>
|
||||
</B.Td>
|
||||
<B.Td>
|
||||
{{#if B.data.isAWS}}
|
||||
<Hds::Badge
|
||||
@text={{t 'resources.storage-bucket.titles.aws'}}
|
||||
@icon='aws-color'
|
||||
/>
|
||||
{{else}}
|
||||
{{B.data.plugin.name}}
|
||||
{{/if}}
|
||||
</B.Td>
|
||||
<B.Td>
|
||||
{{#if B.data.scopeModel.isGlobal}}
|
||||
<Hds::Badge
|
||||
@text={{t 'resources.storage-bucket.titles.global'}}
|
||||
@icon='globe'
|
||||
/>
|
||||
{{else}}
|
||||
<Hds::Badge
|
||||
@text={{t 'resources.storage-bucket.titles.orgs'}}
|
||||
@icon='org'
|
||||
/>
|
||||
{{/if}}
|
||||
</B.Td>
|
||||
<B.Td>
|
||||
{{!TODO: add dropdown for delete and edit actions}}
|
||||
</B.Td>
|
||||
</B.Tr>
|
||||
</:body>
|
||||
</Hds::Table>
|
||||
{{else}}
|
||||
{{!TODO: Render new landing page }}
|
||||
{{/if}}
|
||||
</page.body>
|
||||
</Rose::Layout::Page>
|
||||
@@ -5,5 +5,4 @@
|
||||
|
||||
{{page-title @model.displayName}}
|
||||
|
||||
<p>{{@model.scope_id}}</p>
|
||||
{{outlet}}
|
||||
Reference in new issue
Block a user