Merge pull request #38850 from appsmithorg/release

27/01 Daily Promotion
appsmithorg · Jan 27, 2025 · da86a06 · da86a06
2 parents c026f33 + 56018b0
commit da86a06
Show file tree

Hide file tree

Showing 118 changed files with 2,349 additions and 1,871 deletions.
diff --git a/.../e2e/Regression/ClientSide/Widgets/TableV2/TableV2_Derived_Column_Data_validation_spec.js b/.../e2e/Regression/ClientSide/Widgets/TableV2/TableV2_Derived_Column_Data_validation_spec.js
@@ -7,7 +7,6 @@ const commonlocators = require("../../../../../locators/commonlocators.json");
 import {
   agHelper,
   apiPage,
-  entityExplorer,
   propPane,
 } from "../../../../../support/Objects/ObjectsCore";
 
@@ -116,6 +115,38 @@ describe(
       // verify customColumn is visible in the table
       cy.get(".draggable-header:contains('CustomColumn')").should("be.visible");
       cy.closePropertyPane();
+      cy.deleteColumn("customColumn1");
+    });
+
+    it("5. Verify computed value with try-catch blocks handles missing nested properties", function () {
+      cy.openPropertyPane("tablewidgetv2");
+
+      // Set table data with nested object and missing property
+      propPane.UpdatePropertyFieldValue(
+        "Table data",
+        `{{[{"name": "Rahul", age: {value: 31}}, {"name": "Jacq", age: {}}, {"name": "John"}]}}`,
+      );
+
+      cy.editColumn("age");
+      propPane.UpdatePropertyFieldValue(
+        "Computed value",
+        "{{currentRow.age.value}}",
+      );
+
+      cy.readTableV2data(0, 1).then((val) => {
+        expect(val).to.equal("31");
+      });
+
+      cy.readTableV2data(1, 1).then((val) => {
+        expect(val).to.equal("");
+      });
+
+      cy.readTableV2data(2, 1).then((val) => {
+        expect(val).to.equal("");
+      });
+
+      // Clean up
+      cy.backFromPropertyPanel();
     });
   },
 );
diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
@@ -57,7 +57,7 @@ const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
 
         {isLoading && (
           <span aria-hidden={!isLoading ? true : undefined} data-loader="">
-            <Spinner />
+            <Spinner size={size} />
             <span {...visuallyHiddenProps}>{loadingText}</span>
           </span>
         )}

diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts
@@ -40,7 +40,7 @@ export interface ButtonProps extends HeadlessButtonProps {
   /** Size of the button
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Exclude<keyof typeof SIZES, "large">;
   /** Indicates if the button should be disabled when the form is invalid */
   disableOnInvalidForm?: boolean;
   /** Indicates if the button should reset the form when clicked */

diff --git a/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx b/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx
@@ -1,6 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button, Flex, BUTTON_VARIANTS, COLORS, SIZES } from "@appsmith/wds";
+import {
+  Button,
+  Flex,
+  BUTTON_VARIANTS,
+  COLORS,
+  SIZES,
+  type ButtonProps,
+} from "@appsmith/wds";
 import { objectKeys } from "@appsmith/utils";
 
 /**
@@ -59,33 +66,45 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-6">
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button icon="star" key={size} size={size} />
           ))}
       </Flex>
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button icon="star" key={size} size={size}>
               {size}
             </Button>
           ))}
       </Flex>
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button icon="star" iconPosition="end" key={size} size={size}>
               {size}
             </Button>
           ))}
       </Flex>
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button key={size} size={size}>
               {size}

diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts b/app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts
@@ -8,7 +8,7 @@ export interface ComboBoxProps
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
 
   /** The content to display as the placeholder. */
   placeholder?: string;

diff --git a/...client/packages/design-system/widgets/src/components/Datepicker/src/DatepickerTrigger.tsx b/...client/packages/design-system/widgets/src/components/Datepicker/src/DatepickerTrigger.tsx
@@ -9,7 +9,7 @@ import dateInputStyles from "./styles.module.css";
 
 interface DatepickerTriggerProps {
   isLoading?: boolean;
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
   isDisabled?: boolean;
 }
 

