From 94cd991462ba58d114d9f7e7e14c70287a3bb8f8 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Mon, 17 Jan 2022 12:42:36 +0530
Subject: [PATCH] Fix: issue-2151 Clicking links in column description open the
 edit panel and then navigates to the link (#2237)

---
 .../DashboardDetails.component.tsx            | 53 +++++++--------
 .../EntityTable/EntityTable.component.tsx     | 64 +++++++++----------
 .../PipelineDetails.component.tsx             |  9 +--
 .../resources/ui/src/pages/tags/index.tsx     | 48 +++++++-------
 4 files changed, 89 insertions(+), 85 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
index fa93f105c3f..68ca8cd1c94 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@@ -398,29 +398,32 @@ const DashboardDetails = ({
                               {chart.chartType}
                             </td>
                             <td className="tw-group tableBody-cell tw-relative">
-                              <NonAdminAction
-                                html={getHtmlForNonAdminAction(Boolean(owner))}
-                                isOwner={hasEditAccess()}
-                                position="top">
-                                <div className="tw-inline-block">
-                                  <div
-                                    className="tw-cursor-pointer hover:tw-underline tw-flex"
-                                    data-testid="description"
-                                    onClick={() =>
-                                      handleUpdateChart(chart, index)
-                                    }>
-                                    <div>
-                                      {chart.description ? (
-                                        <RichTextEditorPreviewer
-                                          markdown={chart.description}
-                                        />
-                                      ) : (
-                                        <span className="tw-no-description">
-                                          No description added
-                                        </span>
-                                      )}
-                                    </div>
-                                    <button className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
+                              <div className="tw-inline-block">
+                                <div
+                                  className="tw-cursor-pointer tw-flex"
+                                  data-testid="description">
+                                  <div>
+                                    {chart.description ? (
+                                      <RichTextEditorPreviewer
+                                        markdown={chart.description}
+                                      />
+                                    ) : (
+                                      <span className="tw-no-description">
+                                        No description added
+                                      </span>
+                                    )}
+                                  </div>
+                                  <NonAdminAction
+                                    html={getHtmlForNonAdminAction(
+                                      Boolean(owner)
+                                    )}
+                                    isOwner={hasEditAccess()}
+                                    position="top">
+                                    <button
+                                      className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
+                                      onClick={() =>
+                                        handleUpdateChart(chart, index)
+                                      }>
                                       <SVGIcons
                                         alt="edit"
                                         icon="icon-edit"
@@ -428,9 +431,9 @@ const DashboardDetails = ({
                                         width="10px"
                                       />
                                     </button>
-                                  </div>
+                                  </NonAdminAction>
                                 </div>
-                              </NonAdminAction>
+                              </div>
                             </td>
                             <td
                               className="tw-group tw-relative tableBody-cell"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
index 8222f863303..9234664b5c1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
@@ -476,36 +476,36 @@ const EntityTable = ({
                       )}
                       {cell.column.id === 'description' && (
                         <div>
-                          <NonAdminAction
-                            html={getHtmlForNonAdminAction(Boolean(owner))}
-                            isOwner={hasEditAccess}
-                            position="top">
-                            <div className="tw-inline-block">
-                              <div
-                                className={classNames('tw-flex', {
-                                  'tw-cursor-pointer hover:tw-underline':
-                                    !isReadOnly,
-                                })}
-                                data-testid="description"
-                                id={`column-description-${index}`}
-                                onClick={() => {
-                                  if (!isReadOnly) {
-                                    handleEditColumn(row.original, row.id);
-                                  }
-                                }}>
-                                <div>
-                                  {cell.value ? (
-                                    <RichTextEditorPreviewer
-                                      markdown={cell.value}
-                                    />
-                                  ) : (
-                                    <span className="tw-no-description">
-                                      No description added
-                                    </span>
+                          <div className="tw-inline-block">
+                            <div
+                              className="tw-flex"
+                              data-testid="description"
+                              id={`column-description-${index}`}>
+                              <div>
+                                {cell.value ? (
+                                  <RichTextEditorPreviewer
+                                    markdown={cell.value}
+                                  />
+                                ) : (
+                                  <span className="tw-no-description">
+                                    No description added
+                                  </span>
+                                )}
+                              </div>
+                              {!isReadOnly ? (
+                                <NonAdminAction
+                                  html={getHtmlForNonAdminAction(
+                                    Boolean(owner)
                                   )}
-                                </div>
-                                {!isReadOnly ? (
-                                  <button className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
+                                  isOwner={hasEditAccess}
+                                  position="top">
+                                  <button
+                                    className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
+                                    onClick={() => {
+                                      if (!isReadOnly) {
+                                        handleEditColumn(row.original, row.id);
+                                      }
+                                    }}>
                                     <SVGIcons
                                       alt="edit"
                                       icon="icon-edit"
@@ -513,10 +513,10 @@ const EntityTable = ({
                                       width="10px"
                                     />
                                   </button>
-                                ) : null}
-                              </div>
+                                </NonAdminAction>
+                              ) : null}
                             </div>
-                          </NonAdminAction>
+                          </div>
                           {checkIfJoinsAvailable(row.original.name) && (
                             <div
                               className="tw-mt-3"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
index 5a7861f2652..905e099edbf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -350,9 +350,8 @@ const PipelineDetails = ({
                             </td>
                             <td className="tw-group tableBody-cell tw-relative">
                               <div
-                                className="tw-cursor-pointer hover:tw-underline tw-flex"
-                                data-testid="description"
-                                onClick={() => handleUpdateTask(task, index)}>
+                                className="tw-cursor-pointer tw-flex"
+                                data-testid="description">
                                 <div>
                                   {task.description ? (
                                     <RichTextEditorPreviewer
@@ -364,7 +363,9 @@ const PipelineDetails = ({
                                     </span>
                                   )}
                                 </div>
-                                <button className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
+                                <button
+                                  className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
+                                  onClick={() => handleUpdateTask(task, index)}>
                                   <SVGIcons
                                     alt="edit"
                                     icon="icon-edit"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index bb543e012ec..134bb28529a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -366,28 +366,28 @@ const TagsPage = () => {
                               <td className="tableBody-cell">
                                 <p>{tag.name}</p>
                               </td>
-                              <td
-                                className="tw-group tableBody-cell"
-                                onClick={() => {
-                                  setIsEditTag(true);
-                                  setEditTag(tag);
-                                }}>
-                                <NonAdminAction
-                                  position="left"
-                                  title={TITLE_FOR_NON_ADMIN_ACTION}>
-                                  <div className="tw-cursor-pointer hover:tw-underline tw-flex">
-                                    <div>
-                                      {tag.description ? (
-                                        <RichTextEditorPreviewer
-                                          markdown={tag.description}
-                                        />
-                                      ) : (
-                                        <span className="tw-no-description">
-                                          No description added
-                                        </span>
-                                      )}
-                                    </div>
-                                    <button className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
+                              <td className="tw-group tableBody-cell">
+                                <div className="tw-cursor-pointer tw-flex">
+                                  <div>
+                                    {tag.description ? (
+                                      <RichTextEditorPreviewer
+                                        markdown={tag.description}
+                                      />
+                                    ) : (
+                                      <span className="tw-no-description">
+                                        No description added
+                                      </span>
+                                    )}
+                                  </div>
+                                  <NonAdminAction
+                                    position="left"
+                                    title={TITLE_FOR_NON_ADMIN_ACTION}>
+                                    <button
+                                      className="tw-self-start tw-w-8 tw-h-auto tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none"
+                                      onClick={() => {
+                                        setIsEditTag(true);
+                                        setEditTag(tag);
+                                      }}>
                                       <SVGIcons
                                         alt="edit"
                                         data-testid="editTagDescription"
@@ -396,8 +396,8 @@ const TagsPage = () => {
                                         width="10px"
                                       />
                                     </button>
-                                  </div>
-                                </NonAdminAction>
+                                  </NonAdminAction>
+                                </div>
                                 <div className="tw-mt-1">
                                   <span className="tw-text-grey-muted tw-mr-1">
                                     Usage: