Add Enums for document status and file type

Author: roshni73

src/views/ContentManagement/ContentActions/index.tsx

@@ -57,10 +57,10 @@ const RETRIGGER_CONTENT = gql`
 `;
 
 interface ContentActionsProps {
-    contentId: number;
+    id: number;
 }
 
-function ContentActions({ contentId }: ContentActionsProps) {
+function ContentActions({ id }: ContentActionsProps) {
     const alert = useAlert();
     const [showEditContentModal, {
         setTrue: setShowEditContentModalTrue,
@@ -121,26 +121,24 @@ function ContentActions({ contentId }: ContentActionsProps) {
             },
         },
     );
-
     const handleArchiveContent = useCallback(() => {
         triggerArchiveContent({
             variables: {
                 input: {
-                    content: contentId,
+                    content: id,
                 } as unknown as ArchiveContentInput,
             },
         });
-    }, [triggerArchiveContent, contentId]);
-
+    }, [triggerArchiveContent, id]);
     const handleRetriggerContent = useCallback(() => {
         retriggerContent({
             variables: {
                 input: {
-                    content: contentId,
+                    content: id,
                 } as unknown as RetriggerContentInput,
             },
         });
-    }, [retriggerContent, contentId]);
+    }, [retriggerContent, id]);
 
     return (
         <div className={styles.contentActions}>
@@ -171,7 +169,7 @@ function ContentActions({ contentId }: ContentActionsProps) {
             {showEditContentModal && (
                 <EditContentModal
                     onClose={setShowEditContentModalFalse}
-                    contentId={contentId}
+                    id={id}
                 />
             )}
         </div>

src/views/ContentManagement/EditContent/index.tsx

@@ -6,7 +6,9 @@ import {
 import {
     createSubmitHandler,
     getErrorObject,
+    nonFieldError,
     ObjectSchema,
+    removeNull,
     requiredStringCondition,
     useForm,
 } from '@togglecorp/toggle-form';
@@ -22,6 +24,7 @@ import {
     UpdateContentTitleMutationVariables,
 } from '#generated/types/graphql';
 import useAlert from '#hooks/useAlert';
+import { transformToFormError } from '#utils/errorTransform';
 
 import styles from './styles.module.css';
 
@@ -53,14 +56,14 @@ const defaultFormValues: PartialFormType = {};
 
 interface Props {
     onClose: () => void;
-    contentId: number;
+    id: number;
 }
 
 function EditContentModal(props: Props) {
     const alert = useAlert();
     const {
         onClose,
-        contentId,
+        id,
     } = props;
 
     const {
@@ -78,27 +81,31 @@ function EditContentModal(props: Props) {
     ] = useMutation<UpdateContentTitleMutation, UpdateContentTitleMutationVariables>(
         UPDATE_CONTENT,
         {
-            onCompleted: (projectResponse) => {
-                const response = projectResponse?.private?.updateContentTitle;
-                if (!response) {
-                    return;
-                }
-                if (response.ok) {
+            onCompleted: (response) => {
+                const { private: privateRes } = response;
+                if (!privateRes) return;
+                const { updateContentTitle: updateContentRes } = privateRes;
+                if (!updateContentRes) return;
+                const { errors, ok } = updateContentRes;
+
+                if (errors) {
+                    const formErrors = transformToFormError(removeNull(errors));
+                    setError(formErrors);
+                    const errorMessages = errors
+                        ?.map((message: { messages: string; }) => message.messages)
+                        .filter((msg: string) => msg)
+                        .join(', ');
+                    alert.show(errorMessages);
+                } else if (ok) {
+                    onClose();
                     alert.show(
                         'Updated Successfully',
-                        {
-                            variant: 'success',
-                        },
+                        { variant: 'success' },
                     );
-                } else {
-                    const errorMessages = response?.errors
-                        ?.map((error: { messages: string; }) => error.messages)
-                        .filter((message: string) => message)
-                        .join(', ');
-                    alert.show(errorMessages, { variant: 'danger' });
                 }
             },
-            onError: () => {
+            onError: (error) => {
+                setError({ [nonFieldError]: error.message });
                 alert.show(
                     'Failed to Update',
                     { variant: 'danger' },
@@ -112,11 +119,11 @@ function EditContentModal(props: Props) {
             variables: {
                 input: {
                     ...finalValue,
-                    content: contentId,
+                    content: id,
                 } as unknown as UpdateContentTitleInput,
             },
         });
-    }, [updateContentTrigger, contentId]);
+    }, [updateContentTrigger, id]);
 
     const handleSubmit = useCallback(() => {
         createSubmitHandler(validate, setError, handleUpdateContentSubmit)();

src/views/ContentManagement/index.tsx

@@ -1,13 +1,11 @@
-import {
-    useMemo,
-    useState,
-} from 'react';
+import { useMemo } from 'react';
 import {
     gql,
     useQuery,
 } from '@apollo/client';
 import {
     Button,
+    Chip,
     createDateColumn,
     createStringColumn,
     Pager,
@@ -17,9 +15,12 @@ import {
 import Container from '#components/Container';
 import { createElementColumn } from '#components/CreateElementColumn';
 import {
+    ContentEnumsQuery,
+    ContentEnumsQueryVariables,
     ContentListQuery,
     ContentListQueryVariables,
 } from '#generated/types/graphql';
+import useFilterState from '#hooks/useFilterState';
 
 import ContentActions from './ContentActions';
 
@@ -29,14 +30,14 @@ type ContentListTable = NonNullable<NonNullable<NonNullable<ContentListQuery['pr
 
 const contentKeySelector = (option: ContentListTable) => option.id;
 
-const PAGE_SIZE = 5;
+const PAGE_SIZE = 2;
 
 const CREATE_CONTENT_QUERY = gql`
     query ContentList(
-        $input: OffsetPaginationInput
+        $pagination: OffsetPaginationInput,
     ) {
         private {
-            contents(pagination: $input) {
+            contents(pagination: $pagination) {
                 count
                 items {
                     createdAt
@@ -53,31 +54,61 @@ const CREATE_CONTENT_QUERY = gql`
     }
 `;
 
+const CONTENT_ENUMS = gql`
+    query ContentEnums {
+        enums {
+            ContentDocumentStatus {
+                key
+                label
+            }
+            ContentDocumentType {
+                key
+                label
+            }
+        }
+    }
+`;
+
+const statusVariant: Record<string, string> = {
+    Pending: 'default',
+    'Text extracted': 'default',
+    'Added to vector': 'success',
+    'Deleted from vector': 'warning',
+    Failure: 'danger',
+};
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
-    const [page, setPage] = useState<number>(1);
+    const {
+        page,
+        setPage,
+    } = useFilterState<{
+        createdAtGte?: string;
+        createdAtLte?: string;
+        documentType?: string;
+        documentStatus?: string ;
+    }>({
+        pageSize: PAGE_SIZE,
+        filter: {},
+    });
+
     const {
         data: contentResult,
     } = useQuery<ContentListQuery, ContentListQueryVariables>(
         CREATE_CONTENT_QUERY,
-        {
-            variables: {
-                input: {
-                    limit: PAGE_SIZE,
-                    offset: page,
-                },
-            },
-        },
     );
 
-    const columns = useMemo(() => ([
-        createStringColumn<ContentListTable, string>(
-            'sn',
-            'S.N',
-            (item) => (item.id),
-        ),
+    const {
+        data: contentEnumsResponse,
+    } = useQuery<ContentEnumsQuery, ContentEnumsQueryVariables>(
+        CONTENT_ENUMS,
+    );
+
+    const documentType = contentEnumsResponse?.enums.ContentDocumentType;
+
+    const documentStatus = contentEnumsResponse?.enums.ContentDocumentStatus;
 
+    const columns = useMemo(() => ([
         createStringColumn<ContentListTable, string>(
             'title',
             'Title',
@@ -93,30 +124,50 @@ export function Component() {
         createStringColumn<ContentListTable, string>(
             'documentTypeDisplay',
             'File Type',
-            (item) => item.documentType,
+            (item) => documentType?.find(
+                (type) => type.key === item.documentType,
+            )?.label,
         ),
         createStringColumn<ContentListTable, string>(
             'tag',
             'Tag',
             (item) => item.tag.map((tag: { name: string; }) => tag.name).join(','),
             { columnClassName: styles.actions },
         ),
-        createStringColumn<ContentListTable, string>(
+        createElementColumn<ContentListTable, string,
+        { status: string | undefined; variant: string }>(
             'documentStatusDisplay',
             'Status',
-            (item) => item.documentStatus,
+            ({ status }) => (
+                <Chip
+                    className={styles.status}
+                    label={status}
+                />
+            ),
+            (_key, item) => {
+                const statusLabel = documentStatus?.find(
+                    (status) => status.key === item.documentStatus,
+                )?.label;
+                const variant = statusLabel ? statusVariant[statusLabel] : '';
+                return {
+                    status: statusLabel,
+                    variant,
+                };
+            },
             { columnClassName: styles.actions },
         ),
-        createElementColumn<ContentListTable, string, { contentId: number }>(
+        createElementColumn<ContentListTable, string, { id: number }>(
             'actions',
             'Actions',
             ContentActions,
             (_key, datum) => ({
-                contentId: Number(datum.id),
+                id: Number(datum.id),
             }),
             { columnClassName: styles.actions },
         ),
-    ]), []);
+    ]), [documentType, documentStatus]);
+
+    const data = contentResult?.private.contents;
 
     return (
         <Container
@@ -138,7 +189,7 @@ export function Component() {
                     infoHidden
                     itemsPerPageControlHidden
                     activePage={page}
-                    itemsCount={contentResult?.private.contents.count ?? 0}
+                    itemsCount={data?.count ?? 0}
                     maxItemsPerPage={PAGE_SIZE}
                     onActivePageChange={setPage}
                 />
@@ -148,7 +199,7 @@ export function Component() {
                 className={styles.table}
                 headerCellClassName={styles.headerCell}
                 headerRowClassName={styles.headerRow}
-                data={contentResult?.private.contents.items}
+                data={data?.items}
                 columns={columns}
                 keySelector={contentKeySelector}
             />

src/views/ContentManagement/styles.module.css

@@ -15,5 +15,10 @@
         .actions{
             min-width:14rem;
         }
+        .status{
+            background-color:  var(--cms-ui-color-background);
+            color: var(--cms-ui-primary-text-color);
+            font-weight: var(--cms-ui-font-weight-medium);
+        }
     }
 }