Include no snapshot message

Author: GilbertCherrie

app/javascript/components/vm-snapshot-tree-select/index.jsx

@@ -4,7 +4,7 @@ import './styles.css';
 import SnapshotTree from './snapshot-tree';
 
 const VMSnapshotTreeSelect = ({
-  tree, snapshot, size, time,
+  tree, snapshot, size, time, name,
 }) => {
   const [currentSnapshot, setCurrentSnapshot] = useState({ ...snapshot, size, time });
 
@@ -52,7 +52,13 @@ const VMSnapshotTreeSelect = ({
       <div className="snapshot-tree-title">
         {__('Available Snapshots')}
       </div>
-      <SnapshotTree nodes={tree.tree_nodes} setCurrentSnapshot={setCurrentSnapshot} />
+      {tree.nodes && tree.nodes.length > 1
+        ? <SnapshotTree nodes={tree.tree_nodes} setCurrentSnapshot={setCurrentSnapshot} />
+        : (
+          <div className="no-snapshots-message">
+            {sprintf(__('%s has no snapshots'), name)}
+          </div>
+        )}
     </div>
   );
 };
@@ -62,12 +68,14 @@ VMSnapshotTreeSelect.propTypes = {
   snapshot: PropTypes.objectOf(PropTypes.any),
   size: PropTypes.string,
   time: PropTypes.string,
+  name: PropTypes.string,
 };
 
 VMSnapshotTreeSelect.defaultProps = {
   snapshot: {},
   size: '',
   time: '',
+  name: '',
 };
 
 export default VMSnapshotTreeSelect;

app/javascript/components/vm-snapshot-tree-select/styles.css

@@ -22,6 +22,10 @@
     padding-top: 40px;
   }
 
+  .no-snapshots-message {
+    padding-left: 20px;
+  }
+
   .checkbox {
     font-size: 16px;
     user-select: none;

app/views/vm_common/_snapshots_desc.html.haml

@@ -12,4 +12,4 @@
   - total_bytes = _("%{number} bytes") % {:number => number_with_delimiter(snapshot[:total_size], :delimiter => ",", :separator => ".")}
   - size = "%{formatted_number} (%{total})" % {:formatted_number => formatted_bytes, :total => total_bytes}
 
-= react('VmSnapshotTreeSelect', {tree: @snapshot_tree, snapshot: snapshot, size: size, time: time})
+= react('VmSnapshotTreeSelect', {tree: @snapshot_tree, snapshot: snapshot, size: size, time: time, name: @record.name})