From a5a0e0d85d904cb5c2c9f0c4640d79e9ec00a79b Mon Sep 17 00:00:00 2001
From: Paul Li <wmdev0808@gmail.com>
Date: Tue, 4 May 2021 15:48:40 -0400
Subject: [PATCH] FEATURE-4135 : Table URL columns pretty link

-- Add displayText field into property pane
-- Display urls based on displayText
-- Fix url alignment issue
---
 .../TableComponent/AutoToolTipComponent.tsx    |  2 +-
 .../appsmith/TableComponent/Constants.ts       |  2 ++
 .../TableComponent/TableStyledWrappers.tsx     |  3 +++
 .../appsmith/TableComponent/TableUtilities.tsx | 10 +++++++++-
 .../TableWidget/TablePropertyPaneConfig.ts     | 18 ++++++++++++++++++
 app/client/src/widgets/TableWidget/index.tsx   |  4 ++++
 6 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
index f8f9d93fba..1380448883 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
@@ -85,7 +85,7 @@ function AutoToolTipComponent(props: Props) {
       updateToolTip(false);
     }
   }, [ref]);
-  if (props.columnType === ColumnTypes.URL) {
+  if (props.columnType === ColumnTypes.URL && props.title) {
     return <LinkWrapper {...props} />;
   }
   return (
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts b/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts
index a8dbb7d807..88c74bac35 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts
@@ -94,6 +94,7 @@ export interface CellLayoutProperties {
   buttonStyle?: string;
   buttonLabelColor?: string;
   buttonLabel?: string;
+  displayText?: string;
 }
 
 export interface TableColumnMetaProps {
@@ -144,6 +145,7 @@ export interface ColumnProperties {
   inputFormat?: string;
   dropdownOptions?: string;
   onOptionChange?: string;
+  displayText?: string;
 }
 
 export const ConditionFunctions: {
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
index e516d2d432..75d98bbd82 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
@@ -413,6 +413,9 @@ export const CellWrapper = styled.div<{
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: ${(props) =>
+      props?.cellProperties?.horizontalAlignment &&
+      TEXT_ALIGN[props?.cellProperties?.horizontalAlignment]};
   }
   .hidden-icon {
     display: none;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
index e639867e84..50eae8e479 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
@@ -112,7 +112,15 @@ export const renderCell = (
           tableWidth={tableWidth}
           title={value.toString()}
         >
-          {value.toString()}
+          {value &&
+          columnType === ColumnTypes.URL &&
+          cellProperties.displayText ? (
+            <a href={value.toString()} rel="noreferrer" target="_blank">
+              {cellProperties.displayText}
+            </a>
+          ) : (
+            value.toString()
+          )}
         </AutoToolTipComponent>
       );
   }
diff --git a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
index 2273b8ed17..174bd36a60 100644
--- a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
+++ b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
@@ -201,6 +201,24 @@ export default [
                   isBindProperty: false,
                   isTriggerProperty: false,
                 },
+                {
+                  propertyName: "displayText",
+                  label: "Display Text",
+                  controlType: "INPUT_TEXT",
+                  customJSControl: "COMPUTE_VALUE",
+                  updateHook: updateDerivedColumnsHook,
+                  hidden: (props: TableWidgetProps, propertyPath: string) => {
+                    const baseProperty = getBasePropertyPath(propertyPath);
+                    const columnType = get(
+                      props,
+                      `${baseProperty}.columnType`,
+                      "",
+                    );
+                    return columnType !== "url";
+                  },
+                  isBindProperty: false,
+                  isTriggerProperty: false,
+                },
                 {
                   propertyName: "computedValue",
                   label: "Computed Value",
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index ba4f1acb18..45340af266 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -120,6 +120,10 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       textSize: this.getPropertyValue(columnProperties.textSize, rowIndex),
       textColor: this.getPropertyValue(columnProperties.textColor, rowIndex),
       fontStyle: this.getPropertyValue(columnProperties.fontStyle, rowIndex), //Fix this
+      displayText: this.getPropertyValue(
+        columnProperties.displayText,
+        rowIndex,
+      ),
     };
     return cellProperties;
   };