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:
parent
d233d7e9c3
commit
1c91a8ad63
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user