Add sync status and failure reason to sheet list page

src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.module.css

@@ -29,16 +29,27 @@
 }
 
 .LastSync {
-  width: 20%;
+  width: 15%;
   min-width: 200px;
 }
 
 .Type {
   min-width: 100px;
 }
 
+.SyncStatus {
+  min-width: 150px;
+}
+
+.FailureReason {
+  min-width: 30px;
+  width: 20%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .Name {
-  width: 30%;
+  width: 25%;
   min-width: 200px;
 }
 
@@ -61,4 +72,27 @@
   font-weight: 400;
   margin: 0 12px;
   color: #073f24;
+  text-align: center;
+}
+
+.SyncStatusBadge {
+  border-radius: 14px;
+  padding: 4px 8px;
+  min-width: 77px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.SuccessBadge {
+  composes: SyncStatusBadge;
+  background-color: #c8ebdc;
+  color: #119656;
+}
+
+.ErrorBadge {
+  composes: SyncStatusBadge;
+  background-color: #fbe8e8;
+  color: #dd1f1f;
 }

src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.test.tsx

@@ -11,7 +11,7 @@ import {
   createSheetQuery,
   getSheetCountQuery,
   syncSheetMutation,
-  syncSheetMutationWithWarnings,
+  syncSheetMutationWithFailure,
 } from 'mocks/Sheet';
 
 const mocks = [
@@ -94,8 +94,8 @@ describe('SheetIntegrationList', () => {
     });
   });
 
