fix: LOPS-379: [FE] Search input box should be hidden and appropriate…

… message should be displayed for non-synced datasets (#224)

src/components/MainView/DataView/DataView.js

@@ -17,6 +17,7 @@ import { GridView } from "../GridView/GridView";
 import { CandidateTaskView } from "../../CandidateTaskView";
 import { modal } from "../../Common/Modal/Modal";
 import "./DataView.styl";
+import { Button } from "../../Common/Button/Button";
 
 const injector = inject(({ store }) => {
   const { dataStore, currentView } = store;
@@ -143,6 +144,17 @@ export const DataView = injector(
             <Spinner size="large" />
           </Block>
         );
+      } else if (store.SDK.type === 'DE' && store.SDK.dataset?.status?.id !== 'completed') {
+        return (
+          <Block name="syncInProgress">
+            <Elem name='title' tag="h3">Hang tight! Items are syncing in the background</Elem>
+            <Elem name='text'>Press the button below to see any synced items</Elem>
+            <Button onClick={async () => {
+              await store.fetchProject({ force: true, interaction: 'refresh' });
+              await store.currentView?.reload();
+            }}>Refresh</Button>
+          </Block>
+        );
       } else if (total === 0 || !hasData) {
         return (
           <Block name="no-results">

src/components/MainView/DataView/DataView.styl

@@ -31,3 +31,26 @@
     font-size 16px
     text-align center
     color rgba(#000, 0.6)
+
+.syncInProgress
+  height 100%
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  font-size 16px
+  text-align center
+  color rgba(#000, 0.6)
+
+  .button
+    color rgba(9, 109, 217, 1)
+    padding 8px 16px
+    border 1px solid rgba(9, 109, 217, 0.16)
+    border-radius 4px
+    box-shadow none
+    font-size 16px
+    font-weight 500
+    line-height 24px
+    letter-spacing 0.15px
+  &__text
+    margin-bottom 1em

src/components/MainView/DataViewOld/Table.js

@@ -16,6 +16,7 @@ import { GridView } from "../GridViewOld/GridView";
 import { CandidateTaskView } from "../../CandidateTaskView";
 import "./Table.styl";
 import { modal } from "../../Common/Modal/Modal";
+import { Button } from "../../Common/Button/Button";
 
 const injector = inject(({ store }) => {
   const { dataStore, currentView } = store;
@@ -140,6 +141,17 @@ export const DataView = injector(
               <Spinner size="large" />
             </Block>
           );
+        } else if (store.SDK.type === 'DE' && store.SDK.dataset?.status?.id !== 'completed') {
+          return (
+            <Block name="syncInProgress">
+              <Elem name='title' tag="h3">Hang tight! Items are syncing in the background</Elem>
+              <Elem name='text'>Press the button below to see any synced items</Elem>
+              <Button onClick={async () => {
+                await store.fetchProject({ force: true, interaction: 'refresh' });
+                await store.currentView?.reload();
+              }}>Refresh</Button>
+            </Block>
+          );
         } else if (total === 0 || !hasData) {
           return (
             <Block name="no-results">

src/components/MainView/DataViewOld/Table.styl

@@ -15,3 +15,26 @@
     font-size 16px
     text-align center
     color rgba(#000, 0.6)
+
+.syncInProgress
+  height 100%
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  font-size 16px
+  text-align center
+  color rgba(#000, 0.6)
+
+  .button
+    color rgba(9, 109, 217, 1)
+    padding 8px 16px
+    border 1px solid rgba(9, 109, 217, 0.16)
+    border-radius 4px
+    box-shadow none
+    font-size 16px
+    font-weight 500
+    line-height 24px
+    letter-spacing 0.15px
+  &__text
+    margin-bottom 1em