chore: git tag - ui components for tagging release

app/client/src/git/ce/constants/messages.tsx

@@ -0,0 +1,18 @@
+export const OPS_MODAL = {
+  TAB_RELEASE: "RELEASE",
+};
+
+export const TAB_RELEASE = {
+  TITLE: "Release version",
+  RELEASE_BTN: "Release",
+};
+
+export const RELEASE_VERSION_RADIO_GROUP = {
+  TITLE: "Version",
+  LAST_RELEASED: "Last released",
+};
+
+export const RELEASE_NOTES_INPUT = {
+  TITLE: "Release notes",
+  PLACEHOLDER: "Your release notes here",
+};

app/client/src/git/components/LatestCommitInfo/LatestCommitInfoView.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import LatestCommitInfoView from "./LatestCommitInfoView";
+import "@testing-library/jest-dom";
+
+describe("LatestCommitInfoView", () => {
+  it("renders correctly with all props", () => {
+    const { getByText } = render(
+      <LatestCommitInfoView
+        authorName="John Doe"
+        committedAt="2025-03-01"
+        hash="abc123"
+        message="Initial commit"
+      />,
+    );
+
+    expect(getByText("Initial commit")).toBeInTheDocument();
+    expect(getByText("John Doe committed 2025-03-01")).toBeInTheDocument();
+    expect(getByText("abc123")).toBeInTheDocument();
+  });
+
+  it("renders correctly with null authorName", () => {
+    const { getByText } = render(
+      <LatestCommitInfoView
+        authorName={null}
+        committedAt="2025-03-01"
+        hash="abc123"
+        message="Initial commit"
+      />,
+    );
+
+    expect(getByText("Initial commit")).toBeInTheDocument();
+    expect(getByText("- committed 2025-03-01")).toBeInTheDocument();
+    expect(getByText("abc123")).toBeInTheDocument();
+  });
+
+  it("renders correctly with null committedAt", () => {
+    const { getByText } = render(
+      <LatestCommitInfoView
+        authorName="John Doe"
+        committedAt={null}
+        hash="abc123"
+        message="Initial commit"
+      />,
+    );
+
+    expect(getByText("Initial commit")).toBeInTheDocument();
+    expect(getByText("John Doe committed -")).toBeInTheDocument();
+    expect(getByText("abc123")).toBeInTheDocument();
+  });
+
+  it("renders correctly with null hash", () => {
+    const { getByText } = render(
+      <LatestCommitInfoView
+        authorName="John Doe"
+        committedAt="2025-03-01"
+        hash={null}
+        message="Initial commit"
+      />,
+    );
+
+    expect(getByText("Initial commit")).toBeInTheDocument();
+    expect(getByText("John Doe committed 2025-03-01")).toBeInTheDocument();
+    expect(getByText("-")).toBeInTheDocument();
+  });
+
+  it("renders correctly with null message", () => {
+    const { getByText } = render(
+      <LatestCommitInfoView
+        authorName="John Doe"
+        committedAt="2025-03-01"
+        hash="abc123"
+        message={null}
+      />,
+    );
+
+    expect(getByText("John Doe committed 2025-03-01")).toBeInTheDocument();
+    expect(getByText("abc123")).toBeInTheDocument();
+  });
+
+  it("renders correctly with all null props", () => {
+    const { getByText } = render(
+      <LatestCommitInfoView
+        authorName={null}
+        committedAt={null}
+        hash={null}
+        message={null}
+      />,
+    );
+
+    expect(getByText("- committed -")).toBeInTheDocument();
+    expect(getByText("-")).toBeInTheDocument();
+  });
+});

app/client/src/git/components/LatestCommitInfo/LatestCommitInfoView.tsx

@@ -0,0 +1,41 @@
+import { Flex, Icon, Text } from "@appsmith/ads";
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled(Flex)`
+  border-radius: 4px;
+  background-color: var(--ads-v2-color-gray-0);
+`;
+
+interface LatestCommitInfoViewProps {
+  authorName: string | null;
+  committedAt: string | null;
+  hash: string | null;
+  message: string | null;
+}
+
+function LatestCommitInfoView({
+  authorName = null,
+  committedAt = null,
+  hash = null,
+  message = null,
+}: LatestCommitInfoViewProps) {
+  return (
+    <Container marginBottom="spaces-4" padding="spaces-3">
+      <Flex flex={1} flexDirection="column" gap="spaces-3">
+        <Text renderAs="p">{message}</Text>
+        <Text kind="body-s" renderAs="p">
+          {authorName ?? "-"} committed {committedAt ?? "-"}
+        </Text>
+      </Flex>
+      <Flex alignItems="center" justifyContent="center">
+        <Flex gap="spaces-2">
+          <Icon name="git-commit" size="md" />
+          <Text renderAs="p">{hash ?? "-"}</Text>
+        </Flex>
+      </Flex>
+    </Container>
+  );
+}
+
+export default LatestCommitInfoView;

app/client/src/git/components/LatestCommitInfo/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import LatestCommitInfoView from "./LatestCommitInfoView";
+import useLatestCommit from "git/hooks/useLatestCommit";
+
+function LatestCommitInfo() {
+  const { latestCommit } = useLatestCommit();
+
+  return (
+    <LatestCommitInfoView
+      authorName={latestCommit?.authorName ?? null}
+      committedAt={latestCommit?.committedAt ?? null}
+      hash={latestCommit?.hash ?? null}
+      message={latestCommit?.message ?? null}
+    />
+  );
+}
+
+export default LatestCommitInfo;

