fix: Airgap: search bar UI was not matching with release (#36772)

## Description

Global search UI was updated as part of side-by-side layout changes. But
since the side-by-side is not yet enabled in Airgap, the global search
ui was looking different in release and airgap. This PR address this
issue by removing fdeature flag depency for global search UI change.

Fixes #36701

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11250226767>
> Commit: 79fc34f90dd52a136136b7476e7193d6b7cf02f3
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11250226767&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.airgap`
> Spec:
> <hr>Wed, 09 Oct 2024 08:06:43 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
	- Simplified `HelpBar` component for a more consistent user experience.
- **Bug Fixes**
- Removed unnecessary conditional rendering, ensuring the `Icon` and
`Text` elements are always displayed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
albinAppsmith 2024-10-09 13:45:27 +05:30 committed by GitHub
parent d233d7e9c3
commit 1c91a8ad63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,18 +1,16 @@
import React from "react";
import styled from "styled-components";
import { connect, useSelector } from "react-redux";
import { connect } from "react-redux";
import { getTypographyByKey, Text, TextType } from "@appsmith/ads-old";
import { Icon } from "@appsmith/ads";
import { setGlobalSearchCategory } from "actions/globalSearchActions";
import { HELPBAR_PLACEHOLDER } from "ee/constants/messages";
import AnalyticsUtil from "ee/utils/AnalyticsUtil";
import { modText } from "utils/helpers";
import { filterCategories, SEARCH_CATEGORY_ID } from "./utils";
import { protectedModeSelector } from "selectors/gitSyncSelectors";
import type { AppState } from "ee/reducers";
import { getIsSideBySideEnabled } from "selectors/ideSelectors";
const StyledHelpBar = styled.button<{ isSideBySideFlagEnabled?: boolean }>`
const StyledHelpBar = styled.button`
padding: 0 var(--ads-v2-spaces-3);
margin: var(--ads-v2-spaces-2);
.placeholder-text {
@ -30,6 +28,10 @@ const StyledHelpBar = styled.button<{ isSideBySideFlagEnabled?: boolean }>`
font-family: var(--ads-v2-font-family);
font-size: var(--ads-v2-font-size-4);
color: var(--ads-v2-color-fg);
flex-grow: 0;
gap: 8px;
min-width: fit-content;
&:hover {
border: 1px solid var(--ads-v2-color-border-emphasis-plus);
}
@ -38,13 +40,6 @@ const StyledHelpBar = styled.button<{ isSideBySideFlagEnabled?: boolean }>`
&[disabled] {
cursor: not-allowed;
}
${({ isSideBySideFlagEnabled }) =>
isSideBySideFlagEnabled &&
`
flex-grow: 0;
gap: 8px;
min-width: fit-content;
`}
`;
interface Props {
@ -53,20 +48,14 @@ interface Props {
}
function HelpBar({ isProtectedMode, toggleShowModal }: Props) {
const isSideBySideFlagEnabled = useSelector(getIsSideBySideEnabled);
return (
<StyledHelpBar
className="t--global-search-modal-trigger"
data-testid="global-search-modal-trigger"
disabled={isProtectedMode}
isSideBySideFlagEnabled={isSideBySideFlagEnabled}
onClick={toggleShowModal}
>
{!isSideBySideFlagEnabled && (
<Text type={TextType.P2}>{HELPBAR_PLACEHOLDER()}</Text>
)}
{isSideBySideFlagEnabled && <Icon name={"search-line"} size={"md"} />}
<Icon name={"search-line"} size={"md"} />
<Text italic type={TextType.P3}>
{modText()} K
</Text>