feat: Update UQI field size to SM

[albinAppsmith]

Description

This PR updates the UQI form feild size to sm variant along with label in 12 px

Fixes #34320

Automation

/ok-to-test tags="@tag.Sanity"

:mag: Cypress test results

[!CAUTION]
If you modify the content in this section, you are likely to disrupt the CI result for your PR.

Communication

Should the DevRel and Marketing teams inform users about this change?

• [ ] Yes
• [x] No

Summary by CodeRabbit

• New Features

  • Introduced a size property for dropdown and input components, allowing for smaller UI elements to enhance flexibility and customization.
  • Added a height attribute to the InputText component for more precise control over styling.

• Bug Fixes

  • Adjusted the size property of various components from medium to small, improving the compactness and usability of the user interface without changing functionality.

• Style

  • Updated styling rules for the LabelWrapper component to improve text appearance and readability.

[coderabbitai[bot]]

Walkthrough

The overall changes involve modifying the sizes of various form controls within the application to utilize the smaller ("sm") variant for improved compactness. This includes updates to components such as dropdowns, buttons, and input fields across multiple files, while maintaining their existing functionality.

Changes

Files	Change Summary
app/client/packages/eslint-plugin/package.json	Added a newline at the end of the file.
app/client/src/components/formControls/DropDownControl.tsx, FieldArrayControl.tsx, FilePickerControl.tsx, FixedKeyInputControl.tsx, InputTextControl.tsx, KeyValueArrayControl.tsx, WhereClauseControl.tsx	Changed the size property from "md" to "sm" for various components, enhancing the compactness of the UI.
app/client/src/components/formControls/DynamicInputTextControl.tsx	Added a height attribute with a value of "24px" to the InputText component for better styling control.
app/client/src/pages/Editor/FormConfig.tsx	Added a font-size property set to 12px to the LabelWrapper component for improved text appearance.

Assessment against linked issues

