Show config state in admin page

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CustomRow = ({ row }) => {
+  const { config_name, config_type, state, onClick } = row;
+
+
+  return (
+    <tr onClick={() => onClick(config_type, config_name)}>
+      <td>
+        <p>{config_name}</p>
+      </td>
+      <td>
+        <p>{config_type}</p>
+      </td>
+      <td>
+        <p style={stateStyle(state)}>{state}</p>
+      </td>
+    </tr>
+  );
+};
+
+const stateStyle = (state) => {
+  let style = {
+    display: 'inline-flex',
+    padding: '0 10px',
+    borderRadius: '12px',
+    height: '24px',
+    alignItems: 'center',
+    fontWeight: '500',
+  };
+
+  if (state === 'Only in DB') {
+    style.backgroundColor = '#cbf2d7';
+    style.color = '#1b522b';
+  }
+
+  if (state === 'Only in sync dir') {
+    style.backgroundColor = '#f0cac7';
+    style.color = '#3d302f';
+  }
+
+  if (state === 'Different') {
+    style.backgroundColor = '#e8e6b7';
+    style.color = '#4a4934';
+  }
+
+  return style;
+};
+
+
+export default CustomRow

admin/src/components/ConfigList/index.js

@@ -3,6 +3,7 @@ import { Table } from '@buffetjs/core';
 import { isEmpty } from 'lodash';
 import ConfigDiff from '../ConfigDiff';
 import FirstExport from '../FirstExport';
+import ConfigListRow from './ConfigListRow';
 
 const headers = [
   {
@@ -14,8 +15,8 @@ const headers = [
     value: 'config_type',
   },
   {
-    name: 'Change',
+    name: 'State',
-    value: 'change_type',
+    value: 'state',
   },
 ];
 
@@ -26,6 +27,25 @@ const ConfigList = ({ diff, isLoading }) => {
   const [configName, setConfigName] = useState('');
   const [rows, setRows] = useState([]);
 
+  const getConfigState = (configName) => {
+    if (
+      diff.fileConfig[configName] &&
+      diff.databaseConfig[configName]
+    ) {
+      return 'Different'
+    } else if (
+      diff.fileConfig[configName] &&
+      !diff.databaseConfig[configName]
+    ) {
+      return 'Only in sync dir'
+    } else if (
+      !diff.fileConfig[configName] &&
+      diff.databaseConfig[configName]
+    ) {
+      return 'Only in DB'
+    }
+  };
+
   useEffect(() => {
     if (isEmpty(diff.diff)) {
       setRows([]);
@@ -40,7 +60,13 @@ const ConfigList = ({ diff, isLoading }) => {
       formattedRows.push({ 
         config_name: name,
         config_type: type,
-        change_type: ''
+        state: getConfigState(configName),
+        onClick: (config_type, config_name) => {
+          setOriginalConfig(diff.fileConfig[`${config_type}.${config_name}`]);
+          setNewConfig(diff.databaseConfig[`${config_type}.${config_name}`]);
+          setConfigName(`${config_type}.${config_name}`);
+          setOpenModal(true);
+        }
       });
     });
 
@@ -70,12 +96,7 @@ const ConfigList = ({ diff, isLoading }) => {
       />
       <Table
         headers={headers}
-        onClickRow={(e, { config_type, config_name }) => {
+        customRow={ConfigListRow}
-          setOriginalConfig(diff.fileConfig[`${config_type}.${config_name}`]);
-          setNewConfig(diff.databaseConfig[`${config_type}.${config_name}`]);
-          setConfigName(`${config_type}.${config_name}`);
-          setOpenModal(true);
-        }}
         rows={!isLoading ? rows : []}
         isLoading={isLoading}
         tableEmptyText="No config changes. You are up to date!"