From 550e703ba6b28cf41847ffa693773cd22403c02b Mon Sep 17 00:00:00 2001
From: Mason Hu <mason.hu@canonical.com>
Date: Mon, 11 Dec 2023 14:52:01 +0200
Subject: [PATCH] feat(storage) add warning for project snapshot restriction
 [WD-7885]

Signed-off-by: Mason Hu <mason.hu@canonical.com>
---
 .../forms/InstanceSnapshotsForm.tsx           | 109 ++++++++------
 .../VolumeConfigureSnapshotModal.tsx          |   4 +-
 .../forms/StorageVolumeFormSnapshots.tsx      | 138 ++++++++++--------
 .../forms/StorageVolumeSnapshotsForm.tsx      |  80 ----------
 4 files changed, 150 insertions(+), 181 deletions(-)
 delete mode 100644 src/pages/storage/forms/StorageVolumeSnapshotsForm.tsx

diff --git a/src/components/forms/InstanceSnapshotsForm.tsx b/src/components/forms/InstanceSnapshotsForm.tsx
index 4df94a433..fba8f5b02 100644
--- a/src/components/forms/InstanceSnapshotsForm.tsx
+++ b/src/components/forms/InstanceSnapshotsForm.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from "react";
-import { Input, Select } from "@canonical/react-components";
+import { Icon, Input, Notification, Select } from "@canonical/react-components";
 import { optionYesNo } from "util/instanceOptions";
 import { SharedFormikTypes, SharedFormTypes } from "./sharedFormTypes";
 import { getInstanceConfigurationRow } from "components/forms/InstanceConfigurationRow";
@@ -7,6 +7,9 @@ import InstanceConfigurationTable from "components/forms/InstanceConfigurationTa
 import { getInstanceKey } from "util/instanceConfigFields";
 import { optionRenderer } from "util/formFields";
 import SnapshotScheduleInput from "components/SnapshotScheduleInput";