app/client/src/git/components/OpsModal/TabRelease.tsx

@@ -0,0 +1,60 @@
+import { Button, ModalBody, ModalFooter, Text } from "@appsmith/ads";
+import LatestCommitInfo from "git/components/LatestCommitInfo";
+import ReleaseNotesInput from "git/components/ReleaseNotesInput";
+import ReleaseVersionRadioGroup from "git/components/ReleaseVersionRadioGroup";
+import { TAB_RELEASE } from "git/ee/constants/messages";
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  min-height: 360px;
+  overflow: unset;
+  padding-bottom: 4px;
+`;
+
+const TabTitle = styled(Text)`
+  margin-bottom: 12px;
+  color: var(--ads-v2-color-fg-emphasis);
+`;
+
+const StyledModalFooter = styled(ModalFooter)`
+  min-height: 52px;
+`;
+
+function TabRelease() {
+  const [releaseVersion, setReleaseVersion] = useState<string | null>(null);
+  const [releaseNotes, setReleaseNotes] = useState<string | null>(null);
+
+  const isReleaseDisabled = !releaseVersion || !releaseNotes;
+
+  const handleClickOnRelease = useCallback(() => {}, []);
+
+  return (
+    <>
+      <ModalBody>
+        <Container>
+          <TabTitle kind="heading-s" renderAs="p">
+            {TAB_RELEASE.TITLE}
+          </TabTitle>
+          <LatestCommitInfo />
+          <ReleaseVersionRadioGroup onVersionChange={setReleaseVersion} />
+          <ReleaseNotesInput
+            onTextChange={setReleaseNotes}
+            text={releaseNotes}
+          />
+        </Container>
+      </ModalBody>
+      <StyledModalFooter>
+        <Button
+          isDisabled={isReleaseDisabled}
+          onClick={handleClickOnRelease}
+          size="md"
+        >
+          {TAB_RELEASE.RELEASE_BTN}
+        </Button>
+      </StyledModalFooter>
+    </>
+  );
+}
+
+export default TabRelease;

app/client/src/git/components/ReleaseNotesInput/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Flex, Input } from "@appsmith/ads";
+import { RELEASE_NOTES_INPUT } from "git/ee/constants/messages";
+import { noop } from "lodash";
+
+interface ReleaseNotesInputProps {
+  onTextChange: (text: string | null) => void;
+  text: string | null;
+}
+
+function ReleaseNotesInput({
+  onTextChange = noop,
+  text = null,
+}: ReleaseNotesInputProps) {
+  return (
+    <Flex flexDirection={"column"}>
+      <Input
+        autoFocus
+        data-testid="t--git-release-notes-input"
+        label={RELEASE_NOTES_INPUT.TITLE}
+        onChange={onTextChange}
+        placeholder={RELEASE_NOTES_INPUT.PLACEHOLDER}
+        renderAs="textarea"
+        size="md"
+        type="text"
+        value={text ?? undefined}
+      />
+    </Flex>
+  );
+}
+
+export default ReleaseNotesInput;

app/client/src/git/components/ReleaseVersionRadioGroup/ReleaseVersionRadioGroupView.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import ReleaseVersionRadioGroupView from "./ReleaseVersionRadioGroupView";
+import "@testing-library/jest-dom";
+
+describe("ReleaseVersionRadioGroupView", () => {
+  const mockOnVersionChange = jest.fn();
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <ReleaseVersionRadioGroupView
+        currentVersion="1.0.0"
+        onVersionChange={mockOnVersionChange}
+        releasedAt="2023-01-01"
+        {...props}
+      />,
+    );
+  };
+
+  beforeEach(() => {
+    mockOnVersionChange.mockClear();
+  });
+
+  it("should render correctly with initial props", () => {
+    const { getByRole, getByTestId } = renderComponent();
+
+    expect(getByTestId("t--git-release-version-title").textContent).toBe(
+      "Version",
+    );
+    expect(getByTestId("t--git-release-next-version").textContent).toBe(
+      "1.0.1",
+    );
+    expect(getByTestId("t--git-release-released-at").textContent).toBe(
+      "Last released: 1.0.0 (2023-01-01)",
+    );
+    expect(getByRole("radio", { name: /patch/i })).toBeChecked();
+  });
+
+  it("should change version when a different radio button is selected", () => {
+    const { getByRole, getByTestId } = renderComponent();
+
+    fireEvent.click(getByRole("radio", { name: /minor/i }));
+    expect(getByTestId("t--git-release-next-version").textContent).toBe(
+      "1.1.0",
+    );
+    fireEvent.click(getByRole("radio", { name: /major/i }));
+    expect(getByTestId("t--git-release-next-version").textContent).toBe(
+      "2.0.0",
+    );
+  });
+
+  it("should call onVersionChange with the correct version", () => {
+    const { getByRole } = renderComponent();
+
+    expect(mockOnVersionChange).toHaveBeenCalledWith("1.0.1"); // initial call with patch version
+    fireEvent.click(getByRole("radio", { name: /minor/i }));
+    expect(mockOnVersionChange).toHaveBeenCalledWith("1.1.0");
+    fireEvent.click(getByRole("radio", { name: /major/i }));
+    expect(mockOnVersionChange).toHaveBeenCalledWith("2.0.0");
+  });
+
+  it("should handle null values for currentVersion and releasedAt", () => {
+    const { getByTestId } = renderComponent({
+      currentVersion: null,
+      releasedAt: null,
+    });
+
+    expect(getByTestId("t--git-release-released-at").textContent).toBe(
+      "Last released: - (-)",
+    );
+  });
+});