From bbead3597ef7215055a39659f4a32a205cdaec6a Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Mon, 4 Jul 2022 18:58:12 +0200
Subject: [PATCH] F #1437: Add hint on the VM snapshot tab (#2216)

(cherry picked from commit 8577bc089edfccad771b2e6f42224f516b727ab6)
---
 .../client/components/Tabs/Vm/Snapshot/index.js   | 15 +++++++++++----
 src/fireedge/src/client/constants/translates.js   |  3 +++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/fireedge/src/client/components/Tabs/Vm/Snapshot/index.js b/src/fireedge/src/client/components/Tabs/Vm/Snapshot/index.js
index dcc45b1ae2..31db8adfa4 100644
--- a/src/fireedge/src/client/components/Tabs/Vm/Snapshot/index.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Snapshot/index.js
@@ -15,7 +15,8 @@
  * ------------------------------------------------------------------------- */
 import { ReactElement, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { Stack } from '@mui/material'
+import HintIcon from 'iconoir-react/dist/QuestionMarkCircle'
+import { Stack, Tooltip } from '@mui/material'
 
 import { useGetVmQuery } from 'client/features/OneApi/vm'
 import {
@@ -24,6 +25,7 @@ import {
   DeleteAction,
 } from 'client/components/Tabs/Vm/Snapshot/Actions'
 import SnapshotCard from 'client/components/Cards/SnapshotCard'
+import { T, VM_ACTIONS } from 'client/constants'
 
 import {
   getSnapshotList,
@@ -59,9 +61,14 @@ const VmSnapshotTab = ({ tabProps: { actions } = {}, id }) => {
 
   return (
     <div>
-      {actionsAvailable?.includes(SNAPSHOT_CREATE) && (
-        <CreateAction vmId={id} />
-      )}
+      <Stack direction="row" gap="1em" alignItems="center">
+        {actionsAvailable?.includes(SNAPSHOT_CREATE) && (
+          <CreateAction vmId={id} />
+        )}
+        <Tooltip arrow title={Tr(T.VmSnapshotHint)}>
+          <HintIcon />
+        </Tooltip>
+      </Stack>
 
       <Stack gap="1em" py="0.8em" data-cy="snapshots">
         {snapshots.map((snapshot) => (
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
index 37c0218134..185738da1f 100644
--- a/src/fireedge/src/client/constants/translates.js
+++ b/src/fireedge/src/client/constants/translates.js
@@ -497,6 +497,9 @@ module.exports = {
   HostnamePortsForwardedToVmPorts: '%1$s ports %2$s forwarded to VM ports %3$s',
   /* VM schema - snapshot */
   VmSnapshotNameConcept: 'The new snapshot name. It can be empty',
+  VmSnapshotHint: `
+    Snapshots in this tab refer to System Snapshots, which includes all disks and
+    the memory state of the VM. For disk snapshots, see the Storage tab`,
   /* VM schema - actions */
   EnforceCapacityChecks: 'Enforce capacity checks',
   EnforceCapacityChecksConcept: `