+import { useProject } from "context/project";
+import { isSnapshotsDisabled } from "util/snapshots";
+import { useDocs } from "context/useDocs";
 
 export interface SnapshotFormValues {
   snapshots_pattern?: string;
@@ -31,50 +34,74 @@ interface Props {
 }
 
 const InstanceSnapshotsForm: FC<Props> = ({ formik }) => {
+  const { project } = useProject();
+  const snapshotDisabled = isSnapshotsDisabled(project);
+  const docBaseLink = useDocs();
+
   return (
-    <InstanceConfigurationTable
-      rows={[
-        getInstanceConfigurationRow({
-          formik,
-          label: "Snapshot name pattern",
-          name: "snapshots_pattern",
-          defaultValue: "",
-          children: <Input placeholder="Enter name pattern" type="text" />,
-        }),
+    <>
+      {snapshotDisabled && (
+        <Notification
+          severity="caution"
+          title="Snapshot creation blocked for the current project"
+        >
+          Snapshot scheduling settings may not work as expected.{" "}
+          <a
+            href={`${docBaseLink}/reference/projects/#project-restrictions`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn more about project restrictions
+            <Icon className="external-link-icon" name="external-link" />
+          </a>
+        </Notification>
+      )}
+      <InstanceConfigurationTable
+        rows={[
+          getInstanceConfigurationRow({
+            formik,
+            label: "Snapshot name pattern",
+            name: "snapshots_pattern",
+            defaultValue: "",
+            children: <Input placeholder="Enter name pattern" type="text" />,
+          }),
 
-        getInstanceConfigurationRow({
-          formik,
-          label: "Expire after",
-          name: "snapshots_expiry",
-          defaultValue: "",
-          children: <Input placeholder="Enter expiry expression" type="text" />,
-        }),
+          getInstanceConfigurationRow({
+            formik,
+            label: "Expire after",
+            name: "snapshots_expiry",
+            defaultValue: "",
+            children: (
+              <Input placeholder="Enter expiry expression" type="text" />
+            ),
+          }),
 
-        getInstanceConfigurationRow({
-          formik,
-          label: "Snapshot stopped instances",
-          name: "snapshots_schedule_stopped",
-          defaultValue: "",
-          readOnlyRenderer: (val) => optionRenderer(val, optionYesNo),
-          children: <Select options={optionYesNo} />,
-        }),
+          getInstanceConfigurationRow({
+            formik,
+            label: "Snapshot stopped instances",
+            name: "snapshots_schedule_stopped",
+            defaultValue: "",
+            readOnlyRenderer: (val) => optionRenderer(val, optionYesNo),
+            children: <Select options={optionYesNo} />,
+          }),
 
-        getInstanceConfigurationRow({
-          formik,
-          label: "Schedule",
-          name: "snapshots_schedule",
-          defaultValue: "",
-          children: (
-            <SnapshotScheduleInput
-              value={formik.values.snapshots_schedule}
-              setValue={(val) =>
-                void formik.setFieldValue("snapshots_schedule", val)
-              }
-            />
-          ),
-        }),
-      ]}
-    />
+          getInstanceConfigurationRow({
+            formik,
+            label: "Schedule",
+            name: "snapshots_schedule",
+            defaultValue: "",
+            children: (
+              <SnapshotScheduleInput
+                value={formik.values.snapshots_schedule}
+                setValue={(val) =>
+                  void formik.setFieldValue("snapshots_schedule", val)
+                }
+              />
+            ),
+          }),
+        ]}
+      />
+    </>
   );
 };
 
diff --git a/src/pages/storage/actions/snapshots/VolumeConfigureSnapshotModal.tsx b/src/pages/storage/actions/snapshots/VolumeConfigureSnapshotModal.tsx
index 2ef01667a..e4c42dcae 100644
--- a/src/pages/storage/actions/snapshots/VolumeConfigureSnapshotModal.tsx
+++ b/src/pages/storage/actions/snapshots/VolumeConfigureSnapshotModal.tsx
@@ -11,7 +11,7 @@ import {
 } from "pages/storage/forms/StorageVolumeForm";
 import { getStorageVolumeEditValues } from "util/storageVolumeEdit";
 import { updateStorageVolume } from "api/storage-pools";
-import StorageVolumeSnapshotsForm from "../../forms/StorageVolumeSnapshotsForm";
+import StorageVolumeFormSnapshots from "pages/storage/forms/StorageVolumeFormSnapshots";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -105,7 +105,7 @@ const VolumeConfigureSnapshotModal: FC<Props> = ({
       }
       onKeyDown={handleEscKey}
     >
-      <StorageVolumeSnapshotsForm formik={formik} />
+      <StorageVolumeFormSnapshots formik={formik} />
     </Modal>
   );
 };
diff --git a/src/pages/storage/forms/StorageVolumeFormSnapshots.tsx b/src/pages/storage/forms/StorageVolumeFormSnapshots.tsx
index b5c4068f2..4974566ad 100644
--- a/src/pages/storage/forms/StorageVolumeFormSnapshots.tsx
+++ b/src/pages/storage/forms/StorageVolumeFormSnapshots.tsx
@@ -1,11 +1,13 @@
 import React, { FC } from "react";
-import { Input } from "@canonical/react-components";
+import { Icon, Input, Notification } from "@canonical/react-components";
 import { FormikProps } from "formik/dist/types";
 import ConfigurationTable from "components/ConfigurationTable";
 import { getStorageConfigurationRow } from "pages/storage/forms/StorageConfigurationRow";
 import { StorageVolumeFormValues } from "pages/storage/forms/StorageVolumeForm";
 import SnapshotScheduleInput from "components/SnapshotScheduleInput";
 import { useDocs } from "context/useDocs";
+import { useProject } from "context/project";
+import { isSnapshotsDisabled } from "util/snapshots";
 
 interface Props {
   formik: FormikProps<StorageVolumeFormValues>;
@@ -13,67 +15,87 @@ interface Props {
 
 const StorageVolumeFormSnapshots: FC<Props> = ({ formik }) => {
   const docBaseLink = useDocs();
+  const { project } = useProject();
+  const snapshotDisabled = isSnapshotsDisabled(project);
 
   return (
-    <ConfigurationTable
-      rows={[
-        getStorageConfigurationRow({
-          formik,
-          label: "Snapshot name pattern",
-          name: "snapshots_pattern",
-          defaultValue: "",
-          children: (
-            <Input
-              placeholder="Enter name pattern"
-              help={
-                <>
-                  Pongo2 template string that represents the snapshot name (used
-                  for scheduled snapshots and unnamed snapshots), see{" "}
-                  <a
-                    href={`${docBaseLink}/reference/instance_options/#instance-options-snapshots-names`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Automatic snapshot names
-                  </a>
-                </>
-              }
-              type="text"
-            />
-          ),
-        }),
+    <>
+      {snapshotDisabled && (
+        <Notification
+          severity="caution"
+          title="Snapshot creation blocked for the current project"
+        >
+          Snapshot scheduling settings may not work as expected.{" "}
+          <a
+            href={`${docBaseLink}/reference/projects/#project-restrictions`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn more about project restrictions
+            <Icon className="external-link-icon" name="external-link" />
+          </a>
+        </Notification>
+      )}
+      <ConfigurationTable
+        rows={[
+          getStorageConfigurationRow({
+            formik,
+            label: "Snapshot name pattern",
+            name: "snapshots_pattern",
+            defaultValue: "",
+            children: (
+              <Input
+                placeholder="Enter name pattern"
+                help={
+                  <>
+                    Pongo2 template string that represents the snapshot name
+                    (used for scheduled snapshots and unnamed snapshots), see{" "}
+                    <a
+                      href={`${docBaseLink}/reference/instance_options/#instance-options-snapshots-names`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Automatic snapshot names
+                    </a>
+                  </>
+                }
+                type="text"
+              />
+            ),
+          }),
 
-        getStorageConfigurationRow({
-          formik,
-          label: "Expire after",
-          name: "snapshots_expiry",
-          help: "Controls when snapshots are to be deleted",
-          defaultValue: "",
-          children: (
-            <Input
-              placeholder="Enter expiry expression"
-              type="text"
-              help="Expects an expression like 1M 2H 3d 4w 5m 6y"
-            />
-          ),
-        }),
+          getStorageConfigurationRow({
+            formik,
+            label: "Expire after",
+            name: "snapshots_expiry",
+            help: "Controls when snapshots are to be deleted",
+            defaultValue: "",
+            children: (
+              <Input
+                placeholder="Enter expiry expression"
+                type="text"
+                help="Expects an expression like 1M 2H 3d 4w 5m 6y"
+              />
+            ),
+          }),
 
-        getStorageConfigurationRow({
-          formik,
-          label: "Schedule",
-          name: "snapshots_schedule",
-          defaultValue: "",
-          children: (
-            <SnapshotScheduleInput
-              value={formik.values.snapshots_schedule}
-              setValue={(val) =>
-                void formik.setFieldValue("snapshots_schedule", val)
-              }
-            />
-          ),
-        }),
-      ]}
-    />
+          getStorageConfigurationRow({
+            formik,
+            label: "Schedule",
+            name: "snapshots_schedule",
+            defaultValue: "",
+            children: (
+              <SnapshotScheduleInput
+                value={formik.values.snapshots_schedule}
+                setValue={(val) =>
+                  void formik.setFieldValue("snapshots_schedule", val)
+                }
+              />
+            ),
+          }),
+        ]}
+      />
+    </>
   );
 };
 
diff --git a/src/pages/storage/forms/StorageVolumeSnapshotsForm.tsx b/src/pages/storage/forms/StorageVolumeSnapshotsForm.tsx
deleted file mode 100644
index 5723bdd93..000000000
--- a/src/pages/storage/forms/StorageVolumeSnapshotsForm.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { FC, ReactNode } from "react";
-import { Input } from "@canonical/react-components";
-import InstanceConfigurationTable from "components/forms/InstanceConfigurationTable";
-import SnapshotScheduleInput from "components/SnapshotScheduleInput";
-import { getStorageConfigurationRow } from "pages/storage/forms/StorageConfigurationRow";
-import { useDocs } from "context/useDocs";
-import { FormikProps } from "formik";
-import { StorageVolumeFormValues } from "pages/storage/forms/StorageVolumeForm";
-
-interface Props {
-  formik: FormikProps<StorageVolumeFormValues>;
-  children?: ReactNode;
-}
-
-const VolumeSnapshotsForm: FC<Props> = ({ formik }) => {
-  const docBaseLink = useDocs();
-  return (
-    <InstanceConfigurationTable
-      rows={[
-        getStorageConfigurationRow({
-          formik,
-          label: "Snapshot name pattern",
-          name: "snapshots_pattern",
-          defaultValue: "",
-          children: (
-            <Input
-              placeholder="Enter name pattern"
-              help={
-                <>
-                  Pongo2 template string that represents the snapshot name (used
-                  for scheduled snapshots and unnamed snapshots), see{" "}
-                  <a
-                    href={`${docBaseLink}/reference/instance_options/#instance-options-snapshots-names`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Automatic snapshot names
-                  </a>
-                </>
-              }
-              type="text"
-            />
-          ),
-        }),
-
-        getStorageConfigurationRow({
-          formik,
-          label: "Expire after",
-          name: "snapshots_expiry",
-          help: "Controls when snapshots are to be deleted",
-          defaultValue: "",
-          children: (
-            <Input
-              placeholder="Enter expiry expression"
-              type="text"
-              help="Expects an expression like 1M 2H 3d 4w 5m 6y"
-            />
-          ),
-        }),
-
-        getStorageConfigurationRow({
-          formik,
-          label: "Schedule",
-          name: "snapshots_schedule",
-          defaultValue: "",
-          children: (
-            <SnapshotScheduleInput
-              value={formik.values.snapshots_schedule}
-              setValue={(val) =>
-                void formik.setFieldValue("snapshots_schedule", val)
-              }
-            />
-          ),
-        }),
-      ]}
-    />
-  );
-};
-
-export default VolumeSnapshotsForm;