From f65bf21a3322c7fb9be10200bc905eb2fd30084f Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Fri, 10 Mar 2023 13:41:57 -0500
Subject: [PATCH] Icu 8227 display storage buckets (#113)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 addons/core/translations/actions/en-us.yaml   |  1 +
 addons/core/translations/resources/en-us.yaml |  8 ++
 .../routes/scopes/scope/storage-buckets.js    | 33 ++++++++-
 .../scope/storage-buckets/storage-bucket.js   | 19 ++++-
 ui/admin/app/styles/app.scss                  |  4 +
 ui/admin/app/templates/scopes/scope.hbs       |  7 +-
 .../scopes/scope/storage-buckets/index.hbs    | 74 ++++++++++++++++++-
 .../scope/storage-buckets/storage-bucket.hbs  |  1 -
 8 files changed, 136 insertions(+), 11 deletions(-)

diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index 125ea3f51..5cf7a182a 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/addons/core/translations/actions/en-us.yaml
@@ -3,6 +3,7 @@
 
 add: Add
 cancel: Cancel
+edit: Edit
 delete: Delete
 remove: Remove
 discard: Discard
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 16326b2f2..0a137c8c4 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -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
diff --git a/ui/admin/app/routes/scopes/scope/storage-buckets.js b/ui/admin/app/routes/scopes/scope/storage-buckets.js
index 6c01670d9..56b2632b6 100644
--- a/ui/admin/app/routes/scopes/scope/storage-buckets.js
+++ b/ui/admin/app/routes/scopes/scope/storage-buckets.js
@@ -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
 }
diff --git a/ui/admin/app/routes/scopes/scope/storage-buckets/storage-bucket.js b/ui/admin/app/routes/scopes/scope/storage-buckets/storage-bucket.js
index 8bf0c5ef4..ac33f0f36 100644
--- a/ui/admin/app/routes/scopes/scope/storage-buckets/storage-bucket.js
+++ b/ui/admin/app/routes/scopes/scope/storage-buckets/storage-bucket.js
@@ -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);
   }
 }
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index c1bc62db0..f71bcf07e 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -776,3 +776,7 @@
       'sidebar';
   }
 }
+
+.storage-bucket-list {
+  border-collapse: revert;
+}
diff --git a/ui/admin/app/templates/scopes/scope.hbs b/ui/admin/app/templates/scopes/scope.hbs
index 22be84374..67694f447 100644
--- a/ui/admin/app/templates/scopes/scope.hbs
+++ b/ui/admin/app/templates/scopes/scope.hbs
@@ -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'
diff --git a/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs b/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs
index ead6a3c53..84973481c 100644
--- a/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs
@@ -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>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket.hbs b/ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket.hbs
index 1d6ed5ba4..40b29859d 100644
--- a/ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket.hbs
+++ b/ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket.hbs
@@ -5,5 +5,4 @@
 
 {{page-title @model.displayName}}
 
-<p>{{@model.scope_id}}</p>
 {{outlet}}
\ No newline at end of file