chore: Hides update button when there are no pending updates. (#13152)

app/client/src/components/editorComponents/Debugger/index.tsx

@@ -42,7 +42,6 @@ const TriggerContainer = styled.div<{
   overflow: visible;
   display: flex;
   align-items: center;
-  margin-right: ${(props) => props.theme.spaces[10]}px;
 
   .debugger-count {
     color: ${Colors.WHITE};

app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx

@@ -24,21 +24,11 @@ import {
   selectURLSlugs,
 } from "selectors/editorSelectors";
 import styled from "styled-components";
-import { useLocalStorage } from "utils/hooks/localstorage";
 import { createMessage, CLEAN_URL_UPDATE } from "@appsmith/constants/messages";
 import { useLocation } from "react-router";
 import DisclaimerIcon from "remixicon-react/ErrorWarningLineIcon";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 
-function RedDot() {
-  return (
-    <div
-      className="h-2 w-2 bg-red-600 rounded-full absolute top-0 left-3"
-      data-testid="update-indicator"
-    />
-  );
-}
-
 const StyledList = styled.ul`
   list-style: disc;
   margin-left: 16px;
@@ -198,10 +188,6 @@ function UpdatesModal({
 }
 
 function ManualUpgrades() {
-  const [updateDismissed, setUpdateDismissed] = useLocalStorage(
-    "updateDismissed",
-    "",
-  );
   const applicationVersion = useSelector(selectApplicationVersion);
   const applicationId = useSelector(getCurrentApplicationId);
   const pageId = useSelector(getCurrentPageId);
@@ -239,37 +225,26 @@ function ManualUpgrades() {
   );
   const [showModal, setShowModal] = React.useState(false);
 
-  const defaultProps =
-    !updateDismissed && applicationVersion < latestVersion
-      ? {
-          isOpen: true,
-        }
-      : {};
+  const tooltipContent = (
+    <div className="text-sm">
+      {`${latestVersion - applicationVersion} pending update(s)`}
+      <ul className="mt-1">
+        {updates.slice(applicationVersion - 1).map((u) => (
+          <li key={u.name}>{u.shortDesc}</li>
+        ))}
+      </ul>
+    </div>
+  );
 
-  const tooltipContent =
-    applicationVersion < latestVersion ? (
-      <div className="text-sm">
-        {`${latestVersion - applicationVersion} pending update(s)`}
-        <ul className="mt-1">
-          {updates.slice(applicationVersion - 1).map((u) => (
-            <li key={u.name}>{u.shortDesc}</li>
-          ))}
-        </ul>
-      </div>
-    ) : (
-      "No new updates"
-    );
+  if (applicationVersion === latestVersion) return null;
 
   return (
-    <div className="relative">
-      {applicationVersion < latestVersion && <RedDot />}
+    <div className="relative" data-testid="update-indicator">
       <TooltipComponent
-        autoFocus={!updateDismissed && applicationVersion < latestVersion}
         content={tooltipContent}
         modifiers={{
           preventOverflow: { enabled: true },
         }}
-        {...defaultProps}
       >
         <Icon
           className="t--upgrade"
@@ -277,7 +252,6 @@ function ManualUpgrades() {
           fillColor={Colors.SCORPION}
           name="upgrade"
           onClick={() => {
-            setUpdateDismissed("true");
             setShowModal(applicationVersion < latestVersion);
           }}
           size={IconSize.XXXL}

app/client/src/pages/Editor/BottomBar/index.tsx

@@ -14,13 +14,14 @@ const Container = styled.div`
   background-color: ${(props) => props.theme.colors.editorBottomBar.background};
   z-index: ${Layers.bottomBar};
   border-top: solid 1px ${Colors.MERCURY};
+  padding: 0 ${(props) => props.theme.spaces[11]}px;
 `;
 
 export default function BottomBar(props: { className?: string }) {
   return (
     <Container className={props.className ?? ""}>
       <QuickGitActions />
-      <div className="w-20 flex justify-between items-center">
+      <div className="flex justify-between items-center gap-4">
         <ManualUpgrades />
         <DebuggerTrigger />
       </div>

app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx

@@ -203,7 +203,6 @@ const Container = styled.div`
   height: 100%;
   display: flex;
   align-items: center;
-  margin-left: ${(props) => props.theme.spaces[10]}px;
 `;
 
 const StyledIcon = styled(GitCommitLine)`