Icu 8226 create an empty screen when there are no storage buckets (#114)

* feat: 🎸 add new link to create storage bucket

✅ Closes: ICU-8225

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

addons/core/translations/resources/en-us.yaml

@@ -222,6 +222,11 @@ session-recording:
 storage-bucket:
   title: Storage Bucket
   title_plural: Storage Buckets
+  messages:
+    none:
+      title: No storage buckets yet
+      description: To start using session recording, you need to have an Amazon S3 bucket.
+      link: Add a new storage bucket
   titles:
     new: New Storage Bucket
     aws: AWS

ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs

@@ -17,8 +17,9 @@
   </page.header>
 
   <page.actions>
-    {{! TODO: Check can create ability using correct file }}
-    {{#if (can 'create model' this.scope collection='storage-buckets')}}
+    {{#if
+      (can 'create storage-bucket' this.scope collection='storage-buckets')
+    }}
       {{#if @model}}
         <Hds::Button
           @route='scopes.scope.storage-buckets.new'
@@ -98,7 +99,46 @@
         </:body>
       </Hds::Table>
     {{else}}
-      {{!TODO: Render new landing page }}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.storage-bucket.messages.none.title'}}
+          as |message|
+        >
+          <message.description>
+            {{#if
+              (can
+                'list storage-bucket' this.scope collection='storage-buckets'
+              )
+            }}
+              {{t 'resources.storage-bucket.messages.none.description'}}
+            {{else if (can
+              'create storage-bucket' this.scope collection='storage-buckets'
+            )}}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.storage-bucket.title_plural')
+              }}
+            {{else}}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.storage-bucket.title_plural')
+              }}
+            {{/if}}
+          </message.description>
+          {{#if
+            (can
+              'create storage-bucket' this.scope collection='storage-buckets'
+            )
+          }}
+            <Hds::Link::Standalone
+              @icon='plus-circle'
+              @iconPosition='leading'
+              @route='scopes.scope.storage-buckets.new'
+              @text={{t 'resources.storage-bucket.messages.none.link'}}
+            />
+          {{/if}}
+        </Rose::Message>
+      </Rose::Layout::Centered>
     {{/if}}
   </page.body>
 </Rose::Layout::Page>