Skip to content

Commit

Permalink
fix: Airgap: search bar UI was not matching with release (#36772)
Browse files Browse the repository at this point in the history
## 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: 79fc34f
> <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 -->
  • Loading branch information
albinAppsmith authored Oct 9, 2024
1 parent d233d7e commit 1c91a8a
Showing 1 changed file with 7 additions and 18 deletions.
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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);
}
Expand All @@ -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 {
Expand All @@ -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>
Expand Down

0 comments on commit 1c91a8a

Please sign in to comment.