Merge pull request #147 from pluginpal/feature/beta-fixes

Feature/beta fixes

Author: boazpoolman

.github/workflows/tests.yml

@@ -41,9 +41,13 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: 'yarn'
       - name: Install dependencies plugin
-        run: yarn --no-lockfile --unsafe-perm --production
+        run: yarn --no-lockfile --unsafe-perm
+      - name: Push the package to yalc
+        run: yarn build
+      - name: Add yalc package to the playground
+        run: yarn playground:yalc-add
       - name: Install dependencies playground
-        run: yarn playground:install --unsafe-perm
+        run: cd playground && yarn install --unsafe-perm
       - name: Build playground
         run: yarn playground:build
       - name: Run test

CONTRIBUTING.md

@@ -4,60 +4,55 @@ We want this community to be friendly and respectful to each other. Please follo
 
 ## Development Workflow
 
-To get started with the project, make sure you have a local instance of Strapi running.
-See the [Strapi docs](https://github.com/strapi/strapi#getting-started) on how to setup a Strapi project.
+This plugin provides a local development instance of Strapi to develop it's features. We call this instance `playground` and it can be found in the playground folder in the root of the project. For that reason it is not needed to have your own Strapi instance running to work on this plugin. Just clone the repo and you're ready to go!
 
-#### 1. Fork the [repository](https://github.com/boazpoolman/strapi-plugin-config-sync)
+#### 1. Fork the [repository](https://github.com/pluginpal/strapi-plugin-config-sync)
 
-[Go to the repository](https://github.com/boazpoolman/strapi-plugin-config-sync) and fork it to your own GitHub account.
+[Go to the repository](https://github.com/pluginpal/strapi-plugin-config-sync) and fork it to your own GitHub account.
 
-#### 2. Clone from your repository into the plugins folder
+#### 2. Clone the forked repository
 
 ```bash
-cd YOUR_STRAPI_PROJECT/src/plugins
-git clone [email protected]:YOUR_USERNAME/strapi-plugin-config-sync.git config-sync
+git clone [email protected]:YOUR_USERNAME/strapi-plugin-config-sync.git
 ```
 
 #### 3. Install the dependencies
 
-Go to the plugin and install it's dependencies.
+Go to the folder and install the dependencies
 
 ```bash
-cd YOUR_STRAPI_PROJECT/src/plugins/config-sync/ && yarn plugin:install
+cd strapi-plugin-config-sync && yarn install
 ```
 
-#### 4. Enable the plugin
+#### 4. Install the playground dependencies
 
-Add the following lines to the `config/plugins.js` file in your Strapi project.
+Run this in the root of the repository
 
-```
-const path = require('path');
-// ...
-{
-  'config-sync': {
-    enabled: true,
-    resolve: path.resolve(__dirname, '../src/plugins/config-sync'),
-  },
-}
+```bash
+yarn playground:install
 ```
 
-#### 5. Rebuild your Strapi project
+#### 5. Run the compiler of the plugin 
 
-Rebuild your strapi project to build the admin part of the plugin.
+We use `yalc` to publish the package to a local registry. Run the following command o watch for changes and push to `yalc` every time a change is made:
 
 ```bash
-cd YOUR_STRAPI_PROJECT && yarn build
+yarn develop
 ```
 
-#### 6. Running the administration panel in development mode
+#### 6. Start the playground instance
 
-**Start the administration panel server for development**
+Leave the watcher running, open up a new terminal window and browse back to the root of the plugin repo. Run the following command:
 
 ```bash
-cd YOUR_STRAPI_PROJECT && yarn develop --watch-admin
+yarn playground:develop
 ```
 
-The administration panel will be available at http://localhost:8080/admin
+This will start the playground instance that will have the plugin installed from the `yalc` registry. Browse to http://localhost:1337 and create a test admin user to log in to the playground.
+
+#### 7. Start your contribution!
+
+You can now start working on your contribution. If you had trouble setting up this testing environment please feel free to report an issue on Github.
 
 ### Commit message convention
 
@@ -82,12 +77,10 @@ The `package.json` file contains various scripts for common tasks:
 
 - `yarn eslint`: lint files with ESLint.
 - `yarn eslint:fix`: auto-fix ESLint issues.
-- `yarn test:unit`: run unit tests with Jest.
+- `yarn test:integration`: run integration tests with Jest.
 
 ### Sending a pull request
 
-> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
-
 When you're sending a pull request:
 
 - Prefer small pull requests focused on one change.

admin/src/components/ActionButtons/index.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { Button } from '@strapi/design-system';
+import { Button, Typography } from '@strapi/design-system';
 import { Map } from 'immutable';
 import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
@@ -14,38 +14,32 @@ const ActionButtons = () => {
   const { post, get } = getFetchClient();
   const dispatch = useDispatch();
   const { toggleNotification } = useNotification();
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [actionType, setActionType] = useState('');
   const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
   const { formatMessage } = useIntl();
 
-  const closeModal = () => {
-    setActionType('');
-    setModalIsOpen(false);
-  };
-
-  const openModal = (type) => {
-    setActionType(type);
-    setModalIsOpen(true);
-  };
-
   return (
     <ActionButtonsStyling>
-      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('import')}>
-        {formatMessage({ id: 'config-sync.Buttons.Import' })}
-      </Button>
-      <Button disabled={isEmpty(partialDiff)} onClick={() => openModal('export')}>
-        {formatMessage({ id: 'config-sync.Buttons.Export' })}
-      </Button>
-      {!isEmpty(partialDiff) && (
-        <h4 style={{ display: 'inline' }}>{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</h4>
-      )}
       <ConfirmModal
-        isOpen={modalIsOpen}
-        onClose={closeModal}
-        type={actionType}
-        onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get)) : dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
+        type="import"
+        trigger={(
+          <Button disabled={isEmpty(partialDiff)}>
+            {formatMessage({ id: 'config-sync.Buttons.Import' })}
+          </Button>
+        )}
+        onSubmit={(force) => dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get))}
       />
+      <ConfirmModal
+        type="export"
+        trigger={(
+          <Button disabled={isEmpty(partialDiff)}>
+            {formatMessage({ id: 'config-sync.Buttons.Export' })}
+          </Button>
+        )}
+        onSubmit={(force) => dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
+      />
+      {!isEmpty(partialDiff) && (
+        <Typography variant="epsilon">{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</Typography>
+      )}
     </ActionButtonsStyling>
   );
 };

admin/src/components/ConfigDiff/index.jsx

@@ -8,36 +8,39 @@ import {
   Typography,
 } from '@strapi/design-system';
 
-const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
+const ConfigDiff = ({ oldValue, newValue, configName, trigger }) => {
   const { formatMessage } = useIntl();
-  if (!isOpen) return null;
 
   return (
-    <Modal.Root
-      onClose={onClose}
-      labelledBy="title"
-    >
-      <Modal.Header>
-        <Typography variant="omega" fontWeight="bold" textColor="neutral800">
-          {formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
-        </Typography>
-      </Modal.Header>
-      <Modal.Body>
-        <Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
-          <Grid.Item col={6}>
-            <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
-          </Grid.Item>
-          <Grid.Item col={6}>
-            <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
-          </Grid.Item>
-        </Grid.Root>
-        <ReactDiffViewer
-          oldValue={JSON.stringify(oldValue, null, 2)}
-          newValue={JSON.stringify(newValue, null, 2)}
-          splitView
-          compareMethod={DiffMethod.WORDS}
-        />
-      </Modal.Body>
+    <Modal.Root>
+      <Modal.Trigger>
+        {trigger}
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Typography variant="omega" fontWeight="bold" textColor="neutral800">
+            {formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
+          </Typography>
+        </Modal.Header>
+        <Modal.Body>
+          <Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
+            <Grid.Item col={6}>
+              <Typography variant="delta" style={{ width: '100%' }}>{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
+            </Grid.Item>
+            <Grid.Item col={6}>
+              <Typography variant="delta" style={{ width: '100%' }}>{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
+            </Grid.Item>
+          </Grid.Root>
+          <Typography variant="pi">
+            <ReactDiffViewer
+              oldValue={JSON.stringify(oldValue, null, 2)}
+              newValue={JSON.stringify(newValue, null, 2)}
+              splitView
+              compareMethod={DiffMethod.WORDS}
+            />
+          </Typography>
+        </Modal.Body>
+      </Modal.Content>
     </Modal.Root>
   );
 };

admin/src/components/ConfigList/ConfigListRow/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Tr, Td, Checkbox } from '@strapi/design-system';
+import { Tr, Td, Checkbox, Typography } from '@strapi/design-system';
 
-const CustomRow = ({ row, checked, updateValue }) => {
+const CustomRow = ({ row, checked, updateValue, ...props }) => {
   const { configName, configType, state, onClick } = row;
 
   const stateStyle = (stateStr) => {
@@ -34,6 +34,7 @@ const CustomRow = ({ row, checked, updateValue }) => {
 
   return (
     <Tr
+      {...props}
       onClick={(e) => {
         if (e.target.type !== 'checkbox') {
           onClick(configType, configName);
@@ -44,18 +45,18 @@ const CustomRow = ({ row, checked, updateValue }) => {
       <Td>
         <Checkbox
           aria-label={`Select ${configName}`}
-          value={checked}
-          onValueChange={updateValue}
+          checked={checked}
+          onCheckedChange={updateValue}
         />
       </Td>
-      <Td>
-        <p>{configName}</p>
+      <Td onClick={(e) => props.onClick(e)}>
+        <Typography variant="omega">{configName}</Typography>
       </Td>
-      <Td>
-        <p>{configType}</p>
+      <Td onClick={(e) => props.onClick(e)}>
+        <Typography variant="omega">{configType}</Typography>
       </Td>
-      <Td>
-        <p style={stateStyle(state)}>{state}</p>
+      <Td onClick={(e) => props.onClick(e)}>
+        <Typography variant="omega" style={stateStyle(state)}>{state}</Typography>
       </Td>
     </Tr>
   );

admin/src/components/ConfigList/index.jsx

@@ -22,7 +22,6 @@ import { setConfigPartialDiffInState } from '../../state/actions/Config';
 
 
 const ConfigList = ({ diff, isLoading }) => {
-  const [openModal, setOpenModal] = useState(false);
   const [originalConfig, setOriginalConfig] = useState({});
   const [newConfig, setNewConfig] = useState({});
   const [cName, setCname] = useState('');
@@ -72,7 +71,6 @@ const ConfigList = ({ diff, isLoading }) => {
           setOriginalConfig(diff.fileConfig[`${configType}.${configName}`]);
           setNewConfig(diff.databaseConfig[`${configType}.${configName}`]);
           setCname(`${configType}.${configName}`);
-          setOpenModal(true);
         },
       });
     });
@@ -89,13 +87,6 @@ const ConfigList = ({ diff, isLoading }) => {
     dispatch(setConfigPartialDiffInState(newPartialDiff));
   }, [checkedItems]);
 
-  const closeModal = () => {
-    setOriginalConfig({});
-    setNewConfig({});
-    setCname('');
-    setOpenModal(false);
-  };
-
   if (isLoading) {
     return (
       <div style={{ textAlign: 'center', marginTop: 40 }}>
@@ -117,22 +108,14 @@ const ConfigList = ({ diff, isLoading }) => {
 
   return (
     <div>
-      <ConfigDiff
-        isOpen={openModal}
-        oldValue={originalConfig}
-        newValue={newConfig}
-        onClose={closeModal}
-        configName={cName}
-      />
       <Table colCount={4} rowCount={rows.length + 1}>
         <Thead>
           <Tr>
             <Th>
               <Checkbox
                 aria-label={formatMessage({ id: 'config-sync.ConfigList.SelectAll' })}
-                indeterminate={isIndeterminate}
-                onValueChange={(value) => setCheckedItems(checkedItems.map(() => value))}
-                value={allChecked}
+                checked={isIndeterminate ? "indeterminate" : allChecked}
+                onCheckedChange={(value) => setCheckedItems(checkedItems.map(() => value))}
               />
             </Th>
             <Th>
@@ -148,14 +131,21 @@ const ConfigList = ({ diff, isLoading }) => {
         </Thead>
         <Tbody>
           {rows.map((row, index) => (
-            <ConfigListRow
+            <ConfigDiff
               key={row.configName}
-              row={row}
-              checked={checkedItems[index]}
-              updateValue={() => {
-                checkedItems[index] = !checkedItems[index];
-                setCheckedItems([...checkedItems]);
-              }}
+              oldValue={originalConfig}
+              newValue={newConfig}
+              configName={cName}
+              trigger={(
+                <ConfigListRow
+                  row={row}
+                  checked={checkedItems[index]}
+                  updateValue={() => {
+                    checkedItems[index] = !checkedItems[index];
+                    setCheckedItems([...checkedItems]);
+                  }}
+                />
+              )}
             />
           ))}
         </Tbody>