feat: Added properties disableFindAndReplace,disableCheckBox and disa…

apps/widget/src/components/Common/Container/Container.tsx

@@ -61,6 +61,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
         colorScheme: data.value.colorScheme,
         title: data.value.title,
         texts: deepMerge(WIDGET_TEXTS, data.value.texts),
+        config: data.value.config,
         schema:
           typeof data.value.schema === 'string'
             ? data.value.schema
@@ -330,6 +331,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
           schema={secondaryPayload?.schema}
           title={secondaryPayload?.title}
           texts={secondaryPayload.texts as typeof WIDGET_TEXTS}
+          config={secondaryPayload.config}
           // api
           api={api}
           // impler-context

apps/widget/src/components/Common/Provider/Provider.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { ApiService } from '@api';
-import { WIDGET_TEXTS } from '@impler/client';
+import { WIDGET_TEXTS, WidgetConfig } from '@impler/client';
 import APIContextProvider from '@store/api.context';
 import AppContextProvider from '@store/app.context';
 import { JobsInfoProvider } from '@store/jobinfo.context';
@@ -10,6 +10,7 @@ interface IProviderProps {
   // app-context
   title?: string;
   texts: typeof WIDGET_TEXTS;
+  config?: WidgetConfig;
   primaryColor: string;
   output?: string;
   sampleFile?: File | Blob;
@@ -31,6 +32,7 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
   const {
     api,
     data,
+    config,
     title,
     sampleFile,
     texts,
@@ -61,6 +63,7 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
             data={data}
             title={title}
             sampleFile={sampleFile}
+            config={config}
             texts={texts}
             output={output}
             schema={schema}

apps/widget/src/components/Common/Table/Table.tsx

@@ -171,6 +171,7 @@ interface TableProps {
   onCheckAll?: (checked: boolean) => void;
   onValueChange?: (row: number, prop: string, oldVal: any, newVal: any) => void;
   onRowCheck?: (rowIndex: number, recordIndex: number, checked: boolean) => void;
+  disableCheckBox?: boolean;
 }
 
 export const Table = forwardRef<HotTableClass, TableProps>(
@@ -182,6 +183,7 @@ export const Table = forwardRef<HotTableClass, TableProps>(
       headings,
       columnDefs,
       data,
+      disableCheckBox,
       beforePaste,
       columnDescriptions,
       allChecked,
@@ -191,7 +193,8 @@ export const Table = forwardRef<HotTableClass, TableProps>(
       minSpareRows,
       frozenColumns = 2,
       onValueChange,
-      selectEnabled = true,
+      // Conditionally set selectEnabled based on disableCheckBox
+      selectEnabled = disableCheckBox === undefined ? true : !disableCheckBox,
     }: TableProps,
     gridRef
   ) => {
@@ -244,15 +247,15 @@ export const Table = forwardRef<HotTableClass, TableProps>(
 
           if (!selectEnabled && i < 0) {
             TH.innerHTML = '#';
-          } else if (selectEnabled && i === 0) {
-            TH.classList.add('check-all-cell');
+          } else if (selectEnabled && i === 0 && selectEnabled) {
             TH.innerHTML = `
-              <div class="checkbox">
-                <input type="checkbox" ${allChecked ? 'checked' : ''} class="checkbox__control">
-                <svg class="checkbox__control-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-                  <path fill="currentColor" d="M 20.292969 5.2929688 L 9 16.585938 L 4.7070312 12.292969 L 3.2929688 13.707031 L 9 19.414062 L 21.707031 6.7070312 L 20.292969 5.2929688 z"></path>
-                </svg>
-              </div>`;
+            <div class="checkbox">
+              <input type="checkbox" ${allChecked ? 'checked' : ''} class="checkbox__control">
+              <svg class="checkbox__control-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
+                <path fill="currentColor" d="M 20.292969 5.2929688 L 9 16.585938 L 4.7070312 12.292969 L 3.2929688 13.707031 L 9 19.414062 L 21.707031 6.7070312 L 20.292969 5.2929688 z"></path>
+              </svg>
+            </div>
+          `;
           } else {
             if (columnDescriptions && columnDescriptions[i]) {
               // Create the SVG icon element

apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx

@@ -64,7 +64,7 @@ export function AutoImportPhase3({ onNextClick }: IAutoImportPhase3Props) {
                   <Tabs.List>
                     {autoImportSchedulerFrequency.map((type) => (
                       <Tabs.Tab key={type} value={type}>
-                        {type.charAt(0).toUpperCase() + type.slice(1)}
+                        <Text size="md">{type.charAt(0).toUpperCase() + type.slice(1)}</Text>
                       </Tabs.Tab>
                     ))}
                   </Tabs.List>

apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx

@@ -61,6 +61,8 @@ export function Phase3(props: IPhase3Props) {
     isCompleteImportLoading,
     setShowAllDataValidModal,
     setShowDeleteConfirmModal,
+    disableFindAndReplace,
+    disableCheckBox,
   } = usePhase3({ onNext: onNextClick });
   const tableWrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
   const [tableWrapperDimensions, setTableWrapperDimentions] = useState({
@@ -70,7 +72,6 @@ export function Phase3(props: IPhase3Props) {
   const columnDescriptions = columnDefs.map((column) => column.description || '');
 
   useEffect(() => {
-    //  setting wrapper height
     setTableWrapperDimentions({
       height: tableWrapperRef.current.getBoundingClientRect().height - 50,
       width: tableWrapperRef.current.getBoundingClientRect().width,
@@ -115,7 +116,9 @@ export function Phase3(props: IPhase3Props) {
             ]}
           />
           <Group spacing="xs">
-            <Button onClick={() => setShowFindReplaceModal(true)}>{texts.PHASE3.FIND_REPLACE}</Button>
+            {!disableFindAndReplace && (
+              <Button onClick={() => setShowFindReplaceModal(true)}>{texts.PHASE3.FIND_REPLACE}</Button>
+            )}
             <Button
               color="red"
               disabled={!selectedRowsRef.current.size}
@@ -202,6 +205,7 @@ export function Phase3(props: IPhase3Props) {
           columnDefs={columnDefs}
           allChecked={allChecked}
           columnDescriptions={columnDescriptions}
+          disableCheckBox={disableCheckBox}
         />
       </Stack>
       <Pagination page={page} total={totalPages} onChange={onPageChange} />

apps/widget/src/hooks/Phase3/usePhase3.tsx

@@ -44,7 +44,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     valid: new Set(),
     invalid: new Set(),
   });
-  const { uploadInfo, setUploadInfo } = useAppState();
+  const { uploadInfo, setUploadInfo, config } = useAppState();
   const [allChecked, setAllChecked] = useState<boolean>(false);
   const [reviewData, setReviewData] = useState<IRecordExtended[]>([]);
   const [columnDefs, setColumnDefs] = useState<HotItemSchema[]>([]);
@@ -60,26 +60,36 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     () => api.getColumns(uploadInfo._id),
     {
       onSuccess(data) {
-        let updatedFrozenColumns = 2;
+        let updatedFrozenColumns = 0;
         const dataColumns: IOption[] = [{ value: '', label: 'All columns' }];
         const newColumnDefs: HotItemSchema[] = [];
-        const newHeadings: string[] = ['*', 'Sr. No.'];
-        newColumnDefs.push({
-          type: 'text',
-          data: 'record.index',
-          readOnly: true,
-          editor: false,
-          renderer: 'check',
-          className: 'check-cell',
-          disableVisualSelection: true,
-        });
-        newColumnDefs.push({
-          type: 'text',
-          data: 'index',
-          readOnly: true,
-          className: 'index-cell',
-          disableVisualSelection: true,
-        });
+        const newHeadings: string[] = [];
+
+        if (!config?.disableCheckBox) {
+          newHeadings.push('*');
+          updatedFrozenColumns++;
+          newColumnDefs.push({
+            type: 'text',
+            data: 'record.index',
+            readOnly: true,
+            editor: false,
+            renderer: 'check',
+            className: 'check-cell',
+            disableVisualSelection: true,
+          });
+        }
+
+        if (!config?.disableSrNo) {
+          newHeadings.push('Sr. No.');
+          updatedFrozenColumns++;
+          newColumnDefs.push({
+            type: 'text',
+            data: 'index',
+            readOnly: true,
+            className: 'index-cell',
+            disableVisualSelection: true,
+          });
+        }
         data.forEach((column: ISchemaColumn) => {
           if (column.isFrozen) updatedFrozenColumns++;
           newHeadings.push(column.name);
@@ -294,5 +304,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     totalRecords: uploadInfo.totalRecords ?? undefined,
     invalidRecords: uploadInfo.invalidRecords ?? undefined,
     refetchReviewData: () => refetchReviewData([page, type]),
+    disableFindAndReplace: config?.disableFindAndReplace,
+    disableCheckBox: config?.disableCheckBox,
   };
 }

apps/widget/src/store/app.context.tsx

@@ -29,6 +29,7 @@ const AppContextProvider = ({
   primaryColor,
   title,
   texts,
+  config,
   data,
   sampleFile,
   schema,
@@ -55,6 +56,7 @@ const AppContextProvider = ({
       value={{
         title,
         texts,
+        config,
         host,
         reset,
         data,

apps/widget/src/types/store.types.ts

@@ -1,6 +1,6 @@
 import { ApiService } from '@api';
 import { Dispatch, SetStateAction } from 'react';
-import { IUpload, WIDGET_TEXTS } from '@impler/client';
+import { IUpload, WIDGET_TEXTS, WidgetConfig } from '@impler/client';
 import { ITemplate, IImportConfig } from '@impler/shared';
 
 export interface IImplerStore {
@@ -29,6 +29,7 @@ export enum FlowsEnum {
 export interface IAppStore {
   title?: string;
   texts: typeof WIDGET_TEXTS;
+  config?: WidgetConfig;
   importId?: string;
   imageSchema?: string;
   data?: string;

libs/shared/src/types/widget/widget.types.ts

@@ -1,4 +1,4 @@
-import { WIDGET_TEXTS } from '@impler/client';
+import { WIDGET_TEXTS, WidgetConfig } from '@impler/client';
 import { ISchemaItem } from '../column';
 
 export interface ICommonShowPayload {
@@ -16,13 +16,15 @@ export interface ICommonShowPayload {
 }
 export interface IWidgetShowPayload extends ICommonShowPayload {
   texts?: typeof WIDGET_TEXTS;
+  config?: WidgetConfig;
   data?: string;
   schema?: string;
   output?: string;
 }
 
 export interface IUserShowPayload extends ICommonShowPayload {
   texts?: string | typeof WIDGET_TEXTS;
+  config?: WidgetConfig;
   data?: string | Record<string, string | number>[];
   schema?: string | ISchemaItem[];
   output?: string | Record<string, string | number>;

packages/client/src/types.ts

@@ -165,6 +165,7 @@ export interface IShowWidgetProps {
   accessToken: string;
   sampleFile?: File | Blob;
   texts?: CustomTexts;
+  config?: WidgetConfig;
   title?: string;
   primaryColor?: string;
   extra?: string | Record<string, any>;
@@ -179,6 +180,12 @@ export type DeepPartial<T> = T extends object
 
 export type ValueOf<T> = T[keyof T];
 
+export declare type WidgetConfig = {
+  disableFindAndReplace?: boolean;
+  disableCheckBox?: boolean;
+  disableSrNo?: boolean;
+};
+
 export type CustomTexts = DeepPartial<typeof WIDGET_TEXTS>;
 
 export interface IUseImplerProps {
@@ -189,6 +196,7 @@ export interface IUseImplerProps {
   accessToken?: string;
   primaryColor?: string;
   extra?: string | Record<string, any>;
+  config?: WidgetConfig;
   authHeaderValue?: string | (() => string) | (() => Promise<string>);
   onUploadStart?: (value: UploadTemplateData) => void;
   onUploadTerminate?: (value: UploadData) => void;

packages/react/src/hooks/useImpler.ts

@@ -10,6 +10,7 @@ export function useImpler({
   title,
   texts,
   extra,
+  config,
   onUploadComplete,
   onWidgetClose,
   onUploadStart,
@@ -96,6 +97,7 @@ export function useImpler({
         output,
         title,
         extra,
+        config,
         colorScheme,
         primaryColor,
       };