Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor search inputs #5398

Merged
merged 2 commits into from
Oct 23, 2024
Merged

Refactor search inputs #5398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f072d9
refactor search inputs
jpople Oct 18, 2024
cef5a83
update color handling
jpople Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 14 additions & 23 deletions clients/admin-ui/src/features/common/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import {
AntButton as Button,
Input,
InputGroup,
InputLeftElement,
InputProps,
InputRightElement,
AntInput as Input,
AntInputProps as InputProps,
AntSpace as Space,
SearchLineIcon,
} from "fidesui";

Expand All @@ -26,32 +24,25 @@ const SearchBar = ({
onChange(event.target.value);

return (
<InputGroup size="sm" minWidth="308px">
{withIcon ? (
<InputLeftElement pointerEvents="none">
<SearchLineIcon color="gray.300" w="17px" h="17px" />
</InputLeftElement>
) : null}
<Space.Compact className="w-96">
<Input
autoComplete="off"
type="search"
minWidth={200}
size="sm"
borderRadius="md"
value={search}
name="search"
onChange={handleSearchChange}
placeholder={placeholder || ""}
placeholder={placeholder || "Search..."}
prefix={withIcon ? <SearchLineIcon boxSize={4} /> : undefined}
className="border-neutral-2"
{...props}
/>
{onClear ? (
<InputRightElement>
<Button onClick={onClear} className="right-4 shrink-0 rounded-s-none">
Clear
</Button>
</InputRightElement>
<Button
onClick={onClear}
className="border-neutral-2 bg-[#f5f5f5] hover:!border-neutral-2 hover:!bg-neutral-2"
>
Clear
</Button>
) : null}
</InputGroup>
</Space.Compact>
);
};

Expand Down
29 changes: 12 additions & 17 deletions clients/admin-ui/src/features/data-discovery-and-detection/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { AntButton as Button, AntInput, AntSpace } from "fidesui";
import { debounce } from "lodash";
import { ChangeEventHandler, useCallback, useState } from "react";
import { useCallback, useState } from "react";

import SearchBar from "~/features/common/SearchBar";

interface SearchInputProps {
value: string;
Expand All @@ -14,10 +15,10 @@ export const SearchInput = ({ value, onChange }: SearchInputProps) => {
// Add some delay to prevent fetching on each key pressed while typing
const debouncedOnChange = debounce(onChange, INPUT_CHANGE_DELAY);

const handleOnChange: ChangeEventHandler<HTMLInputElement> = useCallback(
(e) => {
setCurrentInput(e.currentTarget.value);
debouncedOnChange(e.currentTarget.value);
const handleOnChange = useCallback(
(newValue: string) => {
setCurrentInput(newValue);
debouncedOnChange(newValue);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
Expand All @@ -29,16 +30,10 @@ export const SearchInput = ({ value, onChange }: SearchInputProps) => {
};

return (
<AntSpace.Compact className="w-96">
<AntInput
value={currentInput}
placeholder="Search..."
onChange={handleOnChange}
className="w-full"
/>
<Button onClick={onClear} className="bg-[#f5f5f5] hover:!bg-[#d9d9d9]">
Clear
</Button>
</AntSpace.Compact>
<SearchBar
search={currentInput}
onChange={handleOnChange}
onClear={onClear}
/>
);
};
18 changes: 17 additions & 1 deletion clients/admin-ui/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,23 @@
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
extend: {},
extend: {
colors: {
// TODO: unify with existing Tailwind "gray" color
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a ticket for this, by chance?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking this should be able to be done easily as part of the larger colors migration, but I can ticket it separately if you think that's a good idea.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that what @Kelsey-Ethyca is working on? Just want to make sure it doesn't get lost in the shuffle.

neutral: {
1: "#fafafa",
2: "#e6e6e8",
3: "#d1d2d4",
4: "#bcbec1",
5: "#a8aaad",
6: "#93969a",
7: "#7e8185",
8: "#696c71",
9: "#53575c",
10: "#2b2e35",
},
},
},
},
plugins: [],
};
1 change: 1 addition & 0 deletions clients/fidesui/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export * from "@chakra-ui/utils";
export type { ThemeConfig as AntThemeConfig } from "antd/es";
export type { SwitchProps as AntSwitchProps } from "antd/lib";
export type { ButtonProps as AntButtonProps } from "antd/lib";
export type { InputProps as AntInputProps } from "antd/lib";
export { Layout as AntLayout } from "antd/lib";
export { Space as AntSpace } from "antd/lib";
export { Col as AntCol, Row as AntRow } from "antd/lib";
Expand Down
Loading