diff --git a/app/client/packages/design-system/widgets/src/components/Datepicker/src/types.ts b/app/client/packages/design-system/widgets/src/components/Datepicker/src/types.ts
@@ -11,7 +11,7 @@ export interface DatePickerProps<T extends DateValue>
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
   /**
    * className for the popover
    */

diff --git a/...t/packages/design-system/widgets/src/components/Datepicker/stories/Datepicker.stories.tsx b/...t/packages/design-system/widgets/src/components/Datepicker/stories/Datepicker.stories.tsx
@@ -4,7 +4,7 @@ import { Button, Flex, SIZES } from "@appsmith/wds";
 import { parseDate } from "@internationalized/date";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { DatePicker } from "../src";
+import { DatePicker, type DatePickerProps, type DateValue } from "../src";
 /**
  * A date picker allows a user to select a date.
  */
@@ -44,7 +44,10 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="sizing-60">
       {objectKeys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+        .filter(
+          (size): size is NonNullable<DatePickerProps<DateValue>["size"]> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <DatePicker key={size} popoverClassName="sb-unstyled" size={size} />
         ))}

diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import type { Component, Ref } from "react";
 import React, { Suspense, forwardRef, lazy, useMemo } from "react";
 
@@ -7,7 +8,7 @@ import type { IconProps } from "./types";
 import { FallbackIcon } from "./FallbackIcon";
 
 const _Icon = (props: IconProps, ref: Ref<Component>) => {
-  const { color, name, size = "medium", ...rest } = props;
+  const { className, color, name, size = "medium", ...rest } = props;
 
   const Icon = useMemo(() => {
     const pascalName = ICONS[name];
@@ -16,7 +17,9 @@ const _Icon = (props: IconProps, ref: Ref<Component>) => {
       import("@tabler/icons-react").then((module) => {
         if (pascalName in module) {
           return {
-            default: module[pascalName] as React.ComponentType,
+            default: module[pascalName] as React.ComponentType<{
+              className?: string;
+            }>,
           };
         }
 
@@ -29,14 +32,14 @@ const _Icon = (props: IconProps, ref: Ref<Component>) => {
     <Suspense
       fallback={
         <FallbackIcon
-          className={styles.icon}
+          className={clsx(styles.icon, className)}
           data-size={Boolean(size) ? size : undefined}
           {...rest}
         />
       }
     >
       <Icon
-        className={styles.icon}
+        className={clsx(styles.icon, className)}
         data-color={color ? color : undefined}
         data-icon=""
         data-size={Boolean(size) ? size : undefined}

diff --git a/...t/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx b/...t/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
@@ -6,6 +6,7 @@ import {
   SIZES,
   BUTTON_VARIANTS,
   COLORS,
+  type IconButtonProps,
 } from "@appsmith/wds";
 import { objectKeys } from "@appsmith/utils";
 
@@ -66,7 +67,10 @@ export const Sizes: Story = {
   render: () => (
     <Flex alignItems="start" gap="spacing-2">
       {objectKeys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+        .filter(
+          (size): size is NonNullable<IconButtonProps["size"]> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <IconButton icon="star" key={size} size={size} />
         ))}

diff --git a/app/client/packages/design-system/widgets/src/components/InlineButtons/src/types.ts b/app/client/packages/design-system/widgets/src/components/InlineButtons/src/types.ts
@@ -34,7 +34,7 @@ export interface InlineButtonsProps<T>
   /** Size of buttons
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Exclude<keyof typeof SIZES, "large">;
 }
 
 export interface InlineButtonsItem

diff --git a/...ages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx b/...ages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx
@@ -66,8 +66,11 @@ export const IndividualSemantic: Story = {
 export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="100%">
-      {Object.keys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+      {objectKeys(SIZES)
+        .filter(
+          (size): size is Exclude<keyof typeof SIZES, "xSmall" | "large"> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <InlineButtons items={itemList} key={size} size={size} />
         ))}

diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/types.ts b/app/client/packages/design-system/widgets/src/components/Input/src/types.ts
@@ -10,7 +10,7 @@ interface CommonInputProps {
   suffix?: React.ReactNode;
   isLoading?: boolean;
   isReadOnly?: boolean;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }
 
 export interface InputProps

diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts
@@ -19,7 +19,7 @@ export interface ModalProps
   /** size of the modal
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
   /** The children of the component. */
   children: ReactNode;
   /** Additional props to be passed to the overlay */

diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
@@ -8,5 +8,5 @@ export interface SelectProps
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
 }
diff --git a/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx b/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx
@@ -1,6 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Select, Button, Flex, SIZES, ListBoxItem } from "@appsmith/wds";
+import {
+  Select,
+  Button,
+  Flex,
+  SIZES,
+  ListBoxItem,
+  type SelectProps,
+} from "@appsmith/wds";
 
 import { selectItems, selectItemsWithIcons } from "./selectData";
 
@@ -40,7 +47,10 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="sizing-60">
       {Object.keys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+        .filter(
+          (size): size is NonNullable<SelectProps["size"]> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <Select key={size} label={size} placeholder={size} size={size}>
             {selectItems.map((item) => (

diff --git a/app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx b/app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx
@@ -1,10 +1,14 @@
 import React from "react";
 
-import { Icon } from "../../Icon";
+import { Icon, type IconProps } from "../../Icon";
 import styles from "./styles.module.css";
 
-const Spinner = () => {
-  return <Icon className={styles.spinner} name="loader" size="xSmall" />;
+interface SpinnerProps {
+  size?: Exclude<IconProps["size"], "large">;
+}
+
+const Spinner = ({ size = "medium" }: SpinnerProps) => {
+  return <Icon className={styles.spinner} name="loader" size={size} />;
 };
 
 Spinner.displayName = "Spinner";

diff --git a/app/client/packages/design-system/widgets/src/components/Spinner/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Spinner/src/styles.module.css
@@ -1,7 +1,5 @@
 .spinner {
   animation: spin 1s linear infinite;
-  height: 1.5em;
-  width: 1.5em;
 }
 
 @keyframes spin {

diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts b/app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts
@@ -10,5 +10,5 @@ export interface TextAreaProps extends AriaTextFieldProps, FieldProps {
   rows?: number;
   fieldClassName?: string;
   inputClassName?: string;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }
diff --git a/app/client/packages/design-system/widgets/src/components/TextField/src/types.ts b/app/client/packages/design-system/widgets/src/components/TextField/src/types.ts
@@ -6,5 +6,5 @@ export interface TextFieldProps extends AriaTextFieldProps, FieldProps {
   placeholder?: string;
   suffix?: ReactNode;
   prefix?: ReactNode;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }
diff --git a/app/client/packages/design-system/widgets/src/components/TimeField/src/types.ts b/app/client/packages/design-system/widgets/src/components/TimeField/src/types.ts
@@ -10,5 +10,5 @@ export interface TimeFieldProps<T extends TimeValue>
     FieldProps {
   suffix?: ReactNode;
   prefix?: ReactNode;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }
diff --git a/app/client/packages/design-system/widgets/src/components/ToolbarButtons/src/types.ts b/app/client/packages/design-system/widgets/src/components/ToolbarButtons/src/types.ts
@@ -33,7 +33,7 @@ export interface ToolbarButtonsProps<T>
   /** Size of buttons
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Exclude<keyof typeof SIZES, "large">;
   /** Alignment of buttons inside the container
    * @default start
    */

diff --git a/...es/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx b/...es/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx
@@ -70,10 +70,14 @@ export const Semantic: Story = {
 export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="100%">
-      {Object.keys(SIZES)
+      {objectKeys(SIZES)
         .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
-          <ToolbarButtons items={itemList} key={size} size={size} />
+          <ToolbarButtons
+            items={itemList}
+            key={size}
+            size={size as Exclude<keyof typeof SIZES, "large">}
+          />
         ))}
     </Flex>
   ),