ui: make <ResourceTable> resilient to resources without IDs

Addresses #3928
hashicorp · Sep 23, 2022 · d1399b7 · d1399b7
1 parent db9b15c
commit d1399b7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/ui/app/components/resources-table.hbs b/ui/app/components/resources-table.hbs
@@ -24,13 +24,18 @@
     {{#each @resources key="id" as |resource|}}
       <tr>
         <th scope="row">
-          <LinkTo
-            title={{resource.name}}
-            @route={{@route}}
-            @models={{append (or @models (array)) resource.id}}
-          >
-            {{resource.name}}
-          </LinkTo>
+          {{#if resource.id}}
+            <LinkTo
+              title={{resource.name}}
+              @route={{@route}}
+              @models={{append (or @models (array)) resource.id}}
+            >
+              {{resource.name}}
+            </LinkTo>
+          {{else}}
+            <FlightIcon @name="alert-triangle-fill" />
+            <span class="sr-only">{{resource.name}}</span>
+          {{/if}}
         </th>
         <td class="resource-icon"><FlightIcon @name={{icon-for-component resource.platform}} /> {{resource.type}}</td>
         <td>{{date-format-distance-to-now resource.createdTime.seconds}}</td>

diff --git a/ui/app/styles/utilities/_index.scss b/ui/app/styles/utilities/_index.scss
@@ -1,2 +1,3 @@
 @import 'animations';
 @import 'focus-ring';
+@import 'sr-only';
diff --git a/ui/app/styles/utilities/sr-only.scss b/ui/app/styles/utilities/sr-only.scss
@@ -0,0 +1,11 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}