refactor(namespace): migrate namespace edit to react [r8s-125] (#38)

app/react/kubernetes/namespaces/components/NamespaceForm/ToggleSystemNamespaceButton.tsx

@@ -0,0 +1,64 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { LoadingButton } from '@@/buttons';
+import { confirmUpdate } from '@@/modals/confirm';
+
+import { useToggleSystemNamespaceMutation } from '../../queries/useToggleSystemNamespace';
+
+export function ToggleSystemNamespaceButton({
+  isSystemNamespace,
+  isEdit,
+  environmentId,
+  namespaceName,
+}: {
+  isSystemNamespace: boolean;
+  isEdit: boolean;
+  environmentId: EnvironmentId;
+  namespaceName: string;
+}) {
+  const toggleSystemNamespaceMutation = useToggleSystemNamespaceMutation(
+    environmentId,
+    namespaceName
+  );
+  if (!isEdit) {
+    return null;
+  }
+
+  return (
+    <LoadingButton
+      onClick={markUnmarkAsSystem}
+      className="!ml-0"
+      data-cy="mark-as-system-button"
+      color="default"
+      type="button"
+      loadingText={
+        isSystemNamespace ? 'Unmarking as system' : 'Marking as system'
+      }
+      isLoading={toggleSystemNamespaceMutation.isLoading}
+    >
+      {isSystemNamespace ? 'Unmark as system' : 'Mark as system'}
+    </LoadingButton>
+  );
+
+  async function markUnmarkAsSystem() {
+    const confirmed = await confirmMarkUnmarkAsSystem(isSystemNamespace);
+    if (confirmed) {
+      toggleSystemNamespaceMutation.mutate(!isSystemNamespace, {
+        onSuccess: () => {
+          notifySuccess('Success', 'Namespace updated');
+        },
+      });
+    }
+  }
+}
+
+async function confirmMarkUnmarkAsSystem(isSystemNamespace: boolean) {
+  const message = isSystemNamespace
+    ? 'Unmarking this namespace as system will allow non administrator users to manage it and the resources in contains depending on the access control settings. Are you sure?'
+    : 'Marking this namespace as a system namespace will prevent non administrator users from managing it and the resources it contains. Are you sure?';
+
+  return new Promise((resolve) => {
+    confirmUpdate(message, resolve);
+  });
+}