Skip to content

fix: prevent workspace search bar text from getting garbled #9703

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

Merged
merged 11 commits into from
Sep 15, 2023
Merged

fix: prevent workspace search bar text from getting garbled #9703

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
32ebe81
chore: Reorganize hook calls for useWorkspacesFilter
Parkreiner Sep 13, 2023
92006aa
refactor: Clean up some filter logic
Parkreiner Sep 13, 2023
8d10578
refactor: Create debounce utility hooks
Parkreiner Sep 14, 2023
913f944
Merge branch 'main' into filter-fix
Parkreiner Sep 14, 2023
fec4384
docs: Clean up comments for clarity
Parkreiner Sep 14, 2023
2d4d285
fix: Update focus logic to apply for any inner focus
Parkreiner Sep 14, 2023
11c06e1
fix: Add onBlur behavior for state syncs
Parkreiner Sep 15, 2023
551780c
chore: Add progress for debounce test
Parkreiner Sep 15, 2023
3d028a7
chore: Finish tests for debounce hooks
Parkreiner Sep 15, 2023
9ea0e1a
Merge branch 'main' into filter-fix
Parkreiner Sep 15, 2023
83c6022
docs: Add file description and warning
Parkreiner Sep 15, 2023
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
Prev Previous commit
Next Next commit
refactor: Clean up some filter logic
  • Loading branch information
@Parkreiner
Parkreiner committed Sep 13, 2023
commit 92006aa583e60057464cbbc8e23c8485698ca4df
24 changes: 13 additions & 11 deletions site/src/components/Filter/filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,18 @@ export const MenuSkeleton = () => (
<BaseSkeleton sx={{ minWidth: 200, flexShrink: 0 }} />
);

type FilterProps = {
filter: ReturnType<typeof useFilter>;
skeleton: ReactNode;
isLoading: boolean;
learnMoreLink: string;
learnMoreLabel2?: string;
learnMoreLink2?: string;
error?: unknown;
options?: ReactNode;
presets: PresetFilter[];
};

export const Filter = ({
filter,
isLoading,
Expand All @@ -140,17 +152,7 @@ export const Filter = ({
learnMoreLabel2,
learnMoreLink2,
presets,
}: {
filter: ReturnType<typeof useFilter>;
skeleton: ReactNode;
isLoading: boolean;
learnMoreLink: string;
learnMoreLabel2?: string;
learnMoreLink2?: string;
error?: unknown;
options?: ReactNode;
presets: PresetFilter[];
}) => {
}: FilterProps) => {
const shouldDisplayError = hasError(error) && isApiValidationError(error);
const hasFilterQuery = filter.query !== "";
const [searchQuery, setSearchQuery] = useState(filter.query);
Expand Down
51 changes: 35 additions & 16 deletions site/src/pages/WorkspacesPage/filter/filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,22 @@ import { UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
import { workspaceFilterQuery } from "utils/filters";
import { docs } from "utils/docs";

const PRESET_FILTERS = [
{ query: workspaceFilterQuery.me, name: "My workspaces" },
{ query: workspaceFilterQuery.all, name: "All workspaces" },
type FilterPreset = {
query: string;
name: string;
};

// Can't use as const declarations to make arrays deep readonly because that
// interferes with the type contracts for Filter
const PRESET_FILTERS: FilterPreset[] = [
{
query: workspaceFilterQuery.me,
name: "My workspaces",
},
{
query: workspaceFilterQuery.all,
name: "All workspaces",
},
{
query: workspaceFilterQuery.running,
name: "Running workspaces",
Expand All @@ -31,26 +44,32 @@ const PRESET_FILTERS = [
},
];

export const WorkspacesFilter = ({
filter,
error,
menus,
}: {
// Defined outside component so that the array doesn't get reconstructed each render
const PRESETS_WITH_DORMANT: FilterPreset[] = [
...PRESET_FILTERS,
{
query: workspaceFilterQuery.dormant,
name: "Dormant workspaces",
},
];

type WorkspaceFilterProps = {
filter: ReturnType<typeof useFilter>;
error?: unknown;
menus: {
user?: UserFilterMenu;
template: TemplateFilterMenu;
status: StatusFilterMenu;
};
}) => {
const presets = [...PRESET_FILTERS];
if (useIsWorkspaceActionsEnabled()) {
presets.push({
query: workspaceFilterQuery.dormant,
name: "Dormant workspaces",
});
}
};

export const WorkspacesFilter = ({
filter,
error,
menus,
}: WorkspaceFilterProps) => {
const actionsEnabled = useIsWorkspaceActionsEnabled();
const presets = actionsEnabled ? PRESET_FILTERS : PRESETS_WITH_DORMANT;

return (
<Filter
Expand Down