feat: create preview plugin for strapi dashboard

packages/preview-button/README.md

@@ -0,0 +1,3 @@
+# Strapi plugin preview-button
+
+A quick description of preview-button.

packages/preview-button/admin/src/components/Initializer/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

packages/preview-button/admin/src/components/PluginIcon/index.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import Puzzle from '@strapi/icons/Puzzle';
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

packages/preview-button/admin/src/components/PreviewLink/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import Eye from '@strapi/icons/Eye';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+
+const PreviewLink = () => {
+    const { initialData } = useCMEditViewDataManager();
+    if (!initialData.slug) {
+        return null;
+    }
+
+    return (
+        <LinkButton
+            size="S"
+            startIcon={<Eye />}
+            style={{ width: '100%' }}
+            href={`${STRAPI_FRONTEND_URL}?secret=${STRAPI_FRONTEND_PREVIEW_SECRET}&type=${STRAPI_FRONTEND_TYPE}&slug=${initialData.slug}&locale=${initialData.locale}`}
+            variant="secondary"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="page preview"
+        >Preview
+        </LinkButton>
+    );
+};
+
+export default PreviewLink;

packages/preview-button/admin/src/index.js

@@ -0,0 +1,68 @@
+import { prefixPluginTranslations } from "@strapi/helper-plugin";
+import pluginPkg from "../../package.json";
+import pluginId from "./pluginId";
+import Initializer from "./components/Initializer";
+import PreviewLink from "./components/PreviewLink";
+import PluginIcon from "./components/PluginIcon";
+
+const name = pluginPkg.strapi.name;
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: name,
+      },
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "[request]" */ "./pages/App");
+        return component;
+      },
+
+      permissions: [
+        // Uncomment to set the permissions of the plugin here
+        // {
+        //   action: '', // the action name should be plugin::plugin-name.actionType
+        //   subject: null,
+        // },
+      ],
+    });
+
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  bootstrap(app) {
+    app.injectContentManagerComponent("editView", "right-links", {
+      name: "preview-link",
+      Component: PreviewLink,
+    });
+  },
+
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(/* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+    return Promise.resolve(importedTrads);
+  },
+};

packages/preview-button/admin/src/pages/App/index.js

@@ -0,0 +1,25 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import HomePage from '../HomePage';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

packages/preview-button/admin/src/pages/HomePage/index.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s HomePage</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default HomePage;

packages/preview-button/admin/src/pluginId.js

@@ -0,0 +1,5 @@
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+export default pluginId;

packages/preview-button/admin/src/translations/en.json

@@ -0,0 +1 @@
+{}

packages/preview-button/admin/src/translations/fr.json

@@ -0,0 +1 @@
+{}

packages/preview-button/admin/src/utils/axiosInstance.js

@@ -0,0 +1,40 @@
+/**
+ * axios with a custom config.
+ */
+
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async (config) => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // whatever you want to do with the error
+    if (error.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
+export default instance;

packages/preview-button/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = (id) => `${pluginId}.${id}`;
+
+export default getTrad;

packages/preview-button/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@frameless/preview-button",
+  "version": "0.0.0-semantically-released",
+  "description": "This is the description of the plugin.",
+  "private": false,
+  "strapi": {
+    "name": "preview-button",
+    "description": "Description of Preview Button plugin",
+    "kind": "plugin",
+    "displayName": "Preview Button"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:frameless/strapi.git"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "dependencies": {},
+  "author": {
+    "name": "A Strapi developer"
+  },
+  "maintainers": [
+    {
+      "name": "A Strapi developer"
+    }
+  ],
+  "engines": {
+    "node": ">=16.16.0 <=18.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

packages/preview-button/server/bootstrap.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // bootstrap phase
+};

packages/preview-button/server/config/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  default: {},
+  validator() {},
+};

packages/preview-button/server/content-types/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

packages/preview-button/server/controllers/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const myController = require('./my-controller');
+
+module.exports = {
+  myController,
+};

packages/preview-button/server/controllers/my-controller.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = ({ strapi }) => ({
+  index(ctx) {
+    ctx.body = strapi
+      .plugin('preview-button')
+      .service('myService')
+      .getWelcomeMessage();
+  },
+});

packages/preview-button/server/destroy.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // destroy phase
+};

packages/preview-button/server/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const register = require('./register');
+const bootstrap = require('./bootstrap');
+const destroy = require('./destroy');
+const config = require('./config');
+const contentTypes = require('./content-types');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const middlewares = require('./middlewares');
+const policies = require('./policies');
+const services = require('./services');
+
+module.exports = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares,
+};

packages/preview-button/server/middlewares/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};