✨ Add logic & layout

Author: Striffly

admin/src/components/PluginIcon.jsx

@@ -1,5 +1,5 @@
-import { PuzzlePiece } from '@strapi/icons';
+import { Server } from '@strapi/icons';
 
-const PluginIcon = () => <PuzzlePiece />;
+const PluginIcon = () => <Server />;
 
 export { PluginIcon };

admin/src/index.js

@@ -1,16 +1,15 @@
-import { getTranslation } from './utils/getTranslation';
 import { PLUGIN_ID } from './pluginId';
 import { Initializer } from './components/Initializer';
 import { PluginIcon } from './components/PluginIcon';
 
 export default {
   register(app) {
     app.addMenuLink({
-      to: `plugins/${PluginIcon}`,
+      to: `plugins/${PLUGIN_ID}`,
       icon: PluginIcon,
       intlLabel: {
         id: `${PLUGIN_ID}.plugin.name`,
-        defaultMessage: PLUGIN_ID,
+        defaultMessage: 'GitLab Publish',
       },
       Component: async () => {
         const { App } = await import('./pages/App');

admin/src/pages/HomePage.jsx

@@ -1,15 +1,69 @@
-import { Main } from '@strapi/design-system';
-import { useIntl } from 'react-intl';
+import React, { useState } from 'react';
+import { PLUGIN_ID } from '../pluginId';
 
-import { getTranslation } from '../utils/getTranslation';
+import { useFetchClient, useNotification } from '@strapi/strapi/admin';
+import { Layouts, Page } from '@strapi/strapi/admin';
+import { Button } from '@strapi/design-system';
 
 const HomePage = () => {
-  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { get } = useFetchClient();
+  const [busy, setBusy] = useState(false);
+
+  const triggerPublish = async () => {
+    if (busy === true) return;
+
+    setBusy(true);
+    try {
+      const { data } = await get(`/${PLUGIN_ID}/publish`);
+      if (data?.success !== true) {
+        handleError({ message: 'call not succeded' });
+      } else {
+        handleSuccess();
+      }
+    } catch (e) {
+      handleError(e);
+    }
+  };
+
+  const handleSuccess = () => {
+    toggleNotification({
+      type: 'success',
+      message: 'Pipeline launched ! Check it on GitLab to see progress.',
+    });
+  };
+
+  const handleError = (e) => {
+    toggleNotification({
+      type: 'danger',
+      message: `Error during process : ${e.message}`,
+    });
+    setBusy(false);
+    throw new Error(e);
+  };
 
   return (
-    <Main>
-      <h1>Welcome to {formatMessage({ id: getTranslation('plugin.name') })}</h1>
-    </Main>
+    <Layouts.Root>
+      <Page.Title children={'GitLab Publish'} />
+      <Page.Main>
+        <Layouts.Header
+          title={'GitLab Publish'}
+          subtitle={'Trigger GitLab pipeline in one click !'}
+        />
+
+        <Layouts.Content>
+          <Button
+            onClick={triggerPublish}
+            startIcon={null}
+            type="button"
+            variant="primary"
+            disabled={busy === true}
+          >
+            Deploy
+          </Button>
+        </Layouts.Content>
+      </Page.Main>
+    </Layouts.Root>
   );
 };
 

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@strapi/design-system": "^2.0.0-rc.14",
     "@strapi/icons": "^2.0.0-rc.14",
+    "axios": "^1.7.9",
     "react-intl": "^7.1.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,4 +1,14 @@
 export default {
   default: {},
-  validator() {},
+  validator: ({ project_id, project_pipeline_token, project_branch }) => {
+    if (!project_id) {
+      throw new Error('project_id is a required');
+    }
+    if (!project_pipeline_token) {
+      throw new Error('project_pipeline_token is a required');
+    }
+    if (!project_branch) {
+      throw new Error('project_branch is a required');
+    }
+  },
 };

server/src/config/index.js

@@ -1,10 +1,21 @@
+import axios from 'axios';
+
+const pluginId = 'plugin.gitlab-publish';
+
 const controller = ({ strapi }) => ({
-  index(ctx) {
-    ctx.body = strapi
-      .plugin('gitlab-publish')
-      // the name of the service file & the method.
-      .service('service')
-      .getWelcomeMessage();
+  publish: async (ctx) => {
+    const { project_id, project_pipeline_token, project_branch } = strapi.config.get(pluginId);
+
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+
+    const url = `https://gitlab.com/api/v4/projects/${project_id}/ref/${project_branch}/trigger/pipeline?token=${project_pipeline_token}`;
+
+    const { status } = await axios.post(url, {}, { headers });
+    const success = status === 201;
+
+    ctx.send({ success });
   },
 });
 

server/src/content-types/index.js

@@ -9,12 +9,8 @@ import register from './register';
  * Plugin server methods
  */
 import config from './config';
-import contentTypes from './content-types';
 import controllers from './controllers';
-import middlewares from './middlewares';
-import policies from './policies';
 import routes from './routes';
-import services from './services';
 
 export default {
   bootstrap,
@@ -23,9 +19,5 @@ export default {
 
   config,
   controllers,
-  contentTypes,
-  middlewares,
-  policies,
   routes,
-  services,
 };