feat: Empty states in admin

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

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>
   );
 };

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;