appsmithorg · brayn003 · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
@@ -2372,10 +2372,12 @@ export const EDITOR_PANE_TEXTS = {
   query_create_tab_title: () => "Create new query from",
   widgets_create_tab_title: () => "Drag & drop UI elements",
   js_create_tab_title: () => "Create JS object from",
-  js_create_modules: () => "JS modules (Beta)",
+  js_create_modules: (isBeta: boolean) =>
+    `JS modules ${isBeta ? "(Beta)" : ""}`,
   queries_create_from_existing: () => "Datasources",
   queries_create_new: () => "Quick actions",
-  queries_create_modules: () => "Query modules (Beta)",
+  queries_create_modules: (isBeta: boolean) =>
+    `Query modules ${isBeta ? "(Beta)" : ""}`,
   loading_building_blocks: () => "Loading building blocks",
   empty_search_result: (type: string) => `No ${type} match your search`,
   search_objects: {

diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts
@@ -56,6 +56,7 @@ export const FEATURE_FLAG = {
   license_multi_org_enabled: "license_multi_org_enabled",
   release_table_custom_sort_function_enabled:
     "release_table_custom_sort_function_enabled",
+  release_git_package_enabled: "release_git_package_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -103,6 +104,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_table_infinitescroll_enabled: false,
   license_multi_org_enabled: false,
   release_table_custom_sort_function_enabled: false,
+  release_git_package_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

diff --git a/app/client/src/git/ce/constants/messages.tsx b/app/client/src/git/ce/constants/messages.tsx
@@ -29,7 +29,7 @@ export const OPS_MODAL = {
 };
 
 export const TAB_RELEASE = {
-  TITLE: "Release version",
+  TITLE: "Release a new version",
   RELEASE_BTN: "Release",
 };
 
@@ -44,6 +44,7 @@ export const RELEASE_NOTES_INPUT = {
 };
 
 export const LATEST_COMMIT_INFO = {
+  TITLE: "Commit",
   LOADING_COMMIT_MESSAGE: "Fetching latest commit...",
   NO_COMMIT_MESSAGE: "No commit message found",
 };
diff --git a/app/client/src/git/components/LatestCommitInfo/LatestCommitInfoView.tsx b/app/client/src/git/components/LatestCommitInfo/LatestCommitInfoView.tsx
@@ -4,9 +4,16 @@ import React from "react";
 import styled from "styled-components";
 import { howMuchTimeBeforeText } from "utils/helpers";
 
-const Container = styled(Flex)`
-  border-radius: 4px;
-  background-color: var(--ads-v2-color-gray-0);
+const TitleText = styled(Text)`
+  font-weight: 500;
+`;
+
+const MutedText = styled(Text)`
+  font-weight: 300;
+`;
+
+const LoadingContainer = styled(Flex)`
+  margin-bottom: 19px;
 `;
 
 interface LatestCommitInfoViewProps {
@@ -28,51 +35,61 @@ function LatestCommitInfoView({
     ? howMuchTimeBeforeText(new Date(committedAt * 1000).toString())
     : null;
 
-  if (isLoading) {
-    return (
-      <Container
-        alignItems="center"
-        data-testid="t--git-latest-commit-loading"
-        gap="spaces-3"
-        marginBottom="spaces-4"
-        padding="spaces-3"
-      >
-        <Spinner size="md" />
-        <Text renderAs="p">{LATEST_COMMIT_INFO.LOADING_COMMIT_MESSAGE}</Text>
-      </Container>
-    );
-  }
-
   return (
-    <Container marginBottom="spaces-4" padding="spaces-3">
-      <Flex flex={1} flexDirection="column" gap="spaces-3">
-        <Text data-testid="t--git-latest-commit-message" renderAs="p">
-          {message ?? <em>{LATEST_COMMIT_INFO.NO_COMMIT_MESSAGE}</em>}
-        </Text>
-        {authorName && (
-          <Text
-            data-testid="t--git-latest-commit-commited-by"
-            kind="body-s"
-            renderAs="p"
-          >
-            {authorName && !readableCommittedAt
-              ? `Committed by ${authorName}`
-              : null}
-            {authorName && readableCommittedAt
-              ? `${authorName} committed ${readableCommittedAt} ago`
-              : null}
-          </Text>
-        )}
-      </Flex>
-      <Flex alignItems="center" justifyContent="center">
-        <Flex gap="spaces-2">
-          <Icon name="git-commit" size="md" />
-          <Text data-testid="t--git-latest-commit-hash" renderAs="p">
-            {hash ?? "-"}
-          </Text>
+    <Flex flexDirection="column" gap="spaces-3" marginBottom="spaces-6">
+      <TitleText data-testid="t--git-release-version-title" renderAs="p">
+        {LATEST_COMMIT_INFO.TITLE}
+      </TitleText>
+      {isLoading && (
+        <LoadingContainer
+          alignItems="center"
+          data-testid="t--git-latest-commit-loading"
+          gap="spaces-3"
+        >
+          <Spinner size="md" />
+          <Text renderAs="p">{LATEST_COMMIT_INFO.LOADING_COMMIT_MESSAGE}</Text>
+        </LoadingContainer>
+      )}
+      {!isLoading && (
+        <Flex>
+          <Flex flex={1} flexDirection="column" gap="spaces-2">
+            <Text
+              data-testid="t--git-latest-commit-message"
+              kind="body-s"
+              renderAs="p"
+            >
+              {message ?? <em>{LATEST_COMMIT_INFO.NO_COMMIT_MESSAGE}</em>}
+            </Text>
+            {authorName && (
+              <MutedText
+                data-testid="t--git-latest-commit-commited-by"
+                kind="body-s"
+                renderAs="p"
+              >
+                {authorName && !readableCommittedAt
+                  ? `Committed by ${authorName}`
+                  : null}
+                {authorName && readableCommittedAt
+                  ? `${authorName} committed ${readableCommittedAt} ago`
+                  : null}
+              </MutedText>
+            )}
+          </Flex>
+          <Flex alignItems="center" justifyContent="center">
+            <Flex gap="spaces-2">
+              <Icon name="git-commit" size="md" />
+              <MutedText
+                data-testid="t--git-latest-commit-hash"
+                kind="body-s"
+                renderAs="p"
+              >
+                {hash ?? "-"}
+              </MutedText>
+            </Flex>
+          </Flex>
         </Flex>
-      </Flex>
-    </Container>
+      )}
+    </Flex>
   );
 }
 

diff --git a/app/client/src/git/components/OpsModal/TabRelease/TabReleaseView.tsx b/app/client/src/git/components/OpsModal/TabRelease/TabReleaseView.tsx
@@ -42,7 +42,7 @@ function TabReleaseView({
   const [releaseVersion, setReleaseVersion] = useState<string | null>(null);
   const [releaseNotes, setReleaseNotes] = useState<string | null>(null);
 
-  const isReleaseDisabled = !releaseVersion || !releaseNotes;
+  const isReleaseDisabled = !releaseVersion;
 
   useEffect(
     function fetchPretagOnInitEffect() {

diff --git a/app/client/src/git/components/ReleaseVersionRadioGroup/ReleaseVersionRadioGroupView.test.tsx b/app/client/src/git/components/ReleaseVersionRadioGroup/ReleaseVersionRadioGroupView.test.tsx
@@ -4,15 +4,13 @@ import ReleaseVersionRadioGroupView from "./ReleaseVersionRadioGroupView";
 import "@testing-library/jest-dom";
 
 describe("ReleaseVersionRadioGroupView", () => {
-  const releasedAt = Math.floor((Date.now() - 3600000) / 1000);
   const mockOnVersionChange = jest.fn();
 
   const renderComponent = (props = {}) => {
     return render(
       <ReleaseVersionRadioGroupView
         latestReleaseVersion="v1.0.0"
         onVersionChange={mockOnVersionChange}
-        releasedAt={releasedAt}
         {...props}
       />,
     );
@@ -31,9 +29,6 @@ describe("ReleaseVersionRadioGroupView", () => {
     expect(getByTestId("t--git-release-next-version").textContent).toBe(
       "v1.0.1",
     );
-    expect(getByTestId("t--git-release-released-at").textContent).toBe(
-      "Last released: v1.0.0 (1 hr ago)",
-    );
     expect(getByRole("radio", { name: /patch/i })).toBeChecked();
   });
 

diff --git a/app/client/src/git/components/ReleaseVersionRadioGroup/ReleaseVersionRadioGroupView.tsx b/app/client/src/git/components/ReleaseVersionRadioGroup/ReleaseVersionRadioGroupView.tsx
@@ -1,29 +1,36 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Flex, Radio, RadioGroup, Tag, Text } from "@appsmith/ads";
+import { Flex, Icon, Radio, RadioGroup, Tag, Text } from "@appsmith/ads";
 import { RELEASE_VERSION_RADIO_GROUP } from "git/ee/constants/messages";
 import { inc } from "semver";
 import noop from "lodash/noop";
-import { howMuchTimeBeforeText } from "utils/helpers";
+import styled from "styled-components";
+
+const TitleText = styled(Text)`
+  font-weight: 500;
+`;
+
+const CurrentVersionTag = styled(Tag)`
+  border-color: var(--ads-v2-color-gray-300);
+`;
+
+const NextVersionTag = styled(Tag)`
+  background-color: var(--ads-v2-color-purple-100);
+  border-color: var(--ads-v2-color-purple-300);
+`;
 
 type ReleaseType = "major" | "minor" | "patch" | null;
 
 interface ReleaseVersionRadioGroupViewProps {
   latestReleaseVersion: string | null;
   onVersionChange: (value: string | null) => void;
-  releasedAt: number | null;
 }
 
 function ReleaseVersionRadioGroupView({
   latestReleaseVersion = null,
   onVersionChange = noop,
-  releasedAt = null,
 }: ReleaseVersionRadioGroupViewProps) {
   const [releaseType, setReleaseType] = useState<ReleaseType>("patch");
 
-  const readableReleaseAt = releasedAt
-    ? howMuchTimeBeforeText(new Date(releasedAt * 1000).toString())
-    : null;
-
   const nextVersion = useMemo(() => {
     if (!releaseType) return null;
 
@@ -47,42 +54,42 @@ function ReleaseVersionRadioGroupView({
   }, []);
 
   return (
-    <Flex flexDirection="column" gap="spaces-2" marginBottom="spaces-4">
-      <Text data-testid="t--git-release-version-title" renderAs="p">
+    <Flex flexDirection="column" gap="spaces-3" marginBottom="spaces-4">
+      <TitleText data-testid="t--git-release-version-title" renderAs="p">
         {RELEASE_VERSION_RADIO_GROUP.TITLE}
-      </Text>
-      <Flex alignItems="center" gap="spaces-4">
-        <Flex minWidth="40px">
-          <Tag
-            data-testid="t--git-release-next-version"
+      </TitleText>
+      <RadioGroup
+        UNSAFE_gap="var(--ads-v2-spaces-4)"
+        onChange={handleRadioChange}
+        orientation="horizontal"
+        value={releaseType ?? undefined}
+      >
+        <Radio value="major">Major</Radio>
+        <Radio value="minor">Minor</Radio>
+        <Radio value="patch">Patch</Radio>
+      </RadioGroup>
+      <Flex gap="spaces-2">
+        {latestReleaseVersion && (
+          <CurrentVersionTag
+            data-testid="t--git-release-current-version"
             isClosable={false}
             kind="neutral"
           >
-            {nextVersion ?? "-"}
-          </Tag>
-        </Flex>
-        <RadioGroup
-          UNSAFE_gap="var(--ads-v2-spaces-4)"
-          onChange={handleRadioChange}
-          orientation="horizontal"
-          value={releaseType ?? undefined}
+            {latestReleaseVersion}
+          </CurrentVersionTag>
+        )}
+        {latestReleaseVersion && nextVersion && (
+          <Icon name="arrow-right-line" size="sm" />
+        )}
+        <NextVersionTag
+          color="var(--ads-v2-color-purple-100)"
+          data-testid="t--git-release-next-version"
+          isClosable={false}
+          kind="neutral"
         >
-          <Radio value="major">Major</Radio>
-          <Radio value="minor">Minor</Radio>
-          <Radio value="patch">Patch</Radio>
-        </RadioGroup>
+          {nextVersion ?? "-"}
+        </NextVersionTag>
       </Flex>
-      {latestReleaseVersion && (
-        <Text
-          data-testid="t--git-release-released-at"
-          kind="body-s"
-          renderAs="p"
-        >
-          {RELEASE_VERSION_RADIO_GROUP.LAST_RELEASED}:{" "}
-          {latestReleaseVersion ?? "-"}{" "}
-          {readableReleaseAt ? `(${readableReleaseAt} ago)` : null}
-        </Text>
-      )}
     </Flex>
   );
 }

diff --git a/app/client/src/git/components/ReleaseVersionRadioGroup/index.tsx b/app/client/src/git/components/ReleaseVersionRadioGroup/index.tsx
@@ -16,7 +16,6 @@ function ReleaseVersionRadioGroup({
     <ReleaseVersionRadioGroupView
       latestReleaseVersion={pretagResponse?.releaseTagName ?? null}
       onVersionChange={onVersionChange}
-      releasedAt={pretagResponse?.releasedAt ?? null}
     />
   );
 }