Component for initial config export

admin/src/components/ActionButtons/index.js

@@ -23,8 +23,8 @@ const ActionButtons = ({ diff }) => {
 
   return (
     <ActionButtonsStyling>
-      <Button disabled={isEmpty(diff.diff)} color="primary" label="Import" onClick={() => openModal('import')} />
+      <Button disabled={isEmpty(diff.fileConfig)} color="primary" label="Import" onClick={() => openModal('import')} />
-      <Button disabled={isEmpty(diff.diff)} color="primary" label="Export" onClick={() => openModal('export')} />
+      <Button disabled={isEmpty(diff.fileConfig)} color="primary" label="Export" onClick={() => openModal('export')} />
       <ConfirmModal
         isOpen={modalIsOpen}
         onClose={closeModal}

admin/src/components/ConfigList/index.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Table } from '@buffetjs/core';
 import { isEmpty } from 'lodash';
 import ConfigDiff from '../ConfigDiff';
+import FirstExport from '../FirstExport';
 
 const headers = [
   {
@@ -26,7 +27,7 @@ const ConfigList = ({ diff, isLoading }) => {
   const [rows, setRows] = useState([]);
 
   useEffect(() => {
-    if (isEmpty(diff)) {
+    if (isEmpty(diff.diff)) {
       setRows([]);
       return;
     }
@@ -53,6 +54,10 @@ const ConfigList = ({ diff, isLoading }) => {
     setOpenModal(false);
   };
 
+  if (!isLoading && !isEmpty(diff.message)) {
+    return <FirstExport />
+  }
+
   return (
     <div>
       <ConfigDiff

admin/src/components/FirstExport/index.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button } from '@buffetjs/core';
+import { exportAllConfig } from '../../state/actions/Config';
+import ConfirmModal from '../ConfirmModal';
+
+const FirstExport = () => {
+  const dispatch = useDispatch();
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  return (
+    <div style={{ 
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      textAlign: 'center',
+      height: '300px',
+     }}>
+      <ConfirmModal
+        isOpen={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        type={'export'}
+        onSubmit={() =>  dispatch(exportAllConfig())}
+      />
+      <h3>Looks like this is your first time using config-sync for this project.</h3>
+      <p>Make the initial export!</p>
+      <Button color="primary" onClick={() => setModalIsOpen(true)}>Initial export</Button>
+    </div>
+  );
+}
+ 
+export default FirstExport;