## Description It has been a month since we have turned on the flag for table HTML column type and we have not seen any issues. This PR removes all the feature flags related code from the codebase. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Table" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/13195811365> > Commit: 7a0f810c1f6a271adad082fc5c8b630b427aea34 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13195811365&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Table` > Spec: > <hr>Fri, 07 Feb 2025 09:20:10 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - The HTML column type now appears as a consistently available option when configuring table widgets. - **Refactor** - The table widget’s architecture has been streamlined for improved modularity and state management, enhancing overall cell rendering. - **Chore** - Legacy conditional toggling for the HTML column type has been removed to simplify configuration and standardize behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
246 lines
6.0 KiB
TypeScript
246 lines
6.0 KiB
TypeScript
import type {
|
|
ColumnProperties,
|
|
CompactMode,
|
|
ReactTableFilter,
|
|
TableStyles,
|
|
SortOrderTypes,
|
|
} from "./component/Constants";
|
|
import type { WidgetProps } from "widgets/BaseWidget";
|
|
import type { WithMeta } from "widgets/MetaHOC";
|
|
import type { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
|
import { IconNames } from "@blueprintjs/icons";
|
|
import type { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
|
|
import type { Alignment } from "@blueprintjs/core";
|
|
import type { IconName } from "@blueprintjs/icons";
|
|
import type { ButtonVariant } from "components/constants";
|
|
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
|
|
|
|
export interface EditableCell {
|
|
column: string;
|
|
index: number;
|
|
value: string | number | null;
|
|
initialValue: string;
|
|
inputValue: string;
|
|
[ORIGINAL_INDEX_KEY]: number;
|
|
}
|
|
|
|
export enum PaginationDirection {
|
|
INITIAL = "INITIAL",
|
|
PREVIOUS_PAGE = "PREVIOUS_PAGE",
|
|
NEXT_PAGE = "NEXT_PAGE",
|
|
}
|
|
|
|
export enum EditableCellActions {
|
|
SAVE = "SAVE",
|
|
DISCARD = "DISCARD",
|
|
}
|
|
|
|
export enum InlineEditingSaveOptions {
|
|
ROW_LEVEL = "ROW_LEVEL",
|
|
TABLE_LEVEL = "TABLE_LEVEL",
|
|
CUSTOM = "CUSTOM",
|
|
}
|
|
|
|
interface AddNewRowProps {
|
|
isAddRowInProgress: boolean;
|
|
allowAddNewRow: boolean;
|
|
onAddNewRowSave: string;
|
|
onAddNewRowDiscard: string;
|
|
defaultNewRow: Record<string, unknown>;
|
|
}
|
|
export interface TableWidgetProps
|
|
extends WidgetProps,
|
|
WithMeta,
|
|
TableStyles,
|
|
AddNewRowProps {
|
|
pristine: boolean;
|
|
nextPageKey?: string;
|
|
prevPageKey?: string;
|
|
label: string;
|
|
searchText: string;
|
|
defaultSearchText: string;
|
|
defaultSelectedRowIndex?: number | string;
|
|
defaultSelectedRowIndices?: number[] | string;
|
|
tableData: Array<Record<string, unknown>>;
|
|
onPageChange?: string;
|
|
pageSize: number;
|
|
onRowSelected?: string;
|
|
onSearchTextChanged: string;
|
|
onSort: string;
|
|
selectedRowIndex?: number;
|
|
selectedRowIndices: number[];
|
|
serverSidePaginationEnabled?: boolean;
|
|
multiRowSelection?: boolean;
|
|
enableClientSideSearch?: boolean;
|
|
hiddenColumns?: string[];
|
|
columnOrder?: string[];
|
|
frozenColumnIndices: Record<string, number>;
|
|
canFreezeColumn?: boolean;
|
|
columnNameMap?: { [key: string]: string };
|
|
columnTypeMap?: {
|
|
[key: string]: { type: string; format: string; inputFormat?: string };
|
|
};
|
|
columnWidthMap?: { [key: string]: number };
|
|
filters?: ReactTableFilter[];
|
|
compactMode?: CompactMode;
|
|
isSortable?: boolean;
|
|
primaryColumnId?: string;
|
|
primaryColumns: Record<string, ColumnProperties>;
|
|
derivedColumns: Record<string, ColumnProperties>;
|
|
sortOrder: {
|
|
column: string;
|
|
order: SortOrderTypes | null;
|
|
};
|
|
totalRecordsCount?: number;
|
|
transientTableData: {
|
|
[key: string]: Record<string, string>;
|
|
};
|
|
editableCell?: EditableCell;
|
|
primaryColor: string;
|
|
borderRadius: string;
|
|
boxShadow?: string;
|
|
inlineEditingSaveOption?: InlineEditingSaveOptions;
|
|
showInlineEditingOptionDropdown?: boolean;
|
|
variant?: TableVariant;
|
|
isEditableCellsValid: Record<string, boolean>;
|
|
selectColumnFilterText?: Record<string, string>;
|
|
isAddRowInProgress: boolean;
|
|
newRow: Record<string, unknown>;
|
|
firstEditableColumnIdByOrder: string;
|
|
enableServerSideFiltering: boolean;
|
|
onTableFilterUpdate: string;
|
|
customIsLoading: boolean;
|
|
customIsLoadingValue: boolean;
|
|
}
|
|
|
|
export enum TableVariantTypes {
|
|
DEFAULT = "DEFAULT",
|
|
VARIANT2 = "VARIANT2",
|
|
VARIANT3 = "VARIANT3",
|
|
}
|
|
|
|
export type TableVariant = keyof typeof TableVariantTypes;
|
|
|
|
export const ORIGINAL_INDEX_KEY = "__originalIndex__";
|
|
|
|
export const PRIMARY_COLUMN_KEY_VALUE = "__primaryKey__";
|
|
|
|
export const DEFAULT_COLUMN_WIDTH = 150;
|
|
|
|
export const COLUMN_MIN_WIDTH = 60;
|
|
|
|
export const TABLE_COLUMN_ORDER_KEY = "tableWidgetColumnOrder";
|
|
|
|
export enum ColumnTypes {
|
|
TEXT = "text",
|
|
URL = "url",
|
|
NUMBER = "number",
|
|
IMAGE = "image",
|
|
VIDEO = "video",
|
|
DATE = "date",
|
|
BUTTON = "button",
|
|
ICON_BUTTON = "iconButton",
|
|
MENU_BUTTON = "menuButton",
|
|
SELECT = "select",
|
|
EDIT_ACTIONS = "editActions",
|
|
CHECKBOX = "checkbox",
|
|
SWITCH = "switch",
|
|
CURRENCY = "currency",
|
|
HTML = "html",
|
|
}
|
|
|
|
export enum ReadOnlyColumnTypes {
|
|
TEXT = "text",
|
|
URL = "url",
|
|
NUMBER = "number",
|
|
IMAGE = "image",
|
|
VIDEO = "video",
|
|
DATE = "date",
|
|
CHECKBOX = "checkbox",
|
|
SWITCH = "switch",
|
|
SELECT = "select",
|
|
HTML = "html",
|
|
}
|
|
|
|
export const ActionColumnTypes = [
|
|
ColumnTypes.BUTTON,
|
|
ColumnTypes.ICON_BUTTON,
|
|
ColumnTypes.MENU_BUTTON,
|
|
ColumnTypes.EDIT_ACTIONS,
|
|
ColumnTypes.HTML,
|
|
];
|
|
|
|
export const FilterableColumnTypes = [
|
|
ColumnTypes.TEXT,
|
|
ColumnTypes.URL,
|
|
ColumnTypes.NUMBER,
|
|
ColumnTypes.DATE,
|
|
ColumnTypes.SELECT,
|
|
ColumnTypes.CHECKBOX,
|
|
ColumnTypes.SWITCH,
|
|
ColumnTypes.HTML,
|
|
];
|
|
|
|
export const DEFAULT_BUTTON_COLOR = "rgb(3, 179, 101)";
|
|
|
|
export const DEFAULT_BUTTON_LABEL = "Action";
|
|
|
|
export const DEFAULT_MENU_VARIANT = "PRIMARY";
|
|
|
|
export const DEFAULT_MENU_BUTTON_LABEL = "Open menu";
|
|
|
|
export interface TransientDataPayload {
|
|
[key: string]: string | number | boolean;
|
|
__originalIndex__: number;
|
|
}
|
|
|
|
export interface OnColumnEventArgs {
|
|
rowIndex: number;
|
|
action: string;
|
|
onComplete?: () => void;
|
|
triggerPropertyName: string;
|
|
eventType: EventType;
|
|
row?: Record<string, unknown>;
|
|
additionalData?: Record<string, unknown>;
|
|
}
|
|
|
|
export const ICON_NAMES = Object.keys(IconNames).map(
|
|
(name: string) => IconNames[name as keyof typeof IconNames],
|
|
);
|
|
|
|
export type ButtonColumnActions = ColumnAction & {
|
|
eventType: EventType;
|
|
iconName?: IconName;
|
|
variant: ButtonVariant;
|
|
backgroundColor?: string;
|
|
iconAlign?: Alignment;
|
|
borderRadius?: string;
|
|
isVisible?: boolean;
|
|
isDisabled?: boolean;
|
|
boxShadow?: string;
|
|
};
|
|
|
|
export enum DateInputFormat {
|
|
EPOCH = "Epoch",
|
|
MILLISECONDS = "Milliseconds",
|
|
}
|
|
|
|
export enum MomentDateInputFormat {
|
|
MILLISECONDS = "x",
|
|
SECONDS = "X",
|
|
}
|
|
|
|
export const defaultEditableCell: EditableCell = {
|
|
column: "",
|
|
index: -1,
|
|
inputValue: "",
|
|
value: "",
|
|
initialValue: "",
|
|
[ORIGINAL_INDEX_KEY]: -1,
|
|
};
|
|
|
|
export const DEFAULT_COLUMN_NAME = "Table Column";
|
|
|
|
export const ALLOW_TABLE_WIDGET_SERVER_SIDE_FILTERING =
|
|
FEATURE_FLAG["release_table_serverside_filtering_enabled"];
|