fix: Enhance URL handling in table by rendering URL column types with <a> tag.

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -546,7 +546,7 @@ export enum IMAGE_VERTICAL_ALIGN {
 }
 
 export interface BaseCellComponentProps {
-  compactMode: string;
+  compactMode: CompactModeTypes;
   isHidden: boolean;
   allowCellWrapping?: boolean;
   horizontalAlignment?: CellAlignment;

app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx

@@ -137,7 +137,7 @@ interface Props {
   children: React.ReactNode;
   title: string;
   tableWidth?: number;
-  columnType?: string;
+  columnType?: ColumnTypes;
   className?: string;
   compactMode?: string;
   allowCellWrapping?: boolean;
@@ -152,51 +152,35 @@ interface Props {
   isCellDisabled?: boolean;
 }
 
-function LinkWrapper(props: Props) {
-  const content = useToolTip(props.children, props.title);
-
-  return (
-    <CellWrapper
-      allowCellWrapping={props.allowCellWrapping}
-      cellBackground={props.cellBackground}
-      className="cell-wrapper"
-      compactMode={props.compactMode}
-      fontStyle={props.fontStyle}
-      horizontalAlignment={props.horizontalAlignment}
-      isCellDisabled={props.isCellDisabled}
-      isCellVisible={props.isCellVisible}
-      isHidden={props.isHidden}
-      isHyperLink
-      isTextType
-      onClick={(e: React.MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation();
-        window.open(props.url, "_blank");
-      }}
-      textColor={props.textColor}
-      textSize={props.textSize}
-      verticalAlignment={props.verticalAlignment}
-    >
-      <div className="link-text">{content}</div>
-      <OpenNewTabIconWrapper className="hidden-icon">
-        <OpenNewTabIcon />
-      </OpenNewTabIconWrapper>
-    </CellWrapper>
-  );
-}
-
 export function AutoToolTipComponent(props: Props) {
   const content = useToolTip(
     props.children,
     props.title,
     props.columnType === ColumnTypes.BUTTON,
   );
 
-  if (props.columnType === ColumnTypes.URL && props.title) {
-    return <LinkWrapper {...props} />;
-  }
+  const isHyperLink = props.columnType === ColumnTypes.URL;
+  let contentToRender;
+
+  switch (props.columnType) {
+    case ColumnTypes.BUTTON:
+      if (props.title) {
+        return content;
+      }
 
-  if (props.columnType === ColumnTypes.BUTTON && props.title) {
-    return content;
+      break;
+    case ColumnTypes.URL:
+      contentToRender = (
+        <>
+          <div className="link-text">{content}</div>
+          <OpenNewTabIconWrapper className="hidden-icon">
+            <OpenNewTabIcon />
+          </OpenNewTabIconWrapper>
+        </>
+      );
+      break;
+    default:
+      contentToRender = content;
   }
 
   return (
@@ -212,12 +196,21 @@ export function AutoToolTipComponent(props: Props) {
         isCellDisabled={props.isCellDisabled}
         isCellVisible={props.isCellVisible}
         isHidden={props.isHidden}
+        isHyperLink={isHyperLink}
         isTextType
+        onClick={
+          isHyperLink
+            ? (e: React.MouseEvent<HTMLDivElement>) => {
+                e.stopPropagation();
+                window.open(props.url, "_blank");
+              }
+            : undefined
+        }
         textColor={props.textColor}
         textSize={props.textSize}
         verticalAlignment={props.verticalAlignment}
       >
-        {content}
+        {contentToRender}
       </CellWrapper>
     </ColumnWrapper>
   );

app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { BasicCell, type PropType } from "./BasicCell";
+import { ColumnTypes } from "widgets/TableWidgetV2/constants";
+import { CompactModeTypes } from "widgets/TableWidget/component/Constants";
+
+describe("BasicCell Component", () => {
+  const defaultProps: PropType = {
+    value: "Test Value",
+    onEdit: jest.fn(),
+    isCellEditable: false,
+    hasUnsavedChanges: false,
+    columnType: ColumnTypes.TEXT,
+    url: "",
+    compactMode: CompactModeTypes.DEFAULT,
+    isHidden: false,
+    isCellVisible: true,
+    accentColor: "",
+    tableWidth: 100,
+    disabledEditIcon: false,
+    disabledEditIconMessage: "",
+  };
+
+  it("renders the value", () => {
+    render(<BasicCell {...defaultProps} />);
+    expect(screen.getByText("Test Value")).toBeInTheDocument();
+  });
+
+  it("renders a link when columnType is URL", () => {
+    render(
+      <BasicCell
+        {...defaultProps}
+        columnType={ColumnTypes.URL}
+        url="http://example.com"
+      />,
+    );
+    const link = screen.getByText("Test Value");
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "http://example.com");
+  });
+
+  it("calls onEdit when double-clicked", () => {
+    render(<BasicCell {...defaultProps} isCellEditable />);
+    fireEvent.doubleClick(screen.getByText("Test Value"));
+    expect(defaultProps.onEdit).toHaveBeenCalled();
+  });
+
+  it("forwards ref to the div element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<BasicCell {...defaultProps} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.tsx

@@ -1,12 +1,13 @@
 import type { Ref } from "react";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Tooltip } from "@blueprintjs/core";
 import styled from "styled-components";
-import type { BaseCellComponentProps } from "../Constants";
+import type { BaseCellComponentProps, CompactModeTypes } from "../Constants";
 import { TABLE_SIZES } from "../Constants";
 import { TooltipContentWrapper } from "../TableStyledWrappers";
 import AutoToolTipComponent from "./AutoToolTipComponent";
 import { importSvg } from "@appsmith/ads-old";
+import { ColumnTypes } from "widgets/TableWidgetV2/constants";
 
 const EditIcon = importSvg(
   async () => import("assets/icons/control/edit-variant1.svg"),
@@ -55,7 +56,7 @@ const Content = styled.div`
 const StyledEditIcon = styled.div<{
   accentColor?: string;
   backgroundColor?: string;
-  compactMode: string;
+  compactMode: CompactModeTypes;
   disabledEditIcon: boolean;
 }>`
   position: absolute;
@@ -74,12 +75,12 @@ const StyledEditIcon = styled.div<{
   }
 `;
 
-type PropType = BaseCellComponentProps & {
+export type PropType = BaseCellComponentProps & {
   accentColor: string;
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
-  columnType: string;
+  columnType: ColumnTypes;
   tableWidth: number;
   isCellEditable?: boolean;
   isCellEditMode?: boolean;
@@ -128,6 +129,14 @@ export const BasicCell = React.forwardRef(
       },
       [onEdit, disabledEditIcon, isCellEditable],
     );
+    const contentToRender = useMemo(() => {
+      switch (columnType) {
+        case ColumnTypes.URL:
+          return <a href={url}>{value}</a>;
+        default:
+          return value;
+      }
+    }, [columnType, url, value]);
 
     return (
       <Wrapper
@@ -157,7 +166,7 @@ export const BasicCell = React.forwardRef(
           url={url}
           verticalAlignment={verticalAlignment}
         >
-          <Content ref={contentRef}>{value}</Content>
+          <Content ref={contentRef}>{contentToRender}</Content>
         </StyledAutoToolTipComponent>
         {isCellEditable && (
           <StyledEditIcon

app/client/src/widgets/TableWidgetV2/component/cellComponents/PlainTextCell.tsx

@@ -39,7 +39,7 @@ export type RenderDefaultPropsType = BaseCellComponentProps & {
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
-  columnType: string;
+  columnType: ColumnTypes;
   tableWidth: number;
   isCellEditable: boolean;
   isCellEditMode?: boolean;

app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx

@@ -11,6 +11,7 @@ import {
 } from "../Constants";
 import { CellWrapper } from "../TableStyledWrappers";
 import { BasicCell } from "./BasicCell";
+import type { ColumnTypes } from "widgets/TableWidget/component/Constants";
 
 const StyledSelectComponent = styled(SelectComponent)<{
   accentColor: string;
@@ -61,7 +62,7 @@ type SelectProps = BaseCellComponentProps & {
   alias: string;
   accentColor: string;
   autoOpen: boolean;
-  columnType: string;
+  columnType: ColumnTypes;
   borderRadius: string;
   options?: DropdownOption[];
   onFilterChange: (