chore: Refactor WDSTableWidget with basic features

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts

@@ -67,7 +67,7 @@ export class LightModeTheme implements ColorModeTheme {
       bgNegative: this.bgNegative.to("sRGB").toString(),
       bgNegativeHover: this.bgNegativeHover.to("sRGB").toString(),
       bgNegativeActive: this.bgNegativeActive.to("sRGB").toString(),
-      bgNegativeSubtle: this.bgNegativeActive.to("sRGB").toString(),
+      bgNegativeSubtle: this.bgNegativeSubtle.to("sRGB").toString(),
       bgNegativeSubtleHover: this.bgNegativeSubtleHover.to("sRGB").toString(),
       bgNegativeSubtleActive: this.bgNegativeSubtleActive.to("sRGB").toString(),
       bgWarning: this.bgWarning.to("sRGB").toString(),

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts

@@ -476,7 +476,7 @@ describe("bgNegativeSubtle color", () => {
     const { bgNegativeSubtle } = new LightModeTheme(
       "oklch(0.55 0.22 27)",
     ).getColors();
-    expect(bgNegativeSubtle).toEqual("rgb(80.074% 0% 19.209%)");
+    expect(bgNegativeSubtle).toEqual("rgb(100% 89.936% 89.52%)");
   });
 });
 

app/client/packages/design-system/widgets/src/components/Link/index.ts

@@ -0,0 +1 @@
+export * from "./src";

app/client/packages/design-system/widgets/src/components/Link/src/Link.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Text } from "../../Text";
+import type { LinkProps } from "./types";
+import styles from "./styles.module.css";
+
+export function Link(props: LinkProps) {
+  const { children, href, rel, target, ...rest } = props;
+
+  return (
+    <Text {...rest}>
+      <a className={styles.link} href={href} rel={rel} target={target}>
+        {children}
+      </a>
+    </Text>
+  );
+}

app/client/packages/design-system/widgets/src/components/Link/src/index.ts

@@ -0,0 +1 @@
+export * from "./Link";

app/client/packages/design-system/widgets/src/components/Link/src/styles.module.css

@@ -0,0 +1,10 @@
+.link {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: currentColor;
+    text-decoration-color: currentColor;
+  }
+}

app/client/packages/design-system/widgets/src/components/Link/src/types.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+
+import type { TextProps } from "../../Text";
+
+export interface LinkProps extends TextProps {
+  href?: string;
+  target?: ComponentProps<"a">["target"];
+  rel?: string;
+}

app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx

