Fix: Empty Tables (vmware-tanzu#80)

* Plans Table - Listing ServiceClass plans as table instead of cards - Changed Plan Provision button to be smaller to fit table better - Moved AddBindingButton to InstanceView folder * Fix: messaging for empty tables
prydonius · Feb 15, 2018 · 781b7e7 · 781b7e7
1 parent 996e053
commit 781b7e7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/src/components/BindingList/BindingList.tsx b/src/components/BindingList/BindingList.tsx
@@ -22,14 +22,20 @@ export class BindingList extends React.Component<IBindingList> {
             </tr>
           </thead>
           <tbody>
-            {bindings.map(binding => [
-              <BindingEntry
-                key={binding.metadata.uid}
-                binding={binding}
-                addBinding={addBinding}
-                getCatalog={getCatalog}
-              />,
-            ])}
+            {bindings.length > 0 ? (
+              bindings.map(binding => [
+                <BindingEntry
+                  key={binding.metadata.uid}
+                  binding={binding}
+                  addBinding={addBinding}
+                  getCatalog={getCatalog}
+                />,
+              ])
+            ) : (
+              <tr>
+                <td colSpan={3}>No bindings found</td>
+              </tr>
+            )}
           </tbody>
         </table>
       </div>

diff --git a/src/components/InstanceView/InstanceView.tsx b/src/components/InstanceView/InstanceView.tsx
@@ -44,19 +44,27 @@ export class InstanceView extends React.Component<IInstanceViewProps> {
                 </tr>
               </thead>
               <tbody>
-                {conditions.map(condition => {
-                  return (
-                    <tr key={condition.lastTransitionTime}>
-                      <td>{condition.type}</td>
-                      <td>{condition.status}</td>
-                      <td>{condition.lastTransitionTime}</td>
-                      <td>
-                        <code>{condition.reason}</code>
-                      </td>
-                      <td>{condition.message}</td>
-                    </tr>
-                  );
-                })}
+                {conditions.length > 0 ? (
+                  conditions.map(condition => {
+                    return (
+                      <tr key={condition.lastTransitionTime}>
+                        <td>{condition.type}</td>
+                        <td>{condition.status}</td>
+                        <td>{condition.lastTransitionTime}</td>
+                        <td>
+                          <code>{condition.reason}</code>
+                        </td>
+                        <td>{condition.message}</td>
+                      </tr>
+                    );
+                  })
+                ) : (
+                  <tr>
+                    <td colSpan={5}>
+                      <p>No statuses</p>
+                    </td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>