npm - datocms-plugin-record-bin - Versions diffs - 0.1.0 - Mend

datocms-plugin-record-bin 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +20 -0
package/docs/cover.jpg +0 -0
package/docs/demo.mp4 +0 -0
package/package.json +59 -0
package/public/index.html +11 -0
package/public/robots.txt +3 -0
package/src/entrypoints/BinOutlet.tsx +107 -0
package/src/entrypoints/ConfigScreen.tsx +71 -0
package/src/entrypoints/ErrorModal.tsx +31 -0
package/src/entrypoints/InstallationModal.tsx +103 -0
package/src/entrypoints/PreInstallConfig.tsx +28 -0
package/src/index.tsx +65 -0
package/src/react-app-env.d.ts +1 -0
package/src/utils/attemptVercelInitialization.ts +16 -0
package/src/utils/render.tsx +9 -0
package/tsconfig.json +26 -0

package/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+# 🗑 Record Bin
+Record Bin is a DatoCMS plugin that makes it so every record that is deleted through the dasboard is sent to a Bin, where it can then be restored in a single click, or permanently deleted.
+To use this plugin an auxiliary lambda function is needed. The deployment of that lambda function is further described bellow in the installation section.
+# Installation and usage
+The video above shows a step by step tutorial on how to install and use the plugin.
+It follows the following instructions:
+1. When you install the plugin, a modal will pop up prompting you to create the lambda function.
+2. By clicking the Vercel Deploy button you can start a step by step process that will create that lambda function (You will be asked your projects Full API token!)
+3. After deploying it, copy the Deployed URL and insert it in the modal, and "Finish installation"
+The installation will then be complete, from then on, when you delete a record you will be able to find its trashed version inside a model called "🗑 Record Bin" (If the model doesn't exist it will be created).
+If you open the trashed record inside that model, you will find a "Restore Record ♻️" button, that when clicked will restore the record, redirecting you to the resotred record, and deleting its trashed version.
+In case the restoration fails a message will be shown, along with the option to see the entire API error log.

package/docs/cover.jpg ADDED Viewed

Binary file

package/docs/demo.mp4 ADDED Viewed

Binary file

package/package.json ADDED Viewed

@@ -0,0 +1,59 @@
+{
+  "name": "datocms-plugin-record-bin",
+  "version": "0.1.0",
+  "private": false,
+  "homepage": "https://github.com/marcelofinamorvieira/record-bin-lambda-function#readme",
+  "description": "A plugin to manage and create a backup of deleted records in DatoCMS",
+  "keywords": [
+    "datocms",
+    "datocms-plugin",
+    "backup",
+    "record",
+    "bin"
+  ],
+  "datoCmsPlugin": {
+    "title": "Record bin",
+    "previewImage": "docs/demo.mp4",
+    "coverImage": "docs/cover.jpg",
+    "entryPoint": "build/index.html",
+    "permissions": []
+  },
+  "dependencies": {
+    "@types/node": "^16.11.52",
+    "@types/react": "^17.0.48",
+    "@types/react-dom": "^17.0.17",
+    "datocms-plugin-sdk": "^0.6.1",
+    "datocms-react-ui": "^0.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.7.4"
+  },
+  "scripts": {
+    "start": "cross-env BROWSER='none' PUBLIC_URL='/' react-scripts start",
+    "build": "cross-env PUBLIC_URL='.' react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "prepublishOnly": "npm run build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3"
+  }
+}

package/public/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/public/robots.txt ADDED Viewed

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/entrypoints/BinOutlet.tsx ADDED Viewed

@@ -0,0 +1,107 @@
+import { RenderItemFormOutletCtx } from "datocms-plugin-sdk";
+import { Button, Canvas, FieldGroup, Form, Section } from "datocms-react-ui";
+import { useState } from "react";
+type errorObject = {
+  simplifiedError: {
+    code: string;
+    details: {
+      code: string;
+      field: string;
+      field_id: string;
+      field_label: string;
+      field_type: string;
+      extraneous_attributes: string[];
+      fullPayload: string;
+    };
+  };
+  fullErrorPayload: string;
+};
+const BinOutlet = ({ ctx }: { ctx: RenderItemFormOutletCtx }) => {
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState<errorObject>();
+  const restorationHandler = async () => {
+    setLoading(true);
+    const parsedBody = JSON.parse(ctx.formValues.record_body as string);
+    parsedBody.trashRecordID = ctx.item!.id;
+    const requestBody = JSON.stringify(parsedBody);
+    try {
+      const restoreResponse = await fetch(
+        ctx.plugin.attributes.parameters.vercelURL as string,
+        {
+          method: "POST",
+          body: requestBody,
+          headers: { Accept: "*/*", "Content-Type": "application/json" },
+        }
+      );
+      const parsedResponse = await restoreResponse.json();
+      if (restoreResponse.status !== 200) {
+        setError(parsedResponse.error);
+        throw new Error();
+      }
+      ctx.notice("The record has been successfully restored!");
+      ctx.navigateTo(
+        "/editor/item_types/" +
+          parsedResponse.restoredRecord.modelID +
+          "/items/" +
+          parsedResponse.restoredRecord.id
+      );
+    } catch (error) {
+      setLoading(false);
+      await ctx.alert("The record could not be restored!");
+    }
+  };
+  const errorModalHandler = async () => {
+    await ctx.openModal({
+      id: "errorModal",
+      title: "Restoration error",
+      width: "l",
+      parameters: { errorPayload: error!.fullErrorPayload },
+    });
+  };
+  return (
+    <Canvas ctx={ctx}>
+      <Form>
+        <FieldGroup>
+          {error && (
+            <Section title="Restoration error">
+              <p>Couldn't restore the record because of the following error:</p>
+              <p>
+                {error.simplifiedError.code}:{" "}
+                {error.simplifiedError.details.field ||
+                  error.simplifiedError.details.extraneous_attributes}
+              </p>
+              <p>{error.simplifiedError.details.code}</p>
+              <Button onClick={errorModalHandler}>
+                See full restoration error report
+              </Button>
+              <p>
+                You can manually correct the errors on the record body, save the
+                record, and re-attempt to restore it.
+              </p>
+            </Section>
+          )}
+        </FieldGroup>
+        <FieldGroup>
+          <Button
+            buttonType={isLoading ? "muted" : "primary"}
+            disabled={isLoading}
+            fullWidth
+            onClick={restorationHandler}
+          >
+            Restore record ♻️
+          </Button>
+        </FieldGroup>
+      </Form>
+    </Canvas>
+  );
+};
+export default BinOutlet;

package/src/entrypoints/ConfigScreen.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import { RenderConfigScreenCtx } from "datocms-plugin-sdk";
+import { Button, Canvas, Form, TextField } from "datocms-react-ui";
+import { useState } from "react";
+type Props = {
+  ctx: RenderConfigScreenCtx;
+};
+export default function ConfigScreen({ ctx }: Props) {
+  const [numberOfDays, setNumberOfDays] = useState("7");
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const deletionHandler = async () => {
+    const userInput = parseInt(numberOfDays);
+    if (isNaN(userInput)) {
+      setError("Days must be an integerer number");
+      return;
+    }
+    setLoading(true);
+    const requestBody = {
+      event_type: "cleanup",
+      numberOfDays: numberOfDays,
+      environment: ctx.environment,
+    };
+    const parsedBody = JSON.stringify(requestBody);
+    await fetch(ctx.plugin.attributes.parameters.vercelURL as URL, {
+      method: "POST",
+      body: parsedBody,
+      headers: { Accept: "*/*", "Content-Type": "application/json" },
+    });
+    ctx.notice(
+      `All records older than ${numberOfDays} days in the bin have been deleted.`
+    );
+    setLoading(false);
+  };
+  return (
+    <Canvas ctx={ctx}>
+      <h2>Delete all trashed records older than </h2>{" "}
+      <Form>
+        <TextField
+          error={error}
+          required
+          name="numberOfDays"
+          id="numberOfDays"
+          label="Days"
+          value={numberOfDays}
+          onChange={(event) => {
+            setNumberOfDays(event);
+            setError("");
+          }}
+        />
+        <Button
+          onClick={deletionHandler}
+          fullWidth
+          buttonType={isLoading ? "muted" : "negative"}
+          disabled={isLoading}
+        >
+          Delete
+        </Button>
+      </Form>
+    </Canvas>
+  );
+}

package/src/entrypoints/ErrorModal.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { RenderModalCtx } from "datocms-plugin-sdk";
+import { Button, Canvas } from "datocms-react-ui";
+type PropTypes = {
+  ctx: RenderModalCtx;
+};
+const ErrorModal = ({ ctx }: PropTypes) => {
+  const handleCancelationButtonClick = () => {
+    ctx.resolve("done");
+  };
+  const newString = (ctx.parameters.errorPayload as string)
+    .replaceAll("\\n", "\n")
+    .replaceAll("\\", "");
+  return (
+    <Canvas ctx={ctx}>
+      <pre>{newString}</pre>
+      <Button
+        onClick={handleCancelationButtonClick}
+        fullWidth
+        buttonType="primary"
+      >
+        Done
+      </Button>
+    </Canvas>
+  );
+};
+export default ErrorModal;

package/src/entrypoints/InstallationModal.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+import { RenderModalCtx } from "datocms-plugin-sdk";
+import { Button, Canvas, Form, TextField } from "datocms-react-ui";
+import { useState } from "react";
+import attemptVercelInitialization from "../utils/attemptVercelInitialization";
+type PropTypes = {
+  ctx: RenderModalCtx;
+};
+const InstallationModal = ({ ctx }: PropTypes) => {
+  const [vercelURL, setVercelURL] = useState("");
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const handleDeployButtonClick = () => {
+    window.open(
+      `https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmarcelofinamorvieira%2Frecord-bin-lambda-function&env=DATOCMS_FULLACCESS_API_TOKEN&project-name=datocms-record-bin-lambda-function&repo-name=datocms-record-bin-lambda-function`
+    );
+  };
+  const handleCancelationButtonClick = () => {
+    ctx.updatePluginParameters({ installationState: "cancelled" });
+    ctx.resolve("cancelled");
+  };
+  const handleFinishButtonClick = async () => {
+    setIsLoading(true);
+    try {
+      await attemptVercelInitialization(vercelURL, ctx.environment);
+      ctx.updatePluginParameters({ installationState: "installed", vercelURL });
+      ctx.resolve("installed");
+    } catch {
+      setIsLoading(false);
+      setIsInvalid(true);
+    }
+  };
+  return (
+    <Canvas ctx={ctx}>
+      <div style={{ textAlign: "center" }}>
+        <h1>Before continuing:</h1>
+        <p>
+          Record bin requires a lambda function to manage the creation and
+          restoration of the deleted records. By clicking the deploy button
+          bellow you can create your own instance of that lambda function. Once
+          you are finished with the setup, insert the deployment URL in the
+          field bellow.
+        </p>
+        <p>
+          If you'd like, you also can see, clone, and read the documentation on
+          that lambda function on{" "}
+          <a
+            href="https://github.com/marcelofinamorvieira/record-bin-lambda-function"
+            target="_blank"
+            rel="noreferrer"
+          >
+            this repository
+          </a>
+        </p>
+        <h2>You can create your instance of that lambda function here:</h2>
+        <Form>
+          <Button
+            onClick={handleDeployButtonClick}
+            fullWidth
+            buttonType="muted"
+          >
+            Deploy on Vercel
+          </Button>
+          <TextField
+            name="vercelURL"
+            id="email"
+            label="Once deployed, insert your deployed URL"
+            value={vercelURL}
+            placeholder="https://record-bin.vercel.app/"
+            error={isInvalid ? "Please insert a valid URL" : ""}
+            onChange={(newValue) => {
+              setIsInvalid(false);
+              setVercelURL(newValue);
+            }}
+          />
+          <Button
+            fullWidth
+            buttonType={isLoading ? "muted" : "primary"}
+            disabled={isLoading}
+            onClick={handleFinishButtonClick}
+          >
+            Finish installation
+          </Button>
+          <Button
+            fullWidth
+            buttonType="negative"
+            onClick={handleCancelationButtonClick}
+          >
+            Cancel installation
+          </Button>
+        </Form>
+      </div>
+    </Canvas>
+  );
+};
+export default InstallationModal;

package/src/entrypoints/PreInstallConfig.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { RenderConfigScreenCtx } from "datocms-plugin-sdk";
+import { Button, Canvas } from "datocms-react-ui";
+type Props = {
+  ctx: RenderConfigScreenCtx;
+};
+export default function PreInstallConfig({ ctx }: Props) {
+  const handleRetryInstallation = async () => {
+    ctx.updatePluginParameters({ installationState: null });
+    await ctx.openModal({
+      id: "installationModal",
+      title: "Record Bin setup",
+      width: "m",
+      parameters: { foo: "bar" },
+      closeDisabled: true,
+    });
+  };
+  return (
+    <Canvas ctx={ctx}>
+      <h2>The plugin installation could not be completed.</h2>
+      <Button onClick={handleRetryInstallation} fullWidth buttonType="primary">
+        Retry installation
+      </Button>
+    </Canvas>
+  );
+}

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import {
+  connect,
+  IntentCtx,
+  ItemType,
+  RenderItemFormOutletCtx,
+  RenderModalCtx,
+} from "datocms-plugin-sdk";
+import { render } from "./utils/render";
+import ConfigScreen from "./entrypoints/ConfigScreen";
+import "datocms-react-ui/styles.css";
+import BinOutlet from "./entrypoints/BinOutlet";
+import InstallationModal from "./entrypoints/InstallationModal";
+import PreInstallConfig from "./entrypoints/PreInstallConfig";
+import ErrorModal from "./entrypoints/ErrorModal";
+connect({
+  async onBoot(ctx) {
+    if (
+      !ctx.plugin.attributes.parameters.installationState &&
+      !ctx.plugin.attributes.parameters.hasBeenPrompted
+    ) {
+      ctx.updatePluginParameters({ hasBeenPrompted: true });
+      await ctx.openModal({
+        id: "installationModal",
+        title: "Record Bin setup",
+        width: "m",
+        parameters: { foo: "bar" },
+        closeDisabled: true,
+      });
+    }
+  },
+  renderConfigScreen(ctx) {
+    if (ctx.plugin.attributes.parameters.installationState === "installed") {
+      return render(<ConfigScreen ctx={ctx} />);
+    }
+    return render(<PreInstallConfig ctx={ctx} />);
+  },
+  itemFormOutlets(model: ItemType, ctx: IntentCtx) {
+    if (model.attributes.api_key === "record_bin") {
+      return [
+        {
+          id: "recordBin",
+          initialHeight: 0,
+        },
+      ];
+    }
+    return [];
+  },
+  renderItemFormOutlet(outletId, ctx: RenderItemFormOutletCtx) {
+    if (
+      outletId === "recordBin" &&
+      ctx.plugin.attributes.parameters.installationState === "installed"
+    ) {
+      render(<BinOutlet ctx={ctx} />);
+    }
+  },
+  renderModal(modalId: string, ctx: RenderModalCtx) {
+    switch (modalId) {
+      case "installationModal":
+        return render(<InstallationModal ctx={ctx} />);
+      case "errorModal":
+        return render(<ErrorModal ctx={ctx} />);
+    }
+  },
+});

package/src/react-app-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="react-scripts" />

package/src/utils/attemptVercelInitialization.ts ADDED Viewed

@@ -0,0 +1,16 @@
+const attemptVercelInitialization = async (
+  vercelURL: string,
+  environment: string
+) => {
+  const requestBody = { event_type: "initialization", environment, vercelURL };
+  const parsedBody = JSON.stringify(requestBody);
+  await fetch(vercelURL, {
+    method: "POST",
+    body: parsedBody,
+    headers: { Accept: "*/*", "Content-Type": "application/json" },
+  });
+};
+export default attemptVercelInitialization;

package/src/utils/render.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import React, { StrictMode } from "react";
+import ReactDOM from "react-dom";
+export function render(component: React.ReactNode): void {
+  ReactDOM.render(
+    <StrictMode>{component}</StrictMode>,
+    document.getElementById("root")
+  );
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}