-  test('Should render warnings', async () => {
-    const { getByText, getByTestId, getAllByTestId, queryByText } = render(wrapper(syncSheetMutationWithWarnings));
+  test('Should render failure reason dialog', async () => {
+    const { getByText, getByTestId, getAllByTestId, queryByText } = render(wrapper(syncSheetMutationWithFailure));
 
     // loading is show initially
     expect(getByTestId('loading')).toBeInTheDocument();
@@ -107,13 +107,16 @@ describe('SheetIntegrationList', () => {
     fireEvent.click(getAllByTestId('additionalButton')[2]);
 
     await waitFor(() => {
-      expect(screen.getByText('Please check the warnings')).toBeInTheDocument();
+      expect(screen.getByText('Sync Failed')).toBeInTheDocument();
+      expect(
+        screen.getByText('Failed to fetch data from Google Sheets. Please check your permissions.')
+      ).toBeInTheDocument();
     });
 
     fireEvent.click(screen.getByTestId('ok-button'));
 
     await waitFor(() => {
-      expect(queryByText('Please check the warnings')).not.toBeInTheDocument();
+      expect(queryByText('Sync Failed')).not.toBeInTheDocument();
     });
   });
 
@@ -134,7 +137,7 @@ describe('SheetIntegrationList', () => {
     fireEvent.click(screen.getByTestId('ok-button'));
   });
   test('Dialog closes when cross icon is clicked', async () => {
-    const { getByText, getByTestId, getAllByTestId } = render(wrapper(syncSheetMutationWithWarnings));
+    const { getByText, getByTestId, getAllByTestId } = render(wrapper(syncSheetMutationWithFailure));
     expect(getByTestId('loading')).toBeInTheDocument();
 
     await waitFor(() => {
@@ -143,13 +146,48 @@ describe('SheetIntegrationList', () => {
 
     fireEvent.click(getAllByTestId('additionalButton')[2]);
     await waitFor(() => {
-      expect(screen.getByText('Please check the warnings')).toBeInTheDocument();
+      expect(screen.getByText('Sync Failed')).toBeInTheDocument();
     });
 
     const crossIcon = screen.getByLabelText('close');
 
     fireEvent.click(crossIcon);
 
-    expect(screen.queryByText('Please check the warnings')).not.toBeInTheDocument();
+    expect(screen.queryByText('Sync Failed')).not.toBeInTheDocument();
+  });
+
+  test('Should render Sync Status and Failure Reason columns', async () => {
+    const { getByText, getByTestId } = render(wrapper());
+
+    expect(getByTestId('loading')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(getByText('Google sheets')).toBeInTheDocument();
+    });
+
+    // Check if column headers are present
+    expect(getByText('Sync Status')).toBeInTheDocument();
+    expect(getByText('Failure Reason')).toBeInTheDocument();
+  });
+
+  test('Should display sync status and failure reason values correctly', async () => {
+    const { getByText, getByTestId } = render(wrapper());
+
+    expect(getByTestId('loading')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(getByText('Google sheets')).toBeInTheDocument();
+    });
+
+    // Check if sync status values are displayed
+    await waitFor(() => {
+      expect(getByText('SUCCESS')).toBeInTheDocument();
+      expect(getByText('FAILED')).toBeInTheDocument();
+    });
+
+    // Check if failure reason is displayed
+    await waitFor(() => {
+      expect(getByText('Failed to fetch data from Google Sheets')).toBeInTheDocument();
+    });
   });
 });

src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.tsx

@@ -40,7 +40,37 @@ const getLastSyncedAt = (date: string, fallback: string = '') => (
 );
 
 const getType = (type: SheetTypes) => <div className={styles.LastSyncText}>{textForSheetType[type]}</div>;
-const columnStyles = [styles.Name, styles.LastSync, styles.Type, styles.Actions];
+
+const getSyncStatus = (status: string) => {
+  if (!status) {
+    return <div className={styles.LastSyncText}>N/A</div>;
+  }
+
+  let badgeClass = styles.LastSyncText;
+
+  if (status === 'SUCCESS') {
+    badgeClass = styles.SuccessBadge;
+  } else if (status === 'FAILED') {
+    badgeClass = styles.ErrorBadge;
+  }
+
+  return <div className={badgeClass}>{status}</div>;
+};
+
+const getFailureReason = (error: string) => (
+  <div className={styles.LastSyncText} title={error || ''}>
+    {error || 'N/A'}
+  </div>
+);
+
+const columnStyles = [
+  styles.Name,
+  styles.LastSync,
+  styles.Type,
+  styles.SyncStatus,
+  styles.FailureReason,
+  styles.Actions,
+];
 const sheetIcon = <SheetIcon className={styles.DarkIcon} />;
 
 const queries = {
@@ -52,32 +82,24 @@ const queries = {
 export const SheetIntegrationList = () => {
   const { t } = useTranslation();
 
-  const [warnings, setWarnings] = useState<any>({});
+  const [failureReason, setFailureReason] = useState<string>('');
   const [showdialog, setShowDialog] = useState(false);
 
   let dialog;
 
   if (showdialog) {
-    const warningKeys = Object.keys(warnings);
     dialog = (
       <DialogBox
         open
-        title="Please check the warnings"
+        title="Sync Failed"
         skipCancel
         alignButtons="center"
         buttonOk="Close"
         colorOk="secondary"
         handleOk={() => setShowDialog(false)}
         handleCancel={() => setShowDialog(false)}
       >
-        {warningKeys.map((key, index) => (
-          <div key={key} className={styles.DialogContent}>
-            <strong>
-              {index + 1}. {key}:
-            </strong>{' '}
-            {warnings[key]}
-          </div>
-        ))}
+        <div className={styles.DialogContent}>{failureReason}</div>
       </DialogBox>
     );
   }
@@ -86,15 +108,9 @@ export const SheetIntegrationList = () => {
     fetchPolicy: 'network-only',
     onCompleted: async ({ syncSheet }) => {
       const notificationMessage = 'Data is successfully fetched from the Google sheet.';
-      if (syncSheet.sheet && syncSheet.sheet.warnings) {
-        const sheetWarnings = JSON.parse(syncSheet.sheet.warnings);
-
-        if (Object.keys(sheetWarnings).length) {
-          setShowDialog(true);
-          setWarnings(sheetWarnings);
-        } else {
-          setNotification(notificationMessage);
-        }
+      if (syncSheet.sheet && syncSheet.sheet.failureReason) {
+        setShowDialog(true);
+        setFailureReason(syncSheet.sheet.failureReason);
       } else {
         setNotification(notificationMessage);
       }
@@ -139,16 +155,20 @@ export const SheetIntegrationList = () => {
     return actions;
   };
 
-  const getColumns = ({ label, sheetDataCount, lastSyncedAt, type }: any) => ({
+  const getColumns = ({ label, sheetDataCount, lastSyncedAt, type, syncStatus, failureReason }: any) => ({
     name: getName(label, sheetDataCount, type),
     date: getLastSyncedAt(lastSyncedAt),
     type: getType(type),
+    syncStatus: getSyncStatus(syncStatus),
+    failureReason: getFailureReason(failureReason),
   });
 
   const columnNames = [
     { name: 'label', label: t('Name') },
     { label: t('Last synced') },
     { label: t('Type') },
+    { label: t('Sync Status') },
+    { label: t('Failure Reason') },
     { label: t('Actions') },
   ];
 

src/graphql/mutations/Sheet.ts

@@ -77,7 +77,8 @@ export const SYNC_SHEET = gql`
         updatedAt
         url
         insertedAt
-        warnings
+        syncStatus
+        failureReason
       }
       errors {
         key

src/graphql/queries/Sheet.ts

@@ -33,6 +33,8 @@ export const GET_SHEETS = gql`
       label
       sheetDataCount
       lastSyncedAt
+      syncStatus
+      failureReason
       insertedAt
       updatedAt
     }

src/i18n/en/en.json

@@ -348,6 +348,9 @@
   "API Key": "API Key",
   "Sync": "Sync",
   "Last synced": "Last synced",
+  "Sync Status": "Sync Status",
+  "Failure Reason": "Failure Reason",
+  "Sync Failed": "Sync Failed",
   "Confirm your credentials": "Confirm your credentials",
   "You won't be able to use this sheet.": "You won't be able to use this sheet.",
   "Google sheets": "Google sheets",

src/mocks/Sheet.tsx

@@ -60,6 +60,8 @@ export const getSheetQuery = {
           type: 'READ',
           autoSync: false,
           lastSyncedAt: '2022-10-16T14:54:54Z',
+          syncStatus: 'SUCCESS',
+          failureReason: null,
           updatedAt: '2022-10-16T14:54:55.000000Z',
           url: 'https://glific.test:8080/sheet-integration/add',
         },
@@ -72,6 +74,8 @@ export const getSheetQuery = {
           type: 'READ',
           autoSync: false,
           lastSyncedAt: null,
+          syncStatus: 'FAILED',
+          failureReason: 'Failed to fetch data from Google Sheets',
           updatedAt: '2022-10-16T14:54:55.000000Z',
           url: 'https://glific.test:8080/sheet-integration/add',
         },
@@ -177,7 +181,8 @@ export const syncSheetMutation = {
           lastSyncedAt: '2022-10-14T06:06:23Z',
           updatedAt: '2022-10-14T06:06:23.141322Z',
           url: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQ6L9eu5zCfiCQiULhy_yrw7VYDoMDnb8pNi3E4l226iH865Z8Nv-6XWaZ-CStITlT3EmiCZ_RnHzof/pub?gid=0&single=true&output=csv',
-          warnings: '{}',
+          syncStatus: 'SUCCESS',
+          failureReason: null,
           type: 'READ',
         },
         errors: null,
@@ -186,7 +191,7 @@ export const syncSheetMutation = {
   },
 };
 
-export const syncSheetMutationWithWarnings = {
+export const syncSheetMutationWithFailure = {
   request: {
     query: SYNC_SHEET,
     variables: { id: '2' },
@@ -203,12 +208,14 @@ export const syncSheetMutationWithWarnings = {
           lastSyncedAt: '2022-10-14T06:06:23Z',
           updatedAt: '2022-10-14T06:06:23.141322Z',
           url: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQ6L9eu5zCfiCQiULhy_yrw7VYDoMDnb8pNi3E4l226iH865Z8Nv-6XWaZ-CStITlT3EmiCZ_RnHzof/pub?gid=0&single=true&output=csv',
-          warnings:
-            '{"Warning 1":"This is the first mock warning message","Warning 2":"This is the second mock warning message","Warning 3":"This is the third mock warning message"}',
+          syncStatus: 'FAILED',
+          failureReason: 'Failed to fetch data from Google Sheets. Please check your permissions.',
           type: 'READ',
         },
         errors: null,
       },
     },
   },
 };
+
+export const syncSheetMutationWithWarnings = syncSheetMutationWithFailure;