From 92e3ef3d6412016f89d9b0a9f89012a50ea1a871 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:35:28 +0530 Subject: [PATCH 01/52] feat: Added description in these files --- apps/api/src/app/column/commands/add-column.command.ts | 4 ++++ apps/api/src/app/column/commands/update-column.command.ts | 4 ++++ apps/api/src/app/column/dtos/column-request.dto.ts | 7 +++++++ apps/api/src/app/column/dtos/column-response.dto.ts | 5 +++++ apps/api/src/app/shared/types/file.types.ts | 1 + apps/web/hooks/useSchema.tsx | 1 + apps/widget/src/hooks/Phase3/usePhase3.tsx | 3 +++ apps/widget/src/types/utility.types.ts | 1 + libs/dal/src/repositories/column/column.entity.ts | 2 ++ libs/dal/src/repositories/column/column.schema.ts | 1 + libs/shared/src/entities/Column/Column.interface.ts | 1 + libs/shared/src/types/column/column.types.ts | 1 + 12 files changed, 31 insertions(+) diff --git a/apps/api/src/app/column/commands/add-column.command.ts b/apps/api/src/app/column/commands/add-column.command.ts index 71a1b84c1..6cc3e75b2 100644 --- a/apps/api/src/app/column/commands/add-column.command.ts +++ b/apps/api/src/app/column/commands/add-column.command.ts @@ -13,6 +13,10 @@ export class AddColumnCommand extends BaseCommand { @IsDefined() key: string; + @IsString() + @IsOptional() + description?: string; + @IsArray() @IsOptional() @Type(() => Array) diff --git a/apps/api/src/app/column/commands/update-column.command.ts b/apps/api/src/app/column/commands/update-column.command.ts index bf669bf1c..9b7ef2f5d 100644 --- a/apps/api/src/app/column/commands/update-column.command.ts +++ b/apps/api/src/app/column/commands/update-column.command.ts @@ -13,6 +13,10 @@ export class UpdateColumnCommand extends BaseCommand { @IsDefined() key: string; + @IsString() + @IsOptional() + description?: string; + @IsArray() @IsOptional() @Type(() => Array) diff --git a/apps/api/src/app/column/dtos/column-request.dto.ts b/apps/api/src/app/column/dtos/column-request.dto.ts index c462e0d8e..858ad6336 100644 --- a/apps/api/src/app/column/dtos/column-request.dto.ts +++ b/apps/api/src/app/column/dtos/column-request.dto.ts @@ -29,6 +29,13 @@ export class ColumnRequestDto { @IsString() key: string; + @ApiProperty({ + description: 'Description of the column', + }) + @IsOptional() + @IsString() + description?: string; + @ApiProperty({ description: 'Alternative possible keys of the column', type: Array, diff --git a/apps/api/src/app/column/dtos/column-response.dto.ts b/apps/api/src/app/column/dtos/column-response.dto.ts index 2c8bd0612..6400e59f7 100644 --- a/apps/api/src/app/column/dtos/column-response.dto.ts +++ b/apps/api/src/app/column/dtos/column-response.dto.ts @@ -13,6 +13,11 @@ export class ColumnResponseDto { }) key: string; + @ApiProperty({ + description: 'Description of the column', + }) + description?: string; + @ApiProperty({ description: 'Alternative possible keys of the column', type: Array, diff --git a/apps/api/src/app/shared/types/file.types.ts b/apps/api/src/app/shared/types/file.types.ts index 710448720..59f780186 100644 --- a/apps/api/src/app/shared/types/file.types.ts +++ b/apps/api/src/app/shared/types/file.types.ts @@ -2,6 +2,7 @@ import { ColumnTypesEnum } from '@impler/shared'; export interface IExcelFileHeading { key: string; + description?: string; isRequired?: boolean; isFrozen?: boolean; delimiter?: string; diff --git a/apps/web/hooks/useSchema.tsx b/apps/web/hooks/useSchema.tsx index 9376d9818..dd58789c2 100644 --- a/apps/web/hooks/useSchema.tsx +++ b/apps/web/hooks/useSchema.tsx @@ -61,6 +61,7 @@ export function useSchema({ templateId }: UseSchemaProps) { reset({ name: undefined, key: undefined, + description: undefined, type: 'String', alternateKeys: [], isRequired: false, diff --git a/apps/widget/src/hooks/Phase3/usePhase3.tsx b/apps/widget/src/hooks/Phase3/usePhase3.tsx index 3d80f2b6a..60e5ca411 100644 --- a/apps/widget/src/hooks/Phase3/usePhase3.tsx +++ b/apps/widget/src/hooks/Phase3/usePhase3.tsx @@ -77,12 +77,15 @@ export function usePhase3({ onNext }: IUsePhase3Props) { data.forEach((column: ISchemaColumn) => { if (column.isFrozen) updatedFrozenColumns++; newHeadings.push(column.name); + const columnItem: HotItemSchema = { className: 'htCenter', data: `record.${column.key}`, allowEmpty: !column.isRequired, allowDuplicate: !column.isUnique, + description: column.description, }; + switch (column.type) { case ColumnTypesEnum.STRING: case ColumnTypesEnum.EMAIL: diff --git a/apps/widget/src/types/utility.types.ts b/apps/widget/src/types/utility.types.ts index 4d76e37c0..305d2b9b9 100644 --- a/apps/widget/src/types/utility.types.ts +++ b/apps/widget/src/types/utility.types.ts @@ -17,6 +17,7 @@ export type HotItemSchema = { allowEmpty?: boolean; allowInvalid?: boolean; disableVisualSelection?: boolean; + description?: string; renderer?: | 'custom' | 'check' diff --git a/libs/dal/src/repositories/column/column.entity.ts b/libs/dal/src/repositories/column/column.entity.ts index 4fb92c9b6..1a000c441 100644 --- a/libs/dal/src/repositories/column/column.entity.ts +++ b/libs/dal/src/repositories/column/column.entity.ts @@ -5,6 +5,8 @@ export class ColumnEntity { key: string; + description?: string; + alternateKeys?: string[]; isRequired?: boolean; diff --git a/libs/dal/src/repositories/column/column.schema.ts b/libs/dal/src/repositories/column/column.schema.ts index db0eeb2cf..473b02787 100644 --- a/libs/dal/src/repositories/column/column.schema.ts +++ b/libs/dal/src/repositories/column/column.schema.ts @@ -9,6 +9,7 @@ const columnSchema = new Schema( alternateKeys: [String], isRequired: Boolean, isUnique: Boolean, + description: String, isFrozen: Boolean, regex: String, allowMultiSelect: Boolean, diff --git a/libs/shared/src/entities/Column/Column.interface.ts b/libs/shared/src/entities/Column/Column.interface.ts index 785e64fb8..fa6d7be72 100644 --- a/libs/shared/src/entities/Column/Column.interface.ts +++ b/libs/shared/src/entities/Column/Column.interface.ts @@ -2,6 +2,7 @@ export interface IColumn { _id: string; name: string; key: string; + description?: string; type: string; alternateKeys?: string[]; isRequired?: boolean; diff --git a/libs/shared/src/types/column/column.types.ts b/libs/shared/src/types/column/column.types.ts index 1283a9dad..8438f02d9 100644 --- a/libs/shared/src/types/column/column.types.ts +++ b/libs/shared/src/types/column/column.types.ts @@ -18,6 +18,7 @@ export enum ColumnDelimiterEnum { export interface ISchemaItem { key: string; name: string; + description?: string; alternateKeys?: string[]; isRequired?: boolean; isUnique?: boolean; From 307ab0324e86048f1937fb5aaa378162b6432e05 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:36:09 +0530 Subject: [PATCH 02/52] feat: Added description in the sample sales data --- .../usecases/create-project/create-project.usecase.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/api/src/app/project/usecases/create-project/create-project.usecase.ts b/apps/api/src/app/project/usecases/create-project/create-project.usecase.ts index 1541d7547..e59e41a1c 100644 --- a/apps/api/src/app/project/usecases/create-project/create-project.usecase.ts +++ b/apps/api/src/app/project/usecases/create-project/create-project.usecase.ts @@ -45,6 +45,7 @@ export class CreateProject { _templateId: template._id, name: 'Date', key: 'Date *', + description: 'The date when the transaction took place. Format: DD/MM/YYYY', isFrozen: true, type: ColumnTypesEnum.DATE, isRequired: true, @@ -55,6 +56,7 @@ export class CreateProject { _templateId: template._id, name: 'Product Name/ID', key: 'Product Name/ID *', + description: 'The name or ID of the product purchased, e.g., "Apple" or "12345"', type: ColumnTypesEnum.STRING, isRequired: true, isUnique: false, @@ -63,6 +65,7 @@ export class CreateProject { _templateId: template._id, name: 'Quantity', key: 'Quantity *', + description: 'The amount of the product purchased. For example, "3" apples or "2" bottles of milk', type: ColumnTypesEnum.NUMBER, isRequired: true, isUnique: false, @@ -71,6 +74,7 @@ export class CreateProject { _templateId: template._id, name: 'Total Price', key: 'Total Price', + description: 'The total cost of the products purchased in this transaction. For example, "$10.50"', type: ColumnTypesEnum.NUMBER, isRequired: false, isUnique: false, @@ -79,6 +83,7 @@ export class CreateProject { _templateId: template._id, name: 'Customer Name/ID', key: 'Customer Name/ID *', + description: 'The name or ID of the customer making the purchase, e.g., "John Doe" or "7890"', type: ColumnTypesEnum.STRING, isRequired: true, isUnique: false, @@ -87,6 +92,7 @@ export class CreateProject { _templateId: template._id, name: 'Payment Method', key: 'Payment Method *', + description: 'The method used for payment. Options include credit card, cash, or check', type: ColumnTypesEnum.SELECT, selectValues: ['credit card', 'cash', 'check'], isRequired: true, @@ -96,6 +102,7 @@ export class CreateProject { _templateId: template._id, name: 'Transaction ID', key: 'Transaction ID * (unique)', + description: 'A unique identifier for the transaction. For example, "TX12345678"', type: ColumnTypesEnum.STRING, isRequired: true, isUnique: true, @@ -104,6 +111,7 @@ export class CreateProject { _templateId: template._id, name: 'Salesperson Name/ID', key: 'Salesperson Name/ID', + description: 'The name or ID of the salesperson handling the transaction, e.g., "Jane Smith" or "3456"', type: ColumnTypesEnum.STRING, isRequired: false, isUnique: false, @@ -112,6 +120,8 @@ export class CreateProject { _templateId: template._id, name: 'Notes/Comments', key: 'Notes/Comments', + description: + 'Additional comments or notes about the transaction. For example, "Discount applied" or "Gift wrap requested"', type: ColumnTypesEnum.STRING, isRequired: false, isUnique: false, From 9dc5fd2c84c3a8e079d1b5018fc9c10cd7499cec Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:36:57 +0530 Subject: [PATCH 03/52] feat: Added description to have fetch the description also from the schema --- .../usecases/make-upload-entry/make-upload-entry.usecase.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/api/src/app/upload/usecases/make-upload-entry/make-upload-entry.usecase.ts b/apps/api/src/app/upload/usecases/make-upload-entry/make-upload-entry.usecase.ts index 83e71e561..d2ee732ad 100644 --- a/apps/api/src/app/upload/usecases/make-upload-entry/make-upload-entry.usecase.ts +++ b/apps/api/src/app/upload/usecases/make-upload-entry/make-upload-entry.usecase.ts @@ -74,7 +74,7 @@ export class MakeUploadEntry { _templateId: templateId, }, // eslint-disable-next-line max-len - 'name key isRequired isUnique isFrozen selectValues dateFormats defaultValue type regex sequence allowMultiSelect alternateKeys delimiter', + 'name key isRequired isUnique isFrozen selectValues dateFormats defaultValue type regex sequence allowMultiSelect alternateKeys delimiter description', { sort: 'sequence', } @@ -103,6 +103,7 @@ export class MakeUploadEntry { isUnique: schemaItem.isUnique || false, defaultValue: schemaItem.defaultValue, allowMultiSelect: schemaItem.allowMultiSelect, + description: schemaItem.description, alternateKeys: Array.isArray(schemaItem.alternateKeys) ? schemaItem.alternateKeys : [], sequence: Object.keys(formattedColumns).length, From 2f381c4e3c4f9ae568c7b0740a3f46c31e2abd8d Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:38:23 +0530 Subject: [PATCH 04/52] feat: Modified getExcelFileForHeadings to have the column description on the excel file --- .../app/shared/services/file/file.service.ts | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/apps/api/src/app/shared/services/file/file.service.ts b/apps/api/src/app/shared/services/file/file.service.ts index 60fe805b3..c353b969e 100644 --- a/apps/api/src/app/shared/services/file/file.service.ts +++ b/apps/api/src/app/shared/services/file/file.service.ts @@ -104,48 +104,56 @@ export class ExcelFileService { headings.forEach((heading, index) => { const columnName = this.getExcelColumnNameFromIndex(index + 1); const columnHeadingCellName = columnName + '1'; - if (heading.type === ColumnTypesEnum.SELECT && heading.allowMultiSelect) + const columnDescriptionCellName = columnName + '2'; + + // Set header + if (heading.type === ColumnTypesEnum.SELECT && heading.allowMultiSelect) { worksheet .cell(columnHeadingCellName) .value(heading.key + '#MULTI' + '#' + (heading.delimiter || ColumnDelimiterEnum.COMMA)); - else worksheet.cell(columnHeadingCellName).value(heading.key); + } else { + worksheet.cell(columnHeadingCellName).value(heading.key); + } + + // Set description + worksheet.cell(columnDescriptionCellName).value(heading.description || 'Description not provided'); worksheet.column(columnName).style('numberFormat', '@'); }); const frozenColumns = headings.filter((heading) => heading.isFrozen).length; - if (frozenColumns) worksheet.freezePanes(frozenColumns, 1); // freeze panes (freeze first n column and first row) - else worksheet.freezePanes(0, 1); // freeze 0 column and first row + if (frozenColumns) + worksheet.freezePanes(frozenColumns, 2); // freeze panes (freeze first n column and first two rows) + else worksheet.freezePanes(0, 2); // freeze 0 column and first two rows headings.forEach((heading, index) => { if (heading.type === ColumnTypesEnum.SELECT) { const keyName = this.addSelectSheet(workbook, heading); const columnName = this.getExcelColumnNameFromIndex(index + 1); - worksheet.range(`${columnName}2:${columnName}9999`).dataValidation({ + worksheet.range(`${columnName}3:${columnName}9999`).dataValidation({ type: 'list', allowBlank: !heading.isRequired, formula1: `${keyName}!$A$2:$A$9999`, - ...(!heading.allowMultiSelect - ? { - showErrorMessage: true, - error: 'Please select from the list', - errorTitle: 'Invalid Value', - } - : {}), + showErrorMessage: !heading.allowMultiSelect, + error: 'Please select from the list', + errorTitle: 'Invalid Value', }); } }); + const headingNames = headings.map((heading) => heading.key); - const endColumnPosition = this.getExcelColumnNameFromIndex(headings.length + 1); + const endColumnPosition = this.getExcelColumnNameFromIndex(headings.length); + if (Array.isArray(data) && data.length > 0) { const rows: string[][] = data.reduce((acc: string[][], rowItem: Record) => { acc.push(headingNames.map((headingKey) => rowItem[headingKey])); return acc; }, []); - const rangeKey = `A2:${endColumnPosition}${rows.length + 1}`; - const range = workbook.sheet(0).range(rangeKey); + const rangeKey = `A3:${endColumnPosition}${rows.length + 2}`; + const range = worksheet.range(rangeKey); range.value(rows); } + const buffer = await workbook.outputAsync(); return buffer as Promise; From 4b085e67ba15431ca522b6e1e055e48350a9c8be Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:39:07 +0530 Subject: [PATCH 05/52] feat: Added description to fetch descrption also from the records --- .../usecases/download-sample/download-sample.usecase.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/api/src/app/template/usecases/download-sample/download-sample.usecase.ts b/apps/api/src/app/template/usecases/download-sample/download-sample.usecase.ts index 617a66e82..9c3d5984b 100644 --- a/apps/api/src/app/template/usecases/download-sample/download-sample.usecase.ts +++ b/apps/api/src/app/template/usecases/download-sample/download-sample.usecase.ts @@ -37,7 +37,7 @@ export class DownloadSample { { _templateId, }, - 'key type selectValues isRequired allowMultiSelect' + 'key description type selectValues isRequired allowMultiSelect' ); let parsedSchema: ISchemaItem[], columnKeys: IExcelFileHeading[]; @@ -55,6 +55,7 @@ export class DownloadSample { selectValues: imageSchema?.[columnItem.key] || columnItem.selectValues || [], isRequired: columnItem.isRequired, allowMultiSelect: columnItem.allowMultiSelect, + description: columnItem.description, })); } else { // else create structure from existing defualt schema @@ -64,6 +65,7 @@ export class DownloadSample { selectValues: imageSchema?.[columnItem.key] || columnItem.selectValues || [], isRequired: columnItem.isRequired, allowMultiSelect: columnItem.allowMultiSelect, + description: columnItem.description, })); } const hasMultiSelect = columnKeys.some( From 7b91fcaa37b18eeaeb4a48f57e0dcd4d5c3ba10e Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:41:16 +0530 Subject: [PATCH 06/52] feat: Added tippy js to have the tooltip on column header --- .../src/components/Common/Table/Table.tsx | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx index 322786d0f..2729a8363 100644 --- a/apps/widget/src/components/Common/Table/Table.tsx +++ b/apps/widget/src/components/Common/Table/Table.tsx @@ -2,6 +2,7 @@ import { forwardRef } from 'react'; import { HotTable } from '@handsontable/react'; import 'cooltipz-css/cooltipz.min.css'; +import 'tippy.js/dist/tippy.css'; import { TextCellType, DateCellType, @@ -41,6 +42,7 @@ registerValidator(dateValidator); import 'handsontable/dist/handsontable.full.min.css'; import './HandsonTable.styles.min.css'; +import { addTippyToElement } from '@util'; interface TableProps { headings: string[]; @@ -50,6 +52,8 @@ interface TableProps { width?: string | number; afterRender?: () => void; data: Record[]; + columnDescriptions?: string[]; + primaryColor?: string; columnDefs: HotItemSchema[]; onCheckAll?: (checked: boolean) => void; onValueChange?: (row: number, prop: string, oldVal: any, newVal: any) => void; @@ -163,6 +167,8 @@ export const Table = forwardRef( headings, columnDefs, data, + columnDescriptions, + primaryColor, allChecked, onRowCheck, onCheckAll, @@ -204,12 +210,20 @@ export const Table = forwardRef( if (changes[i] && changes[i]?.[3] === null) changes[i]![3] = undefined; } }} - afterGetColHeader={function (i, TH) { + afterGetColHeader={(i, TH) => { if (i === 0) { TH.classList.add('check-all-cell'); - TH.innerHTML = `
`; + TH.innerHTML = ` +
+ + + + +
`; + } else { + if (columnDescriptions && columnDescriptions[i]) { + addTippyToElement(TH as HTMLElement, columnDescriptions[i], primaryColor as string); + } } }} renderAllColumns From e16c59d01e326cd69ccf430d816fdf96df8eec55 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:41:56 +0530 Subject: [PATCH 07/52] feat: Passed columnDescriptions and primaryColor as props --- apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx index 23082ac90..ffc6d968a 100644 --- a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx +++ b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx @@ -17,6 +17,7 @@ import { Pagination } from '@ui/Pagination'; import { LoadingOverlay } from '@ui/LoadingOverlay'; import { SegmentedControl } from '@ui/SegmentedControl'; import { ConfirmModal } from 'components/widget/modals/ConfirmModal'; +import { useAppState } from '@store/app.context'; interface IPhase3Props { onNextClick: (uploadData: IUpload, importedData?: Record[]) => void; @@ -61,6 +62,8 @@ export function Phase3(props: IPhase3Props) { height: 200, width: 500, }); + const { primaryColor } = useAppState(); + const columnDescriptions = columnDefs.map((column) => column.description || ''); useEffect(() => { // setting wrapper height @@ -172,6 +175,8 @@ export function Phase3(props: IPhase3Props) { headings={headings} columnDefs={columnDefs} allChecked={allChecked} + columnDescriptions={columnDescriptions} + primaryColor={primaryColor} /> From fd5f6e3b9256cae31478b90ef4fb0a17d4712682 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:42:28 +0530 Subject: [PATCH 08/52] feat: Added description while creating the column --- apps/api/src/app/template/template.controller.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/api/src/app/template/template.controller.ts b/apps/api/src/app/template/template.controller.ts index 5b9cbde4c..9647068b3 100644 --- a/apps/api/src/app/template/template.controller.ts +++ b/apps/api/src/app/template/template.controller.ts @@ -210,6 +210,7 @@ export class TemplateController { isUnique: columnData.isUnique, isFrozen: columnData.isFrozen, name: columnData.name, + description: columnData.description, regex: columnData.regex, regexDescription: columnData.regexDescription, selectValues: columnData.selectValues, From 7bea0b2b421a277081e6a92a701b6c9c6ed8b45b Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:43:05 +0530 Subject: [PATCH 09/52] feat: Package.json file and added dependency tippy.js --- apps/widget/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/widget/package.json b/apps/widget/package.json index 8bba12322..a45058b45 100644 --- a/apps/widget/package.json +++ b/apps/widget/package.json @@ -65,6 +65,7 @@ "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "rimraf": "^3.0.2", + "tippy.js": "^6.3.7", "web-vitals": "^3.0.4", "webfontloader": "^1.6.28", "webpack-dev-server": "^4.11.1" From b9cb06b0739c2d6cd2a73bba7d8129af3b4d01ec Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:43:47 +0530 Subject: [PATCH 10/52] feat: Added description --- .../usecases/save-sample-file/save-sample-file.usecase.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/api/src/app/shared/usecases/save-sample-file/save-sample-file.usecase.ts b/apps/api/src/app/shared/usecases/save-sample-file/save-sample-file.usecase.ts index 920d5bf7a..16f7d6fad 100644 --- a/apps/api/src/app/shared/usecases/save-sample-file/save-sample-file.usecase.ts +++ b/apps/api/src/app/shared/usecases/save-sample-file/save-sample-file.usecase.ts @@ -25,12 +25,14 @@ export class SaveSampleFile { isRequired: columnItem.isRequired, dateFormats: columnItem.dateFormats, allowMultiSelect: columnItem.allowMultiSelect, + description: columnItem.description, })) .sort((a, b) => (a.isFrozen === b.isFrozen ? 0 : a.isFrozen ? -1 : 1)); const hasMultiSelect = columns.some( (columnItem) => columnItem.type === ColumnTypesEnum.SELECT && columnItem.allowMultiSelect ); + const fileName = this.fileNameService.getSampleFileName(templateId, hasMultiSelect); const sampleFileUrl = this.fileNameService.getSampleFileUrl(templateId, hasMultiSelect); const sampleExcelFile = await this.excelFileService.getExcelFileForHeadings(columnKeys); From bb7a73a9ddb00c8b82c9f40ce08abdf74baca53f Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:44:53 +0530 Subject: [PATCH 11/52] feat: Added documentationReferenceLinks and have documentation links of various resources --- apps/web/config/constants.config.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts index 2a11b980a..4852852b1 100644 --- a/apps/web/config/constants.config.ts +++ b/apps/web/config/constants.config.ts @@ -216,3 +216,14 @@ export const TEXTS = { // eslint-disable-next-line max-len "Build the best CSV Excel Import Experience for SaaS in 10 Minutes. Onboard customers' data with a hassle-free data importer in your app.", }; + +export const documentationReferenceLinks = { + defaultValue: 'https://docs.impler.io/platform/default-value', + primaryValidation: 'https://docs.impler.io/platform/validators', + multiSelectDropDown: 'https://docs.impler.io/features/multiselect-dropdown', + freezeColumns: 'https://docs.impler.io/features/freeze-columns', + frontendEndCallback: 'https://docs.impler.io/data-retrieval/using-frontend-callback', + webhook: 'https://docs.impler.io/data-retrieval/using-webhook', + bubbleIo: 'https://docs.impler.io/widget/bubble.io-embed', + subscriptionInformation: 'https://docs.impler.io/platform/how-subscription-works', +}; From 84fab1d472178b391953a742ad1deed393848751 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:45:34 +0530 Subject: [PATCH 12/52] feat: Added Read More and the doc link --- apps/web/design-system/checkbox/Checkbox.tsx | 26 ++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/apps/web/design-system/checkbox/Checkbox.tsx b/apps/web/design-system/checkbox/Checkbox.tsx index bcd0fed00..45b40528f 100644 --- a/apps/web/design-system/checkbox/Checkbox.tsx +++ b/apps/web/design-system/checkbox/Checkbox.tsx @@ -1,5 +1,6 @@ import { Checkbox as MantineCheckbox, MantineNumberSize } from '@mantine/core'; import useStyles from './Checkbox.styles'; +import Link from 'next/link'; // Import Link component interface CheckboxProps { label?: string; @@ -8,10 +9,31 @@ interface CheckboxProps { checked?: boolean; description?: string; size?: MantineNumberSize; + link?: string; // Optional prop for the link URL + linkLabel?: string; // Optional prop for the link text } -export function Checkbox({ label, defaultChecked, register, checked, description, size }: CheckboxProps) { +export function Checkbox({ + label, + defaultChecked, + register, + checked, + description, + size, + link, + linkLabel, +}: CheckboxProps) { const { classes } = useStyles(); + const combinedDescription = link ? ( + <> + {description}{' '} + + {linkLabel || 'Read more'} + + + ) : ( + description + ); return ( ); From a88dadb843ca549ed9526a45425888f6fc08ad63 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:46:02 +0530 Subject: [PATCH 13/52] feat: Added Tooltip with GuidIcon --- apps/web/components/home/PlanDetails/PlanDetails.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/web/components/home/PlanDetails/PlanDetails.tsx b/apps/web/components/home/PlanDetails/PlanDetails.tsx index a47d7036f..04358e421 100644 --- a/apps/web/components/home/PlanDetails/PlanDetails.tsx +++ b/apps/web/components/home/PlanDetails/PlanDetails.tsx @@ -2,17 +2,20 @@ import Link from 'next/link'; import { useEffect } from 'react'; import { useRouter } from 'next/router'; import { modals } from '@mantine/modals'; -import { Title, Text, Flex, Button, Skeleton, Stack } from '@mantine/core'; +import { Title, Text, Flex, Button, Skeleton, Stack, Tooltip, useMantineColorScheme } from '@mantine/core'; import { useApp } from '@hooks/useApp'; import { SelectCardModal } from '@components/settings'; import { usePlanDetails } from '@hooks/usePlanDetails'; import { PlansModal } from '@components/UpgradePlan/PlansModal'; -import { CONSTANTS, MODAL_KEYS, ROUTES, colors } from '@config'; +import { CONSTANTS, MODAL_KEYS, ROUTES, colors, documentationReferenceLinks } from '@config'; import { numberFormatter } from '@impler/shared/dist/utils/helpers'; import { ConfirmationModal } from '@components/ConfirmationModal'; +import { GuidePointIcon } from '@assets/icons/GuidePoint.icon'; export function PlanDetails() { + const { colorScheme } = useMantineColorScheme(); + const router = useRouter(); const status = router.query?.status; const planName = router.query?.plan; @@ -173,6 +176,11 @@ export function PlanDetails() { + + + + + ); } From 0676149fff0c0987d5885b34c9a5bcc0284a870d Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:46:43 +0530 Subject: [PATCH 14/52] feat: Added description to fetch descrption also from the columnRepository --- .../app/template/usecases/get-columns/get-columns.usecase.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/api/src/app/template/usecases/get-columns/get-columns.usecase.ts b/apps/api/src/app/template/usecases/get-columns/get-columns.usecase.ts index 567f1ee85..9ccb53f17 100644 --- a/apps/api/src/app/template/usecases/get-columns/get-columns.usecase.ts +++ b/apps/api/src/app/template/usecases/get-columns/get-columns.usecase.ts @@ -9,7 +9,7 @@ export class GetTemplateColumns { return this.columnRepository.find( { _templateId }, // eslint-disable-next-line max-len - '_id name key type alternateKeys isRequired isUnique isFrozen selectValues regex dateFormats defaultValue sequence allowMultiSelect delimiter', + '_id name key description type alternateKeys isRequired isUnique isFrozen selectValues regex dateFormats defaultValue sequence allowMultiSelect delimiter', { sort: { isFrozen: -1, From 0ad9ee447a93cc259f957f5d96c8b5d1a5921514 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:47:13 +0530 Subject: [PATCH 15/52] feat: Added Tooltip with GuidIcon --- .../DestinationItem/DestinationItem.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/web/components/imports/destination/DestinationItem/DestinationItem.tsx b/apps/web/components/imports/destination/DestinationItem/DestinationItem.tsx index 106f90f33..bf90087c3 100644 --- a/apps/web/components/imports/destination/DestinationItem/DestinationItem.tsx +++ b/apps/web/components/imports/destination/DestinationItem/DestinationItem.tsx @@ -1,32 +1,45 @@ import { PropsWithChildren } from 'react'; -import { Title, useMantineColorScheme, Flex, Stack, Switch, Collapse } from '@mantine/core'; +import { Title, useMantineColorScheme, Flex, Stack, Switch, Collapse, Tooltip, Group, Box } from '@mantine/core'; import useStyles from './DestinationItem.styles'; import { colors } from '@config'; +import { GuidePointIcon } from '@assets/icons/GuidePoint.icon'; interface DestinationItemProps extends PropsWithChildren { title: string; subtitle: string; onClick?: () => void; active?: boolean; + tooltipLink?: string; } -export const DestinationItem = ({ title, subtitle, onClick, children, active }: DestinationItemProps) => { +export const DestinationItem = ({ title, subtitle, onClick, children, active, tooltipLink }: DestinationItemProps) => { const { colorScheme } = useMantineColorScheme(); const { classes } = useStyles({ colorScheme }); return ( - - - {title} - + + + + {title} + + {tooltipLink && ( + + + + + + )} + {subtitle} - + + + {children} From b50f9b65840b511b4eeccdb956ea1feefe4342d8 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:47:46 +0530 Subject: [PATCH 16/52] feat: GuidPointIcon created --- apps/web/assets/icons/GuidePoint.icon.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 apps/web/assets/icons/GuidePoint.icon.tsx diff --git a/apps/web/assets/icons/GuidePoint.icon.tsx b/apps/web/assets/icons/GuidePoint.icon.tsx new file mode 100644 index 000000000..b4005336d --- /dev/null +++ b/apps/web/assets/icons/GuidePoint.icon.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { IconType } from '@types'; +import { IconSizes } from 'config'; + +export const GuidePointIcon = ({ size = 'sm', color }: IconType) => { + return ( + + + + + + ); +}; From 4b489d23fb5e191c9068f82c0a15f2b378118ae4 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:50:26 +0530 Subject: [PATCH 17/52] feat: Added Tooltip with GuidIcon for customValidation --- .../components/imports/validator/Validator.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/web/components/imports/validator/Validator.tsx b/apps/web/components/imports/validator/Validator.tsx index 1124385eb..382bd6557 100644 --- a/apps/web/components/imports/validator/Validator.tsx +++ b/apps/web/components/imports/validator/Validator.tsx @@ -1,4 +1,4 @@ -import { colors } from '@config'; +import { colors, documentationReferenceLinks } from '@config'; import { Controller } from 'react-hook-form'; import { Group, @@ -11,6 +11,7 @@ import { List, Code, LoadingOverlay, + Tooltip, } from '@mantine/core'; import { Button } from '@ui/button'; @@ -19,6 +20,8 @@ import { VarLabel } from '../editor/VarLabel'; import { useValidator } from '@hooks/useValidator'; import { VarItemWrapper } from '../editor/VarItemWrapper'; import { InformationIcon } from '@assets/icons/Information.icon'; +import { GuidePointIcon } from '@assets/icons/GuidePoint.icon'; +import Link from 'next/link'; interface ValidatorProps { templateId: string; @@ -45,9 +48,16 @@ export function Validator({ templateId }: ValidatorProps) {
- - Validate data in batch - + + + Validate data in batch + + + + + + + Use this space to apply some custom validator in data like, validating data against data in your database. From 7ecd1bbd3d235147a37a8cb9146e6ce9c40189e1 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:51:43 +0530 Subject: [PATCH 18/52] feat: Added Tooltip with GuidIcon for frontendCallback,webhook and bubbleIo --- apps/web/components/imports/destination/Destination.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/web/components/imports/destination/Destination.tsx b/apps/web/components/imports/destination/Destination.tsx index 0184dda8e..f0fd92506 100644 --- a/apps/web/components/imports/destination/Destination.tsx +++ b/apps/web/components/imports/destination/Destination.tsx @@ -5,7 +5,7 @@ import { Stack, TextInput as Input, Group } from '@mantine/core'; import { Button } from '@ui/button'; import { NumberInput } from '@ui/number-input'; import { DoaminInput } from '@ui/domain-input'; -import { REGULAR_EXPRESSIONS } from '@config'; +import { documentationReferenceLinks, REGULAR_EXPRESSIONS } from '@config'; import { NativeSelect } from '@ui/native-select'; import { useDestination } from '@hooks/useDestination'; import { DestinationItem } from './DestinationItem'; @@ -54,12 +54,14 @@ export function Destination({ template }: DestinationProps) { subtitle="User imported data will be sent to frontend" active={destination === DestinationsEnum.FRONTEND} onClick={() => swithDestination(DestinationsEnum.FRONTEND)} + tooltipLink={documentationReferenceLinks.frontendEndCallback} /> swithDestination(DestinationsEnum.WEBHOOK)} + tooltipLink={documentationReferenceLinks.webhook} >
@@ -102,6 +104,7 @@ export function Destination({ template }: DestinationProps) { subtitle="Send Imported data to bubble.io" active={destination === DestinationsEnum.BUBBLEIO} onClick={() => swithDestination(DestinationsEnum.BUBBLEIO)} + tooltipLink={documentationReferenceLinks.bubbleIo} > From f3b0382b13efa68ecf973c87e260c6bd29882720 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:52:43 +0530 Subject: [PATCH 19/52] feat: Added Tooltip with GuideIcon for customValidation --- apps/web/components/imports/editor/Editor.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/apps/web/components/imports/editor/Editor.tsx b/apps/web/components/imports/editor/Editor.tsx index e15b45a9b..1dc08c0fe 100644 --- a/apps/web/components/imports/editor/Editor.tsx +++ b/apps/web/components/imports/editor/Editor.tsx @@ -1,7 +1,7 @@ import { Controller } from 'react-hook-form'; -import { Group, Title, Text, useMantineColorScheme, Flex, Code, Stack, LoadingOverlay } from '@mantine/core'; +import { Group, Title, Text, useMantineColorScheme, Flex, Code, Stack, LoadingOverlay, Tooltip } from '@mantine/core'; -import { colors } from '@config'; +import { colors, documentationReferenceLinks } from '@config'; import { Button } from '@ui/button'; import { Editor } from '@ui/editor/Editor'; import { useEditor } from '@hooks/useEditor'; @@ -13,6 +13,8 @@ import { VarItemWrapper } from './VarItemWrapper'; import { WarningIcon } from '@assets/icons/Warning.icon'; import { InformationIcon } from '@assets/icons/Information.icon'; import { PossibleJSONErrors } from '@components/common/PossibleJsonErrors'; +import { GuidePointIcon } from '@assets/icons/GuidePoint.icon'; +import Link from 'next/link'; interface OutputEditorProps { templateId: string; @@ -59,9 +61,16 @@ export function OutputEditor({ templateId, switchToDestination }: OutputEditorPr
- - {titles[destination.destination].title} - + + + {titles[destination.destination].title} + + + + + + + {titles[destination.destination].subtitle} From 6dbdae03675a2e67bc021b43c04d0f4bce4268f2 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:53:12 +0530 Subject: [PATCH 20/52] feat: Added Input for column description --- .../components/imports/forms/ColumnForm.tsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/apps/web/components/imports/forms/ColumnForm.tsx b/apps/web/components/imports/forms/ColumnForm.tsx index e873628fd..926fa7632 100644 --- a/apps/web/components/imports/forms/ColumnForm.tsx +++ b/apps/web/components/imports/forms/ColumnForm.tsx @@ -15,7 +15,7 @@ import { } from '@mantine/core'; import { ColumnTypesEnum, DEFAULT_VALUES, IColumn } from '@impler/shared'; -import { colors, COLUMN_TYPES, DELIMITERS, MODAL_KEYS, MODAL_TITLES } from '@config'; +import { colors, COLUMN_TYPES, DELIMITERS, MODAL_KEYS, MODAL_TITLES, documentationReferenceLinks } from '@config'; import { Button } from '@ui/button'; import { Textarea } from '@ui/textarea'; @@ -78,6 +78,12 @@ export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) { placeholder="Column Key" error={errors.key?.message} /> + + Primary validation to apply on column.{' '} + + Read more + + + } /> )} /> @@ -205,8 +222,8 @@ export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) { description={ <> Value used in response when cell is empty,{' '} - - read more + + Read more } @@ -227,6 +244,8 @@ export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) { label="Multi Select Values" register={register('allowMultiSelect')} description="Users can pick multiple values from the list. Sample will also allow selecting multiple values." + link={documentationReferenceLinks.multiSelectDropDown} + linkLabel="Read more" /> ) : ( From d0a699e1a5214cd90714b2a9acf72a496f887aa0 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:53:44 +0530 Subject: [PATCH 21/52] feat: Added customValidation and doc link --- apps/web/config/constants.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts index 4852852b1..f5a374d7b 100644 --- a/apps/web/config/constants.config.ts +++ b/apps/web/config/constants.config.ts @@ -226,4 +226,5 @@ export const documentationReferenceLinks = { webhook: 'https://docs.impler.io/data-retrieval/using-webhook', bubbleIo: 'https://docs.impler.io/widget/bubble.io-embed', subscriptionInformation: 'https://docs.impler.io/platform/how-subscription-works', + customValidation: 'https://docs.impler.io/features/custom-validation', }; From 13bdb34049f19004f583caadc9caf4358bb6318e Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:54:47 +0530 Subject: [PATCH 22/52] feat: Added function to have tooltip over column header and function for user defined color scheme --- .../widget/src/util/helpers/common.helpers.ts | 57 ++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/apps/widget/src/util/helpers/common.helpers.ts b/apps/widget/src/util/helpers/common.helpers.ts index 864ee9887..1e668da38 100644 --- a/apps/widget/src/util/helpers/common.helpers.ts +++ b/apps/widget/src/util/helpers/common.helpers.ts @@ -1,5 +1,8 @@ -import axios from 'axios'; import * as Sentry from '@sentry/react'; +import axios from 'axios'; +import tippy from 'tippy.js'; +import 'tippy.js/dist/tippy.css'; +import 'tippy.js/animations/shift-away.css'; import { variables } from '@config'; import { downloadFile } from '@impler/shared'; @@ -64,3 +67,55 @@ export function captureError(error: any) { export const getObjectId = (math = Math, date = Date, hr = 16, sec = (sp: number) => math.floor(sp).toString(hr)) => sec(date.now() / 1000) + ' '.repeat(hr).replace(/./g, () => sec(math.random() * hr)); +export const validateRssUrl = { + required: 'RSS URL is required', + pattern: { + value: /^(https?:\/\/)?([\w-]+(\.[\w-]+)+\.?(:\d+)?)(\/[^\s]*)?$/, + message: 'Please Enter a valid RSS Feed URL', + }, +}; + +export const createCustomTippyTheme = (color: string) => { + const themeId = 'custom-tippy-theme'; + if (!document.getElementById(themeId)) { + const style = document.createElement('style'); + style.id = themeId; + style.textContent = ` + .tippy-box[data-theme~='custom'] { + background-color: ${color}; + color: #fff; + } + .tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before { + border-top-color: ${color}; + } + .tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before { + border-bottom-color: ${color}; + } + .tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before { + border-left-color: ${color}; + } + .tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before { + border-right-color: ${color}; + } + `; + document.head.appendChild(style); + } +}; + +export const getColumnDescription = (columnIndex: number, descriptions: string[]): string | null => { + return descriptions[columnIndex] || null; +}; + +export const addTippyToElement = (element: HTMLElement, content: string, primaryColor: string) => { + if (!element || !content) return; + + createCustomTippyTheme(primaryColor); + tippy(element, { + content, + placement: 'top', + arrow: true, + theme: 'custom', + animation: 'shift-away', + duration: 300, + }); +}; From ce7462b3617cee54fea463c9c6b12493188e1f66 Mon Sep 17 00:00:00 2001 From: Mayur Date: Wed, 31 Jul 2024 19:55:23 +0530 Subject: [PATCH 23/52] feat: Package.lock dependency for tippy.js included --- pnpm-lock.yaml | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cb6414b91..ef712e7c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -564,6 +564,9 @@ importers: rimraf: specifier: ^3.0.2 version: 3.0.2 + tippy.js: + specifier: ^6.3.7 + version: 6.3.7 web-vitals: specifier: ^3.0.4 version: 3.5.2 @@ -23769,6 +23772,12 @@ packages: dev: false optional: true + /tippy.js@6.3.7: + resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==} + dependencies: + '@popperjs/core': 2.11.8 + dev: false + /tmp@0.0.33: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} engines: {node: '>=0.6.0'} From 585b10f1d1b41d3a1f6fc62ee3a53b5f2f240b61 Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 14:51:43 +0530 Subject: [PATCH 24/52] feat: Added description in ISchemaItem --- packages/react/src/types/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/types/index.ts b/packages/react/src/types/index.ts index 3150aa765..5bc206be1 100644 --- a/packages/react/src/types/index.ts +++ b/packages/react/src/types/index.ts @@ -18,6 +18,7 @@ export interface ButtonProps { export interface ISchemaItem { key: string; name: string; + description: string; alternateKeys?: string[]; isRequired?: boolean; isUnique?: boolean; From df3f540bc1d297449120f131fd4eb378185516ad Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 14:52:22 +0530 Subject: [PATCH 25/52] feat: Added description --- .../usecases/duplicate-template/duplicate-template.usecase.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/api/src/app/template/usecases/duplicate-template/duplicate-template.usecase.ts b/apps/api/src/app/template/usecases/duplicate-template/duplicate-template.usecase.ts index 2b7159270..9c66a625f 100644 --- a/apps/api/src/app/template/usecases/duplicate-template/duplicate-template.usecase.ts +++ b/apps/api/src/app/template/usecases/duplicate-template/duplicate-template.usecase.ts @@ -56,7 +56,7 @@ export class DuplicateTemplate { _templateId, }, // eslint-disable-next-line max-len - '-_id name key alternateKeys isRequired isUnique type regex regexDescription selectValues dateFormats sequence defaultValue allowMultiSelect' + '-_id name key alternateKeys isRequired isUnique type regex regexDescription selectValues dateFormats sequence defaultValue allowMultiSelect description' ); await this.columnRepository.createMany( From f3aaff648da05eaddc5296ac17238b5170f7483b Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 14:58:52 +0530 Subject: [PATCH 26/52] feat: Added info icon over column header wherever user gives column description --- .../src/components/Common/Table/Table.tsx | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx index 2729a8363..865cec379 100644 --- a/apps/widget/src/components/Common/Table/Table.tsx +++ b/apps/widget/src/components/Common/Table/Table.tsx @@ -211,6 +211,9 @@ export const Table = forwardRef( } }} afterGetColHeader={(i, TH) => { + TH.innerHTML = ''; + TH.innerHTML = headings[i]; + if (i === 0) { TH.classList.add('check-all-cell'); TH.innerHTML = ` @@ -222,7 +225,25 @@ export const Table = forwardRef(
`; } else { if (columnDescriptions && columnDescriptions[i]) { - addTippyToElement(TH as HTMLElement, columnDescriptions[i], primaryColor as string); + // Create the SVG icon element + const infoIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + infoIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + infoIcon.setAttribute('viewBox', '-2 -2 24 24'); + infoIcon.setAttribute('width', '20'); + infoIcon.setAttribute('fill', 'currentColor'); + infoIcon.setAttribute( + 'style', + 'vertical-align: middle;float: right;cursor: pointer;color:#fffff; margin-right:4px;' + ); + const infoIconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + infoIconPath.setAttribute( + 'd', + 'M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z' + ); + infoIcon.appendChild(infoIconPath); + TH.appendChild(infoIcon); + + addTippyToElement(infoIcon as unknown as HTMLElement, columnDescriptions[i], primaryColor as string); } } }} From 4634e9644d49aeb27da25fd4a657825bdeb88bdf Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 14:59:25 +0530 Subject: [PATCH 27/52] feat: Added description --- apps/web/hooks/useColumnsEditor.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/hooks/useColumnsEditor.tsx b/apps/web/hooks/useColumnsEditor.tsx index 3f7c7b3de..4be7eb5ee 100644 --- a/apps/web/hooks/useColumnsEditor.tsx +++ b/apps/web/hooks/useColumnsEditor.tsx @@ -44,11 +44,13 @@ export function useColumnsEditor({ templateId }: UseSchemaProps) { regexDescription, selectValues, defaultValue, + description, allowMultiSelect, }) => ({ key, name, type, + description, alternateKeys, isRequired, isUnique, From a9403a49152b6147e32ef9d97e530c265b38e663 Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 15:24:11 +0530 Subject: [PATCH 28/52] feat: Added custom tippy theming --- .../components/Common/Container/Container.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/apps/widget/src/components/Common/Container/Container.tsx b/apps/widget/src/components/Common/Container/Container.tsx index 4d189fe44..64637be8d 100644 --- a/apps/widget/src/components/Common/Container/Container.tsx +++ b/apps/widget/src/components/Common/Container/Container.tsx @@ -86,6 +86,25 @@ export function Container({ children }: PropsWithChildren<{}>) { colorScheme: secondaryPayload.colorScheme, }, }), + '.tippy-box[data-theme~="custom"]': { + color: 'black', + backgroundColor: 'white', + border: `2px solid ${secondaryPayload.primaryColor}`, + boxShadow: '0 0 10px rgba(0,0,0,0.2)', + borderRadius: 5, + }, + '.tippy-box[data-theme~="custom"][data-placement^="top"] > .tippy-arrow::before': { + borderTopColor: secondaryPayload.primaryColor, + }, + '.tippy-box[data-theme~="custom"][data-placement^="bottom"] > .tippy-arrow::before': { + borderBottomColor: secondaryPayload.primaryColor, + }, + '.tippy-box[data-theme~="custom"][data-placement^="left"] > .tippy-arrow::before': { + borderLeftColor: secondaryPayload.primaryColor, + }, + '.tippy-box[data-theme~="custom"][data-placement^="right"] > .tippy-arrow::before': { + borderRightColor: secondaryPayload.primaryColor, + }, }} /> Date: Thu, 1 Aug 2024 15:27:30 +0530 Subject: [PATCH 29/52] feat: Removed primaryColor --- apps/widget/src/components/Common/Table/Table.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx index 865cec379..6b96ef0ac 100644 --- a/apps/widget/src/components/Common/Table/Table.tsx +++ b/apps/widget/src/components/Common/Table/Table.tsx @@ -53,7 +53,6 @@ interface TableProps { afterRender?: () => void; data: Record[]; columnDescriptions?: string[]; - primaryColor?: string; columnDefs: HotItemSchema[]; onCheckAll?: (checked: boolean) => void; onValueChange?: (row: number, prop: string, oldVal: any, newVal: any) => void; @@ -168,7 +167,6 @@ export const Table = forwardRef( columnDefs, data, columnDescriptions, - primaryColor, allChecked, onRowCheck, onCheckAll, @@ -243,7 +241,7 @@ export const Table = forwardRef( infoIcon.appendChild(infoIconPath); TH.appendChild(infoIcon); - addTippyToElement(infoIcon as unknown as HTMLElement, columnDescriptions[i], primaryColor as string); + addTippyToElement(infoIcon as unknown as HTMLElement, columnDescriptions[i]); } } }} From aa57a76690dfdf58346025df711f6c4514be686d Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 15:27:52 +0530 Subject: [PATCH 30/52] feat: Removed primaryColor --- apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx index ffc6d968a..5246f6a80 100644 --- a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx +++ b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx @@ -17,7 +17,6 @@ import { Pagination } from '@ui/Pagination'; import { LoadingOverlay } from '@ui/LoadingOverlay'; import { SegmentedControl } from '@ui/SegmentedControl'; import { ConfirmModal } from 'components/widget/modals/ConfirmModal'; -import { useAppState } from '@store/app.context'; interface IPhase3Props { onNextClick: (uploadData: IUpload, importedData?: Record[]) => void; @@ -62,7 +61,6 @@ export function Phase3(props: IPhase3Props) { height: 200, width: 500, }); - const { primaryColor } = useAppState(); const columnDescriptions = columnDefs.map((column) => column.description || ''); useEffect(() => { @@ -176,7 +174,6 @@ export function Phase3(props: IPhase3Props) { columnDefs={columnDefs} allChecked={allChecked} columnDescriptions={columnDescriptions} - primaryColor={primaryColor} /> From 290b863af03cae809669f23b29742483ea790588 Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 15:29:11 +0530 Subject: [PATCH 31/52] feat: Removed custom theme and added it from the Container component --- .../widget/src/util/helpers/common.helpers.ts | 33 ++----------------- 1 file changed, 2 insertions(+), 31 deletions(-) diff --git a/apps/widget/src/util/helpers/common.helpers.ts b/apps/widget/src/util/helpers/common.helpers.ts index 1e668da38..2dd90bf60 100644 --- a/apps/widget/src/util/helpers/common.helpers.ts +++ b/apps/widget/src/util/helpers/common.helpers.ts @@ -75,47 +75,18 @@ export const validateRssUrl = { }, }; -export const createCustomTippyTheme = (color: string) => { - const themeId = 'custom-tippy-theme'; - if (!document.getElementById(themeId)) { - const style = document.createElement('style'); - style.id = themeId; - style.textContent = ` - .tippy-box[data-theme~='custom'] { - background-color: ${color}; - color: #fff; - } - .tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before { - border-top-color: ${color}; - } - .tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before { - border-bottom-color: ${color}; - } - .tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before { - border-left-color: ${color}; - } - .tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before { - border-right-color: ${color}; - } - `; - document.head.appendChild(style); - } -}; - export const getColumnDescription = (columnIndex: number, descriptions: string[]): string | null => { return descriptions[columnIndex] || null; }; -export const addTippyToElement = (element: HTMLElement, content: string, primaryColor: string) => { +export const addTippyToElement = (element: SVGSVGElement | HTMLElement, content: string) => { if (!element || !content) return; - createCustomTippyTheme(primaryColor); tippy(element, { content, - placement: 'top', arrow: true, + duration: 300, theme: 'custom', animation: 'shift-away', - duration: 300, }); }; From 0b121ea14e9d9d25e9808096fdaa8d94bc20947b Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 16:33:37 +0530 Subject: [PATCH 32/52] feat: Removed ExcelJS dependency --- .../app/shared/services/file/file.service.ts | 34 ++----------------- 1 file changed, 3 insertions(+), 31 deletions(-) diff --git a/apps/api/src/app/shared/services/file/file.service.ts b/apps/api/src/app/shared/services/file/file.service.ts index c353b969e..559621f88 100644 --- a/apps/api/src/app/shared/services/file/file.service.ts +++ b/apps/api/src/app/shared/services/file/file.service.ts @@ -1,5 +1,4 @@ import * as XLSX from 'xlsx'; -import * as ExcelJS from 'exceljs'; import { cwd } from 'node:process'; import * as xlsxPopulate from 'xlsx-populate'; import { CONSTANTS } from '@shared/constants'; @@ -34,7 +33,7 @@ export class ExcelFileService { name .replace(/[^a-zA-Z0-9]/g, '') .toLowerCase() - .slice(0, 25) // exceljs don't allow heading more than 30 characters + .slice(0, 25) // excel don't allow heading more than 30 characters ); } addSelectSheet(wb: any, heading: IExcelFileHeading): string { @@ -45,28 +44,6 @@ export class ExcelFileService { return name; } - addSelectValidation({ - ws, - range, - keyName, - isRequired, - }: { - ws: ExcelJS.Worksheet; - range: string; - keyName: string; - isRequired: boolean; - }) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - ws.dataValidations.add(range, { - type: 'list', - allowBlank: !isRequired, - formulae: [`${keyName}!$A$2:$A$9999`], - showErrorMessage: true, - errorTitle: 'Invalid Value', - error: 'Please select from the list', - }); - } getExcelColumnNameFromIndex(columnNumber: number) { // To store result (Excel column name) const columnName = []; @@ -104,8 +81,6 @@ export class ExcelFileService { headings.forEach((heading, index) => { const columnName = this.getExcelColumnNameFromIndex(index + 1); const columnHeadingCellName = columnName + '1'; - const columnDescriptionCellName = columnName + '2'; - // Set header if (heading.type === ColumnTypesEnum.SELECT && heading.allowMultiSelect) { worksheet @@ -114,16 +89,13 @@ export class ExcelFileService { } else { worksheet.cell(columnHeadingCellName).value(heading.key); } - - // Set description - worksheet.cell(columnDescriptionCellName).value(heading.description || 'Description not provided'); worksheet.column(columnName).style('numberFormat', '@'); }); const frozenColumns = headings.filter((heading) => heading.isFrozen).length; if (frozenColumns) - worksheet.freezePanes(frozenColumns, 2); // freeze panes (freeze first n column and first two rows) - else worksheet.freezePanes(0, 2); // freeze 0 column and first two rows + worksheet.freezePanes(frozenColumns, 1); // freeze panes (freeze first n column and first two rows) + else worksheet.freezePanes(0, 1); // freeze 0 column and first two rows headings.forEach((heading, index) => { if (heading.type === ColumnTypesEnum.SELECT) { From 55bcd0c11dafa50323c62a99777870de0e42ed1e Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 16:34:11 +0530 Subject: [PATCH 33/52] feat: Removed ExcelJS dependency package loak and josn files --- apps/api/package.json | 1 - pnpm-lock.yaml | 239 +----------------------------------------- 2 files changed, 4 insertions(+), 236 deletions(-) diff --git a/apps/api/package.json b/apps/api/package.json index f954db7d2..ca8fc16b7 100644 --- a/apps/api/package.json +++ b/apps/api/package.json @@ -48,7 +48,6 @@ "dayjs": "^1.11.11", "dotenv": "^16.0.2", "envalid": "^7.3.1", - "exceljs": "^4.3.0", "hat": "^0.0.3", "jsonwebtoken": "^9.0.0", "jszip": "^3.10.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef712e7c1..6fdca5ffb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -177,9 +177,6 @@ importers: envalid: specifier: ^7.3.1 version: 7.3.1 - exceljs: - specifier: ^4.3.0 - version: 4.4.0 hat: specifier: ^0.0.3 version: 0.0.3 @@ -4078,29 +4075,6 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - /@fast-csv/format@4.3.5: - resolution: {integrity: sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==} - dependencies: - '@types/node': 14.18.63 - lodash.escaperegexp: 4.1.2 - lodash.isboolean: 3.0.3 - lodash.isequal: 4.5.0 - lodash.isfunction: 3.0.9 - lodash.isnil: 4.0.0 - dev: false - - /@fast-csv/parse@4.3.6: - resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==} - dependencies: - '@types/node': 14.18.63 - lodash.escaperegexp: 4.1.2 - lodash.groupby: 4.6.0 - lodash.isfunction: 3.0.9 - lodash.isnil: 4.0.0 - lodash.isundefined: 3.0.1 - lodash.uniq: 4.5.0 - dev: false - /@floating-ui/core@1.6.4: resolution: {integrity: sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==} dependencies: @@ -9111,10 +9085,6 @@ packages: dependencies: '@types/node': 18.19.39 - /@types/node@14.18.63: - resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==} - dev: false - /@types/node@16.18.101: resolution: {integrity: sha512-AAsx9Rgz2IzG8KJ6tXd6ndNkVcu+GYB6U/SnFAaokSPNx2N7dcIIfnighYUNumvj6YS2q39Dejz5tT0NCV7CWA==} @@ -10101,51 +10071,6 @@ packages: /aproba@2.0.0: resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} - /archiver-utils@2.1.0: - resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==} - engines: {node: '>= 6'} - dependencies: - glob: 7.2.3 - graceful-fs: 4.2.11 - lazystream: 1.0.1 - lodash.defaults: 4.2.0 - lodash.difference: 4.5.0 - lodash.flatten: 4.4.0 - lodash.isplainobject: 4.0.6 - lodash.union: 4.6.0 - normalize-path: 3.0.0 - readable-stream: 2.3.8 - dev: false - - /archiver-utils@3.0.4: - resolution: {integrity: sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==} - engines: {node: '>= 10'} - dependencies: - glob: 7.2.3 - graceful-fs: 4.2.11 - lazystream: 1.0.1 - lodash.defaults: 4.2.0 - lodash.difference: 4.5.0 - lodash.flatten: 4.4.0 - lodash.isplainobject: 4.0.6 - lodash.union: 4.6.0 - normalize-path: 3.0.0 - readable-stream: 3.6.2 - dev: false - - /archiver@5.3.2: - resolution: {integrity: sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==} - engines: {node: '>= 10'} - dependencies: - archiver-utils: 2.1.0 - async: 3.2.5 - buffer-crc32: 0.2.13 - readable-stream: 3.6.2 - readdir-glob: 1.1.3 - tar-stream: 2.2.0 - zip-stream: 4.1.1 - dev: false - /are-we-there-yet@2.0.0: resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==} engines: {node: '>=10'} @@ -10810,6 +10735,8 @@ packages: /big-integer@1.6.52: resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==} engines: {node: '>=0.6'} + requiresBuild: true + optional: true /big.js@5.2.2: resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==} @@ -10838,13 +10765,6 @@ packages: resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} - /binary@0.3.0: - resolution: {integrity: sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==} - dependencies: - buffers: 0.1.1 - chainsaw: 0.1.0 - dev: false - /bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} requiresBuild: true @@ -10859,10 +10779,6 @@ packages: inherits: 2.0.4 readable-stream: 3.6.2 - /bluebird@3.4.7: - resolution: {integrity: sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==} - dev: false - /bluebird@3.7.2: resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==} @@ -11064,10 +10980,6 @@ packages: engines: {node: '>=16.20.1'} dev: false - /buffer-crc32@0.2.13: - resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==} - dev: false - /buffer-equal-constant-time@1.0.1: resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==} dev: false @@ -11079,11 +10991,6 @@ packages: /buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} - /buffer-indexof-polyfill@1.0.2: - resolution: {integrity: sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==} - engines: {node: '>=0.10'} - dev: false - /buffer-more-ints@1.0.0: resolution: {integrity: sha512-EMetuGFz5SLsT0QTnXzINh4Ksr+oo4i+UGTXEshiGCQWnsgSs7ZhJ8fzlwQ+OzEMs0MpDAMr1hxnblp5a4vcHg==} dev: false @@ -11111,11 +11018,6 @@ packages: base64-js: 1.5.1 ieee754: 1.2.1 - /buffers@0.1.1: - resolution: {integrity: sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==} - engines: {node: '>=0.2.0'} - dev: false - /builtin-modules@3.3.0: resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==} engines: {node: '>=6'} @@ -11343,12 +11245,6 @@ packages: type-detect: 4.0.8 dev: true - /chainsaw@0.1.0: - resolution: {integrity: sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==} - dependencies: - traverse: 0.3.9 - dev: false - /chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -11802,16 +11698,6 @@ packages: /component-emitter@1.3.1: resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==} - /compress-commons@4.1.2: - resolution: {integrity: sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==} - engines: {node: '>= 10'} - dependencies: - buffer-crc32: 0.2.13 - crc32-stream: 4.0.3 - normalize-path: 3.0.0 - readable-stream: 3.6.2 - dev: false - /compressible@2.0.18: resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==} engines: {node: '>= 0.6'} @@ -12179,14 +12065,6 @@ packages: hasBin: true dev: false - /crc32-stream@4.0.3: - resolution: {integrity: sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==} - engines: {node: '>= 10'} - dependencies: - crc-32: 1.2.2 - readable-stream: 3.6.2 - dev: false - /create-ecdh@4.0.4: resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==} dependencies: @@ -14009,21 +13887,6 @@ packages: md5.js: 1.3.5 safe-buffer: 5.2.1 - /exceljs@4.4.0: - resolution: {integrity: sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==} - engines: {node: '>=8.3.0'} - dependencies: - archiver: 5.3.2 - dayjs: 1.11.11 - fast-csv: 4.3.6 - jszip: 3.10.1 - readable-stream: 3.6.2 - saxes: 5.0.1 - tmp: 0.2.3 - unzipper: 0.10.14 - uuid: 8.3.2 - dev: false - /exec-sh@0.3.6: resolution: {integrity: sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==} dev: false @@ -14255,14 +14118,6 @@ packages: transitivePeerDependencies: - supports-color - /fast-csv@4.3.6: - resolution: {integrity: sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==} - engines: {node: '>=10.0.0'} - dependencies: - '@fast-csv/format': 4.3.5 - '@fast-csv/parse': 4.3.6 - dev: false - /fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} @@ -14774,17 +14629,6 @@ packages: requiresBuild: true optional: true - /fstream@1.0.12: - resolution: {integrity: sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==} - engines: {node: '>=0.6'} - deprecated: This package is no longer supported. - dependencies: - graceful-fs: 4.2.11 - inherits: 2.0.4 - mkdirp: 0.5.6 - rimraf: 2.7.1 - dev: false - /function-bind@1.1.2: resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} @@ -17380,13 +17224,6 @@ packages: dotenv: 8.6.0 dotenv-expand: 5.1.0 - /lazystream@1.0.1: - resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==} - engines: {node: '>= 0.6.3'} - dependencies: - readable-stream: 2.3.8 - dev: false - /lerna@8.1.6: resolution: {integrity: sha512-O3zSX/dmchMVy9m37DD1BCx7X68nS5lZFECjqG7Siiv3+KgqKXHnF4JQPJUDD/vG2qBQv5StpXCyqGxR0XJVAQ==} engines: {node: '>=18.0.0'} @@ -17581,10 +17418,6 @@ packages: - supports-color dev: true - /listenercount@1.0.1: - resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==} - dev: false - /listr2@6.6.1: resolution: {integrity: sha512-+rAXGHh0fkEWdXBmX+L6mmfmXmXvDGEKzkjxO+8mP3+nI/r/CWznVBvsibXdxda9Zz0OW2e2ikphN3OwCT/jSg==} engines: {node: '>=16.0.0'} @@ -17703,30 +17536,10 @@ packages: /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} - /lodash.defaults@4.2.0: - resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==} - dev: false - - /lodash.difference@4.5.0: - resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==} - dev: false - - /lodash.escaperegexp@4.1.2: - resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==} - dev: false - - /lodash.flatten@4.4.0: - resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==} - dev: false - /lodash.get@4.4.2: resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} dev: false - /lodash.groupby@4.6.0: - resolution: {integrity: sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==} - dev: false - /lodash.includes@4.3.0: resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==} dev: false @@ -17741,6 +17554,7 @@ packages: /lodash.isfunction@3.0.9: resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==} + dev: true /lodash.isinteger@4.0.4: resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==} @@ -17750,10 +17564,6 @@ packages: resolution: {integrity: sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==} dev: true - /lodash.isnil@4.0.0: - resolution: {integrity: sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==} - dev: false - /lodash.isnumber@3.0.3: resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==} dev: false @@ -17765,10 +17575,6 @@ packages: resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==} dev: false - /lodash.isundefined@3.0.1: - resolution: {integrity: sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==} - dev: false - /lodash.kebabcase@4.1.1: resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==} dev: true @@ -17800,10 +17606,6 @@ packages: resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==} dev: true - /lodash.union@4.6.0: - resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==} - dev: false - /lodash.uniq@4.5.0: resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==} @@ -21695,12 +21497,6 @@ packages: string_decoder: 1.3.0 util-deprecate: 1.0.2 - /readdir-glob@1.1.3: - resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==} - dependencies: - minimatch: 5.1.6 - dev: false - /readdirp@2.2.1: resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==} engines: {node: '>=0.10'} @@ -23788,6 +23584,7 @@ packages: /tmp@0.2.3: resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==} engines: {node: '>=14.14'} + dev: true /tmpl@1.0.5: resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==} @@ -23870,10 +23667,6 @@ packages: punycode: 2.3.1 dev: false - /traverse@0.3.9: - resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==} - dev: false - /tree-kill@1.2.2: resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==} hasBin: true @@ -24420,21 +24213,6 @@ packages: os-homedir: 1.0.2 optional: true - /unzipper@0.10.14: - resolution: {integrity: sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==} - dependencies: - big-integer: 1.6.52 - binary: 0.3.0 - bluebird: 3.4.7 - buffer-indexof-polyfill: 1.0.2 - duplexer2: 0.1.4 - fstream: 1.0.12 - graceful-fs: 4.2.11 - listenercount: 1.0.1 - readable-stream: 2.3.8 - setimmediate: 1.0.5 - dev: false - /upath@1.2.0: resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==} engines: {node: '>=4'} @@ -25668,15 +25446,6 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} - /zip-stream@4.1.1: - resolution: {integrity: sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==} - engines: {node: '>= 10'} - dependencies: - archiver-utils: 3.0.4 - compress-commons: 4.1.2 - readable-stream: 3.6.2 - dev: false - /zwitch@1.0.5: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} From 073b9b57ed6b5b5119a56ece79df15f0740f1490 Mon Sep 17 00:00:00 2001 From: Mayur Date: Thu, 1 Aug 2024 17:12:01 +0530 Subject: [PATCH 34/52] feat: Substituted the Read More link to GuidPointIcon --- .../components/imports/forms/ColumnForm.tsx | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/apps/web/components/imports/forms/ColumnForm.tsx b/apps/web/components/imports/forms/ColumnForm.tsx index 926fa7632..2f8833934 100644 --- a/apps/web/components/imports/forms/ColumnForm.tsx +++ b/apps/web/components/imports/forms/ColumnForm.tsx @@ -12,6 +12,7 @@ import { CloseButton, Select, useMantineColorScheme, + Tooltip, } from '@mantine/core'; import { ColumnTypesEnum, DEFAULT_VALUES, IColumn } from '@impler/shared'; @@ -22,6 +23,7 @@ import { Textarea } from '@ui/textarea'; import { Checkbox } from '@ui/checkbox'; import { MultiSelect } from '@ui/multi-select'; import { CustomSelect } from '@ui/custom-select'; +import { GuidePointIcon } from '@assets/icons/GuidePoint.icon'; interface ColumnFormProps { data?: Partial; @@ -112,25 +114,27 @@ export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) { control={control} render={({ field: { value, onChange, onBlur } }) => (