@@ -19,7 +19,7 @@ const _Text = (props: TextProps, ref: Ref<HTMLParagraphElement>) => {
     isItalic = false,
     lineClamp,
     style,
-    textAlign = "left",
+    textAlign = "start",
     title,
     variant = "body",
     ...rest

app/client/packages/design-system/widgets/src/components/Text/src/index.ts

@@ -1 +1,2 @@
 export { Text } from "./Text";
+export type { TextProps } from "./types";

app/client/packages/design-system/widgets/src/components/Text/src/types.ts

@@ -29,7 +29,7 @@ export interface TextProps {
   /** Sets the horizontal alignment of the inline-level content inside a block element or table-cell box. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
    * @default left
    */
-  textAlign?: "left" | "center" | "right";
+  textAlign?: "start" | "center" | "end" | "left" | "right";
   /** Allows limiting of the contents of a block to the specified number of lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp). */
   lineClamp?: number;
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */

app/client/packages/design-system/widgets/src/index.ts

@@ -21,6 +21,7 @@ export * from "./components/ActionGroup";
 export * from "./components/ButtonGroup";
 export * from "./components/Select";
 export * from "./components/ContextualHelp";
+export * from "./components/Link";
 
 export * from "./utils";
 export * from "./styles";

app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx

@@ -201,22 +201,24 @@ class PrimaryColumnsControlV2 extends BaseControl<ControlProps, State> {
     const isFocused =
       !_.isNull(this.state.focusedIndex) &&
       _.includes(this.state.duplicateColumnIds, column?.id);
+
     return (
       <>
         <div className="flex pt-2 pb-2 justify-between">
           <div>{Object.values(reorderedColumns).length} columns</div>
-          {this.isEditableColumnPresent() && (
-            <EdtiableCheckboxWrapper
-              className="flex t--uber-editable-checkbox"
-              rightPadding={this.state.hasScrollableList}
-            >
-              <span className="mr-2">Editable</span>
-              <Checkbox
-                isSelected={this.isAllColumnsEditable()}
-                onChange={this.toggleAllColumnsEditability}
-              />
-            </EdtiableCheckboxWrapper>
-          )}
+          {this.props.widgetProperties.type !== "WDS_TABLE_WIDGET" &&
+            this.isEditableColumnPresent() && (
+              <EdtiableCheckboxWrapper
+                className="flex t--uber-editable-checkbox"
+                rightPadding={this.state.hasScrollableList}
+              >
+                <span className="mr-2">Editable</span>
+                <Checkbox
+                  isSelected={this.isAllColumnsEditable()}
+                  onChange={this.toggleAllColumnsEditability}
+                />
+              </EdtiableCheckboxWrapper>
+            )}
         </div>
         <div className="flex flex-col w-full gap-1">
           <EvaluatedValuePopupWrapper {...this.props} isFocused={isFocused}>
@@ -233,26 +235,34 @@ class PrimaryColumnsControlV2 extends BaseControl<ControlProps, State> {
               renderComponent={(props: any) =>
                 DraggableListCard({
                   ...props,
-                  showCheckbox: true,
+                  showCheckbox:
+                    this.props.widgetProperties.type !== "WDS_TABLE_WIDGET" &&
+                    true,
                   placeholder: "Column title",
                 })
               }
               toggleCheckbox={this.toggleCheckbox}
-              toggleVisibility={this.toggleVisibility}
+              toggleVisibility={
+                this.props.widgetProperties.type !== "WDS_TABLE_WIDGET"
+                  ? this.toggleVisibility
+                  : undefined
+              }
               updateFocus={this.updateFocus}
               updateItems={this.updateItems}
               updateOption={this.updateOption}
             />
           </EvaluatedValuePopupWrapper>
-          <Button
-            className="self-end t--add-column-btn"
-            kind="tertiary"
-            onClick={this.addNewColumn}
-            size="sm"
-            startIcon="plus"
-          >
-            Add new column
-          </Button>
+          {this.props.widgetProperties.type !== "WDS_TABLE_WIDGET" && (
+            <Button
+              className="self-end t--add-column-btn"
+              kind="tertiary"
+              onClick={this.addNewColumn}
+              size="sm"
+              startIcon="plus"
+            >
+              Add new column
+            </Button>
+          )}
         </div>
       </>
     );

app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts

@@ -17,6 +17,8 @@ import type {
 import type { ColumnTypes } from "../constants";
 import type { TimePrecision } from "widgets/DatePickerWidget2/constants";
 import { generateReactKey } from "widgets/WidgetUtils";
+import type { PlainTextCellProps } from "./cellComponents/PlainTextCell";
+import type { ButtonCellProps } from "./cellComponents/ButtonCell";
 
 export interface TableSizes {
   COLUMN_HEADER_HEIGHT: number;
@@ -112,8 +114,8 @@ export interface TableStyles {
 export type CompactMode = keyof typeof CompactModeTypes;
 export type Condition = keyof typeof ConditionFunctions | "";
 export type Operator = keyof typeof OperatorTypes;
-export type CellAlignment = keyof typeof CellAlignmentTypes;
-export type VerticalAlignment = keyof typeof VerticalAlignmentTypes;
+export type CellAlignment = "start" | "center" | "end";
+export type VerticalAlignment = "start" | "center" | "end";
 export type ImageSize = keyof typeof ImageSizes;
 
 export interface ReactTableFilter {
@@ -153,7 +155,7 @@ export interface CellWrappingProperties {
 }
 
 export interface ButtonCellProperties {
-  buttonVariant: ButtonVariant;
+  buttonVariant: ButtonCellProps["buttonVariant"];
   buttonColor?: string;
   buttonLabel?: string;
   isCompact?: boolean;
@@ -212,24 +214,17 @@ export interface BaseCellProperties {
   cellBackground?: string;
   isVisible?: boolean;
   isDisabled?: boolean;
-  borderRadius: string;
-  boxShadow: string;
   isCellVisible: boolean;
   isCellDisabled?: boolean;
 }
 
 export interface CellLayoutProperties
-  extends EditActionCellProperties,
-    InlineEditingCellProperties,
-    CellWrappingProperties,
+  extends CellWrappingProperties,
     ButtonCellProperties,
     URLCellProperties,
-    MenuButtonCellProperties,
-    SelectCellProperties,
-    ImageCellProperties,
-    DateCellProperties,
-    CurrencyCellProperties,
-    BaseCellProperties {}
+    BaseCellProperties {
+  cellColor?: "default" | PlainTextCellProps["cellColor"];
+}
 
 export interface TableColumnMetaProps {
   isHidden: boolean;
@@ -280,7 +275,6 @@ export interface ColumnBaseProperties {
   enableFilter?: boolean;
   enableSort?: boolean;
   isDerived: boolean;
-  computedValue: string;
   isCellVisible?: boolean;
   isAscOrder?: boolean;
   alias: string;
@@ -353,38 +347,26 @@ export interface CurrencyColumnProperties {
 export interface ColumnProperties
   extends ColumnBaseProperties,
     ColumnStyleProperties,
-    DateColumnProperties,
-    ColumnEditabilityProperties,
-    CurrencyColumnProperties,
-    EditActionColumnProperties {
+    ColumnEditabilityProperties {
   allowSameOptionsInNewRow?: boolean;
   newRowSelectOptions?: DropdownOption[];
   buttonLabel?: string;
-  menuButtonLabel?: string;
   buttonColor?: string;
   onClick?: string;
   dropdownOptions?: string;
   onOptionChange?: string;
   displayText?: string;
   buttonVariant?: ButtonVariant;
-  isCompact?: boolean;
-  menuItems?: MenuItems;
-  menuVariant?: ButtonVariant;
-  menuColor?: string;
-  borderRadius?: ButtonBorderRadius;
-  boxShadow?: string;
-  boxShadowColor?: string;
   iconName?: IconName;
-  menuButtoniconName?: IconName;
   iconAlign?: Alignment;
   onItemClicked?: (onClick: string | undefined) => void;
   iconButtonStyle?: ButtonStyleType;
   imageSize?: ImageSize;
   sticky?: StickyType;
   getVisibleItems?: () => Array<MenuItem>;
-  menuItemsSource?: MenuItemsSource;
   configureMenuItems?: ConfigureMenuItems;
   sourceData?: Array<Record<string, unknown>>;
+  cellColor?: PlainTextCellProps["cellColor"];
 }
 
 export const ConditionFunctions: {
@@ -494,16 +476,13 @@ export enum IMAGE_VERTICAL_ALIGN {
 }
 
 export interface BaseCellComponentProps {
-  compactMode: string;
   isHidden: boolean;
   allowCellWrapping?: boolean;
   horizontalAlignment?: CellAlignment;
   verticalAlignment?: VerticalAlignment;
   cellBackground?: string;
   isCellVisible: boolean;
   fontStyle?: string;
-  textColor?: string;
-  textSize?: string;
   isCellDisabled?: boolean;
 }
 
@@ -513,50 +492,13 @@ export enum CheckboxState {
   PARTIAL = 2,
 }
 
-export const scrollbarOnHoverCSS = `
-  .track-horizontal {
-    height: 6px;
-    bottom: 1px;
-    width: 100%;
-    opacity: 0;
-    transition: opacity 0.15s ease-in;
-    &:active {
-      opacity: 1;
-    }
-  }
-  &:hover {
-    .track-horizontal {
-      opacity: 1;
-    }
-  }
-  .thumb-horizontal {
-    &:hover, &:active {
-      height: 6px !important;
-    }
-  }
-`;
-
 export const MULTISELECT_CHECKBOX_WIDTH = 40;
 
 export enum AddNewRowActions {
   SAVE = "SAVE",
   DISCARD = "DISCARD",
 }
 
-export const EDITABLE_CELL_PADDING_OFFSET = 8;
-
-export const TABLE_SCROLLBAR_WIDTH = 10;
-export const TABLE_SCROLLBAR_HEIGHT = 8;
-
-export const POPOVER_ITEMS_TEXT_MAP = {
-  SORT_ASC: "Sort column ascending",
-  SORT_DSC: "Sort column descending",
-  FREEZE_LEFT: "Freeze column left",
-  FREEZE_RIGHT: "Freeze column right",
-};
-
-export const HEADER_MENU_PORTAL_CLASS = ".header-menu-portal";
-export const MENU_CONTENT_CLASS = ".menu-content";
 export const DEFAULT_FILTER = {
   id: generateReactKey(),
   column: "",

app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx

@@ -7,7 +7,7 @@ import type {
 import type { ReactElementType } from "react-window";
 import "simplebar-react/dist/simplebar.min.css";
 import type { ReactTableColumnProps, TableSizes } from "./Constants";
-import { MULTISELECT_CHECKBOX_WIDTH, TABLE_SCROLLBAR_WIDTH } from "./Constants";
+import { MULTISELECT_CHECKBOX_WIDTH } from "./Constants";
 import type { TableColumnHeaderProps } from "./TableHeader/TableColumnHeader";
 import TableColumnHeader from "./TableHeader/TableColumnHeader";
 import { TableBody } from "./TableBody";
@@ -86,7 +86,7 @@ const StaticTable = (props: StaticTableProps) => {
         selectedRowIndex={props.selectedRowIndex}
         selectedRowIndices={props.selectedRowIndices}
         useVirtual={props.useVirtual}
-        width={props.width - TABLE_SCROLLBAR_WIDTH / 2}
+        width={props.width}
       />
     </>
   );