appsmithorg · ankitakinger · Sep 14, 2023 · Sep 12, 2023 · Sep 12, 2023 · Sep 13, 2023
@@ -96,7 +96,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.20",
+    "design-system": "npm:@appsmithorg/design-system@2.1.21",
     "design-system-old": "npm:@appsmithorg/design-system-old@1.1.11",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",

diff --git a/app/client/src/components/editorComponents/CloseEditor.tsx b/app/client/src/components/editorComponents/CloseEditor.tsx
@@ -41,7 +41,7 @@ function CloseEditor() {
     integrationTab = INTEGRATION_TABS.NEW;
   }
 
-  const handleClose = (e: React.MouseEvent) => {
+  const handleClose = () => {
     PerformanceTracker.startTracking(
       PerformanceTransactionName.CLOSE_SIDE_PANE,
       { path: location.pathname },
@@ -62,7 +62,6 @@ function CloseEditor() {
             params: getQueryParams(),
           })
         : redirectURL;
-    e.preventDefault();
     AnalyticsUtil.logEvent("BACK_BUTTON_CLICK", {
       type: "BACK_BUTTON",
       fromUrl: location.pathname,
@@ -77,7 +76,6 @@ function CloseEditor() {
       kind="secondary"
       onClick={handleClose}
       startIcon="arrow-left-line"
-      target="_self"
     >
       Back
     </StyledLink>

diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
@@ -501,8 +501,7 @@ function PopoverContent(props: PopoverContentProps) {
   if (hasError) {
     error = errors[0];
   }
-  const openDebugger = (event: React.MouseEvent) => {
-    event.preventDefault();
+  const openDebugger = () => {
     dispatch(showDebugger());
   };
 
@@ -545,14 +544,7 @@ function PopoverContent(props: PopoverContentProps) {
 
           {errorNavigationUrl ? (
             <AsyncFunctionErrorView>
-              <Link
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault();
-                  openDebugger(e);
-                }}
-              >
-                {`See error (${modText()} D)`}
-              </Link>
+              <Link onClick={openDebugger}>{`See error (${modText()} D)`}</Link>
               <Link target={"_self"} to={errorNavigationUrl}>
                 View source
               </Link>

diff --git a/app/client/src/components/editorComponents/Debugger/EntityLink.tsx b/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
@@ -177,17 +177,12 @@ function DebuggerEntityLink(props: {
   entityType: ENTITY_TYPE;
   uiComponent: DebuggerLinkUI;
 }) {
-  const onClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    props.onClick();
-  };
-
   switch (props.uiComponent) {
     case DebuggerLinkUI.ENTITY_TYPE:
       return (
         <span className="debugger-entity">
           [
-          <Link kind="secondary" onClick={onClick} to="">
+          <Link kind="secondary" onClick={props.onClick}>
             {props.name}
           </Link>
           ]
@@ -197,8 +192,7 @@ function DebuggerEntityLink(props: {
       return (
         <Link
           className="debugger-entity-link t--debugger-log-entity-link"
-          onClick={onClick}
-          to=""
+          onClick={props.onClick}
         >
           {props.name}
         </Link>

diff --git a/app/client/src/components/editorComponents/ProductAlertBanner.tsx b/app/client/src/components/editorComponents/ProductAlertBanner.tsx
@@ -97,9 +97,8 @@ const ProductAlertBanner = () => {
   if (message.learnMoreLink) {
     links.push({
       children: createMessage(LEARN_MORE),
-      onClick: () => {
-        window.open(message.learnMoreLink, "_blank");
-      },
+      to: message.learnMoreLink,
+      target: "_blank",
     });
   }
 

diff --git a/app/client/src/components/utils/helperComponents.tsx b/app/client/src/components/utils/helperComponents.tsx
@@ -42,8 +42,7 @@ export const StickyHeader = styled.div`
 export function BackButton({ goTo }: { goTo?: string }) {
   const history = useHistory();
 
-  const onBack = (e: any) => {
-    e.preventDefault();
+  const onBack = () => {
     if (goTo) {
       history.push(goTo);
       return;
@@ -55,7 +54,7 @@ export function BackButton({ goTo }: { goTo?: string }) {
     <StyledBackLink
       className="t--admin-settings-back-button"
       kind="secondary"
-      onClick={(e) => onBack(e)}
+      onClick={onBack}
       startIcon="back-control"
     >
       Back

diff --git a/app/client/src/pages/AdminSettings/FormGroup/group.tsx b/app/client/src/pages/AdminSettings/FormGroup/group.tsx
@@ -190,9 +190,8 @@ export default function Group({
                                 children: createMessage(LEARN_MORE),
                                 ...(setting.url && { to: setting.url }),
                                 ...(setting.action && {
-                                  onClick: (e: any) => {
+                                  onClick: () => {
                                     if (setting.action) {
-                                      e.preventDefault();
                                       setting.action(
                                         calloutDispatch,
                                       ) as unknown as React.MouseEventHandler<HTMLElement>;

diff --git a/app/client/src/pages/AdminSettings/LeftPane.tsx b/app/client/src/pages/AdminSettings/LeftPane.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import styled from "styled-components";
 import AdminConfig from "@appsmith/pages/AdminSettings/config";
 import {
@@ -9,7 +8,7 @@ import {
 import { adminSettingsCategoryUrl } from "RouteBuilder";
 import { useParams } from "react-router";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { Icon, Text } from "design-system";
+import { Link, Text } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { getCurrentUser } from "selectors/usersSelectors";
@@ -63,9 +62,13 @@ export const StyledLink = styled(Link)<{ $active: boolean }>`
   border-radius: var(--ads-v2-border-radius);
   background-color: ${(props) =>
     props.$active ? `var(--ads-v2-color-bg-muted)` : ""};
-  display: flex;
-  gap: 12px;
-  align-items: center;
+  text-decoration: none !important;
+
+  .ads-v2-text {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
 
   && {
     color: var(--ads-v2-color-fg);
@@ -149,6 +152,8 @@ export function Categories({
               onClick={() =>
                 onClickHandler(config.slug, showUpgradeTag || false)
               }
+              startIcon={showUpgradeTag ? "lock-2-line" : `${config.icon}`}
+              target="_self"
               to={
                 !parentCategory
                   ? adminSettingsCategoryUrl({ category: config.slug })
@@ -158,11 +163,6 @@ export function Categories({
                     })
               }
             >
-              {showUpgradeTag ? (
-                <Icon name="lock-2-line" />
-              ) : (
-                config?.icon && <Icon name={config?.icon} size="md" />
-              )}
               <SettingName active={active}>{config.title}</SettingName>
               {showUpgradeTag &&
                 (config?.isEnterprise ? <EnterpriseTag /> : <BusinessTag />)}

diff --git a/app/client/src/pages/AdminSettings/components.tsx b/app/client/src/pages/AdminSettings/components.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { Classes } from "@blueprintjs/core";
-import { Text } from "design-system";
+import { Link, Text } from "design-system";
 
 export const Wrapper = styled.div`
   flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px);
@@ -62,3 +62,7 @@ export const HelperText = styled(Text)`
   font-size: 12px;
   color: var(--ads-v2-color-fg-muted);
 `;
+
+export const NoUnderLineLink = styled(Link)`
+  text-decoration: none !important;
+`;
diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -458,37 +458,27 @@ export function ApplicationCard(props: ApplicationCardProps) {
     });
   }, [props.application.defaultPageId, params]);
 
-  const launchApp = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setURLParams();
-      history.push(
-        viewerURL({
-          pageId: props.application.defaultPageId,
-          params,
-        }),
-      );
-      dispatch(getCurrentUser());
-    },
-    [props.application.defaultPageId],
-  );
+  const launchApp = useCallback(() => {
+    setURLParams();
+    history.push(
+      viewerURL({
+        pageId: props.application.defaultPageId,
+        params,
+      }),
+    );
+    dispatch(getCurrentUser());
+  }, [props.application.defaultPageId]);
 
-  const editApp = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setURLParams();
-      history.push(
-        builderURL({
-          pageId: props.application.defaultPageId,
-          params,
-        }),
-      );
-      dispatch(getCurrentUser());
-    },
-    [props.application.defaultPageId],
-  );
+  const editApp = useCallback(() => {
+    setURLParams();
+    history.push(
+      builderURL({
+        pageId: props.application.defaultPageId,
+        params,
+      }),
+    );
+    dispatch(getCurrentUser());
+  }, [props.application.defaultPageId]);
 
   const handleMultipleSelection = (event: any) => {
     if ((event as MouseEvent).ctrlKey || (event as MouseEvent).metaKey) {

@@ -77,15 +77,13 @@ export function SnapShotBannerCTA() {
         links={[
           {
             children: createMessage(USE_SNAPSHOT_CTA),
-            onClick: (e) => {
-              e.preventDefault();
+            onClick: () => {
               openModal(CONVERSION_STATES.SNAPSHOT_START);
             },
           },
           {
             children: createMessage(DISCARD_SNAPSHOT_CTA),
-            onClick: (e) => {
-              e.preventDefault();
+            onClick: () => {
               openModal(CONVERSION_STATES.DISCARD_SNAPSHOT);
             },
           },

@@ -38,7 +38,6 @@ function BackButton() {
       className="t--back-button"
       onClick={goBack}
       startIcon="arrow-left-line"
-      target="_self"
     >
       Back
     </Back>

diff --git a/app/client/src/pages/Editor/Explorer/Libraries/Installer.tsx b/app/client/src/pages/Editor/Explorer/Libraries/Installer.tsx
@@ -40,12 +40,6 @@ import type { TJSLibrary } from "workers/common/JSLibrary";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { EntityClassNames } from "pages/Editor/Explorer/Entity";
 
-const openDoc = (e: React.MouseEvent, url: string) => {
-  e.preventDefault();
-  e.stopPropagation();
-  window.open(url, "_blank");
-};
-
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -248,13 +242,13 @@ function ProgressTracker({
             links={[
               {
                 children: createMessage(customJSLibraryMessages.REPORT_ISSUE),
-                to: "#",
-                onClick: (e) => openDoc(e, EXT_LINK.reportIssue),
+                to: EXT_LINK.reportIssue,
+                target: "_blank",
               },
               {
                 children: createMessage(customJSLibraryMessages.LEARN_MORE),
-                onClick: (e) => openDoc(e, EXT_LINK.learnMore),
-                to: "#",
+                to: EXT_LINK.learnMore,
+                target: "_blank",
               },
             ]}
           >
@@ -390,20 +384,12 @@ export function Installer() {
         <div className="search-CTA mb-3 text-xs">
           <span>
             Explore libraries on{" "}
-            <Link
-              kind="primary"
-              onClick={(e) => openDoc(e, EXT_LINK.jsDelivr)}
-              to="#"
-            >
+            <Link kind="primary" target="_blank" to={EXT_LINK.jsDelivr}>
               jsDelivr
             </Link>
             {". "}
             {createMessage(customJSLibraryMessages.LEARN_MORE_DESC)}{" "}
-            <Link
-              kind="primary"
-              onClick={(e) => openDoc(e, EXT_LINK.learnMore)}
-              to="#"
-            >
+            <Link kind="primary" target="_blank" to={EXT_LINK.learnMore}>
               here
             </Link>
             {"."}
@@ -457,8 +443,8 @@ function LibraryCard({
             className="library-name"
             endIcon="share-box-line"
             kind="secondary"
-            onClick={(e) => openDoc(e, lib.docsURL)}
-            to="#"
+            target="_blank"
+            to={lib.docsURL}
           >
             {lib.name}
           </Link>

diff --git a/app/client/src/pages/Editor/ThemePropertyPane/ThemeSelector.tsx b/app/client/src/pages/Editor/ThemePropertyPane/ThemeSelector.tsx
@@ -49,7 +49,6 @@ function ThemeSelector() {
           kind="secondary"
           onClick={onClickBack}
           startIcon="back-control"
-          to="#"
         >
           Back
         </Link>

@@ -162,8 +162,7 @@ function RepoLimitExceededErrorModal() {
             kind="warning"
             links={[
               {
-                onClick: (e) => {
-                  e.preventDefault();
+                onClick: () => {
                   AnalyticsUtil.logEvent("GS_CONTACT_SALES_CLICK", {
                     source: "REPO_LIMIT_EXCEEDED_ERROR_MODAL",
                   });

@@ -357,16 +357,16 @@ function Deploy() {
                   links={[
                     {
                       children: createMessage(READ_DOCUMENTATION),
-                      onClick: (e) => {
-                        e.preventDefault();
+                      onClick: () => {
                         AnalyticsUtil.logEvent(
                           "GS_GIT_DOCUMENTATION_LINK_CLICK",
                           {
                             source: "UPSTREAM_CHANGES_LINK_ON_GIT_DEPLOY_MODAL",
                           },
                         );
-                        window.open(upstreamErrorDocumentUrl, "_blank");
                       },
+                      to: upstreamErrorDocumentUrl,
+                      target: "_blank",
                     },
                   ]}
                 >
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,6 @@ function ThemeSelector() { @@
               kind="secondary"
               onClick={onClickBack}
               startIcon="back-control"
-              to="#"
             >
               Back
             </Link>
@@ Expand Down @@