From ccef257c324dee66e3923b7ffa1fb585990c3168 Mon Sep 17 00:00:00 2001
From: Boaz Poolman <boaz_skater@hotmail.com>
Date: Sat, 13 Nov 2021 14:30:16 +0100
Subject: [PATCH] feat: Empty states in admin

---
 admin/src/components/ConfigList/index.js  |  5 +++++
 admin/src/components/FirstExport/index.js | 26 +++++++++--------------
 admin/src/components/NoChanges/index.js   | 14 ++++++++++++
 3 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 admin/src/components/NoChanges/index.js

diff --git a/admin/src/components/ConfigList/index.js b/admin/src/components/ConfigList/index.js
index 9636b67..e243c2d 100644
--- a/admin/src/components/ConfigList/index.js
+++ b/admin/src/components/ConfigList/index.js
@@ -6,6 +6,7 @@ import { TableLabel } from '@strapi/design-system/Text';
 
 import ConfigDiff from '../ConfigDiff';
 import FirstExport from '../FirstExport';
+import NoChanges from '../NoChanges';
 import ConfigListRow from './ConfigListRow';
 
 const ConfigList = ({ diff, isLoading }) => {
@@ -72,6 +73,10 @@ const ConfigList = ({ diff, isLoading }) => {
     return <FirstExport />;
   }
 
+  if (!isLoading && isEmpty(diff.diff)) {
+    return <NoChanges />;
+  }
+
   return (
     <div>
       <ConfigDiff
diff --git a/admin/src/components/FirstExport/index.js b/admin/src/components/FirstExport/index.js
index f4453ed..244de24 100644
--- a/admin/src/components/FirstExport/index.js
+++ b/admin/src/components/FirstExport/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
-
+import { NoContent } from '@strapi/helper-plugin';
 import { Button } from '@strapi/design-system/Button';
 
 import { exportAllConfig } from '../../state/actions/Config';
@@ -11,27 +11,21 @@ const FirstExport = () => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
   return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      textAlign: 'center',
-      height: '300px',
-    }}>
+    <div>
       <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
-        onClick={() => setModalIsOpen(true)}
-      >
-        Initial export
-      </Button>
+      <NoContent
+        content={{
+          id: 'emptyState',
+          defaultMessage:
+            'Looks like this is your first time using config-sync for this project.',
+        }}
+        action={<Button onClick={() => setModalIsOpen(true)}>Make the initial export</Button>}
+      />
     </div>
   );
 };
diff --git a/admin/src/components/NoChanges/index.js b/admin/src/components/NoChanges/index.js
new file mode 100644
index 0000000..25a1451
--- /dev/null
+++ b/admin/src/components/NoChanges/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { NoContent } from '@strapi/helper-plugin';
+
+const NoChanges = () => (
+  <NoContent
+    content={{
+      id: 'emptyState',
+      defaultMessage:
+        'No differences between DB and sync directory. You are up-to-date!',
+    }}
+  />
+);
+
+export default NoChanges;