Objective	Addressed	Explanation
Update fields to use "sm" size variant (#[34320])	✅
Adjust sizes of non-ADS components if easily replaceable (#[34320])	❌	No indication of replacing non-ADS components with ADS counterparts.
Adjust existing styles to match small variant if not replaceable (#[34320])	✅	Changes made to existing components to reflect smaller sizes.
Create a blocker ticket for unaddressed components (#[34320])	❌	No evidence of any blocker tickets being created or mentioned.

🎉 In the land of code, where sizes play,
The dropdowns and buttons found a new way.
From medium to small, they took a fresh stance,
Compactness embraced in a stylish dance.
With heights and fonts set just right,
Our forms now shine, a beautiful sight! 🌟

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[albinAppsmith]

/build-deploy-preview skip-test=true

[github-actions[bot]]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/10555755066. Workflow: On demand build Docker image and deploy preview. skip-tests: . env: . PR: 35875. recreate: .

[github-actions[bot]]

Deploy-Preview-URL: https://ce-35875.dp.appsmith.com

[sagar-qa007]

@coderabbitai generate unit testing code for this file.

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

@sagar-qa007 Could you please specify which file you would like the unit testing code generated for? There are several files modified in this PR, and I want to ensure I generate the tests for the correct one.

[sagar-qa007]

Tip

For best results, initiate chat on the files or code changes.

@sagar-qa007 Could you please specify which file you would like the unit testing code generated for? There are several files modified in this PR, and I want to ensure I generate the tests for the correct one.

@coderabbitai Give for all the changes in this PR

[coderabbitai[bot]]

Enhanced Unit Tests for Existing Components

DropDownControl.test.tsx (formControls)

import React from "react";
import { render, screen } from "test/testUtils";
import DropDownControl from "./DropDownControl";
import { reduxForm } from "redux-form";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";

const mockStore = configureStore([]);

const dropDownProps = {
  options: [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
  ],
  placeholderText: "Select Columns",
  isMultiSelect: true,
  configProperty: "actionConfiguration.testPath",
  controlType: "PROJECTION",
  propertyValue: "",
  label: "Columns",
  id: "column",
  formName: "",
  isValid: true,
  formValues: {},
  isLoading: false,
  size: "sm",  // New prop
};

describe("DropDownControl", () => {
  let store: any;

  beforeEach(() => {
    store = mockStore({
      form: {
        TestForm: {
          values: {},
        },
      },
    });
  });

  it("should render dropdownControl with small size", () => {
    render(
      <Provider store={store}>
        <ReduxFormDecorator>
          <DropDownControl {...dropDownProps} />
        </ReduxFormDecorator>
      </Provider>,
    );

    const dropdown = screen.getByTestId("t--dropdown-actionConfiguration.testPath");
    expect(dropdown).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

DynamicInputTextControl.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import DynamicInputTextControl from "./DynamicInputTextControl";
import { reduxForm } from "redux-form";

const DynamicInputTextProps = {
  actionName: "Test action",
  configProperty: "actionConfiguration.testPath",
  controlType: "DYNAMIC_INPUT_TEXT_CONTROL",
  dataType: "TABLE",
  formName: "TestForm",
  id: "test",
  isValid: true,
  label: "Action",
  placeholderText: "Test placeholder",
  size: "sm",  // New prop
};

describe("DynamicInputTextControl", () => {
  it("should render DynamicInputTextControl with small size", () => {
    render(
      <ReduxFormDecorator>
        <DynamicInputTextControl {...DynamicInputTextProps} />
      </ReduxFormDecorator>,
    );

    const input = screen.getByPlaceholderText("Test placeholder");
    expect(input).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

New Unit Tests for Components Without Existing Tests

FieldArrayControl.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import FieldArrayControl from "./FieldArrayControl";

describe("FieldArrayControl", () => {
  it("should render FieldArrayControl with small size", () => {
    render(<FieldArrayControl size="sm" />);
    const fieldArray = screen.getByTestId("t--field-array-control");
    expect(fieldArray).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

FilePickerControl.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import FilePickerControl from "./FilePickerControl";

describe("FilePickerControl", () => {
  it("should render FilePickerControl with small size", () => {
    render(<FilePickerControl size="sm" />);
    const filePicker = screen.getByTestId("t--file-picker-control");
    expect(filePicker).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

FixedKeyInputControl.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import FixedKeyInputControl from "./FixedKeyInputControl";

describe("FixedKeyInputControl", () => {
  it("should render FixedKeyInputControl with small size", () => {
    render(<FixedKeyInputControl size="sm" />);
    const fixedKeyInput = screen.getByTestId("t--fixed-key-input-control");
    expect(fixedKeyInput).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

KeyValueArrayControl.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import KeyValueArrayControl from "./KeyValueArrayControl";

describe("KeyValueArrayControl", () => {
  it("should render KeyValueArrayControl with small size", () => {
    render(<KeyValueArrayControl size="sm" />);
    const keyValueArray = screen.getByTestId("t--key-value-array-control");
    expect(keyValueArray).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

WhereClauseControl.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import WhereClauseControl from "./WhereClauseControl";

describe("WhereClauseControl", () => {
  it("should render WhereClauseControl with small size", () => {
    render(<WhereClauseControl size="sm" />);
    const whereClause = screen.getByTestId("t--where-clause-control");
    expect(whereClause).toHaveClass("size-sm");  // Check if the size class is applied
  });
});

FormConfig.test.tsx

import React from "react";
import { render, screen } from "test/testUtils";
import FormConfig from "./FormConfig";

describe("FormConfig", () => {
  it("should render FormConfig with label font size 12px", () => {
    render(<FormConfig />);
    const label = screen.getByText("Label Text");  // Replace with actual label text
    expect(label).toHaveStyle("font-size: 12px");  // Check if the font size is applied
  });
});

These tests ensure that the changes made in the PR are properly validated, focusing on the size prop and the new styling applied to the components.

Analysis chain

---

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Searching for existing test files related to the components modified in this PR.

# 1. Check for test files related to DropDownControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'DropDownControl' | grep -i 'test'

# 2. Check for test files related to DynamicInputTextControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'DynamicInputTextControl' | grep -i 'test'

# 3. Check for test files related to FieldArrayControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'FieldArrayControl' | grep -i 'test'

# 4. Check for test files related to FilePickerControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'FilePickerControl' | grep -i 'test'

# 5. Check for test files related to FixedKeyInputControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'FixedKeyInputControl' | grep -i 'test'

# 6. Check for test files related to InputTextControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'InputTextControl' | grep -i 'test'

# 7. Check for test files related to KeyValueArrayControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'KeyValueArrayControl' | grep -i 'test'

# 8. Check for test files related to WhereClauseControl.tsx
fd -e ts -e tsx -e js -e jsx -e json 'WhereClauseControl' | grep -i 'test'

# 9. Check for test files related to FormConfig.tsx
fd -e ts -e tsx -e js -e jsx -e json 'FormConfig' | grep -i 'test'

Length of output: 926

---

Script:

#!/bin/bash
# Display the contents of the existing test files to review the current test coverage.

# 1. Review DropDownControl.test.tsx in formControls
cat app/client/src/components/formControls/DropDownControl.test.tsx

# 2. Review DropDownControl.test.tsx in propertyControls
cat app/client/src/components/propertyControls/DropDownControl.test.tsx

# 3. Review DynamicInputTextControl.test.tsx
cat app/client/src/components/formControls/DynamicInputTextControl.test.tsx

Length of output: 7524

Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai[bot]]

[!NOTE] Currently processing new changes in this PR. This may take a few minutes, please wait...

Commits

Files that changed from the base of the PR and between 2af307f5ede7a4cd786310149110889072299a8e and cf350530ae1179e115fd5c386365657e3f8432b9.

Files selected for processing (10)

• app/client/packages/eslint-plugin/package.json (1 hunks)
• app/client/src/components/formControls/DropDownControl.tsx (1 hunks)
• app/client/src/components/formControls/DynamicInputTextControl.tsx (1 hunks)
• app/client/src/components/formControls/FieldArrayControl.tsx (1 hunks)
• app/client/src/components/formControls/FilePickerControl.tsx (1 hunks)
• app/client/src/components/formControls/FixedKeyInputControl.tsx (1 hunks)
• app/client/src/components/formControls/InputTextControl.tsx (1 hunks)
• app/client/src/components/formControls/KeyValueArrayControl.tsx (5 hunks)
• app/client/src/components/formControls/WhereClauseControl.tsx (4 hunks)
• app/client/src/pages/Editor/FormConfig.tsx (1 hunks)

____________________________________________________________________________________________
< If you don't start with a spec, every piece of code you write is a patch. - Leslie Lamport >
--------------------------------------------------------------------------------------------
\
 \   (\__/)
     (•ㅅ•)
     / 　 づ

[!TIP]

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting in your project's settings in CodeRabbit to remove sequence diagrams from the walkthrough.

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions[bot]]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

[github-actions[bot]]

This PR has been closed because of inactivity.