Skip to content

chore: update workspaces page filter to include organization controls #14597

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.

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 34 commits into from
Sep 16, 2024

Conversation

Parkreiner
Copy link
Member

@Parkreiner Parkreiner commented Sep 6, 2024

Part 2/3 for #14435

Changes made

  • Added organizations dropdown to the workspaces page
  • Refactored file names and moved constants around for clarity
  • Updated some CSS for the filter so that the search box doesn't have a risk of shrinking so much that it isn't even usable
  • Updated main Filter container so that it always controls its own skeleton styling
  • Removed some of the previous wonky destructuring syntax that we were using
  • Fixed the skeleton for the audit page to account for its organization dropdown group (this was missed in a prior review)

Screenshots

Screenshot 2024-09-09 at 1 04 43 PM

Notes

  • I really, really think that we need to refactor/rewrite the filter logic. Not only is the control flow hard to understand, but we have a lot of non-idiomatic code that I think we're only doing because we're scared of touching the main logic. We're currently storing JSX in the React Query cache, which seems really, really suspect

<>
<SearchFieldSkeleton />
<MenuSkeleton />
Copy link
Member Author

Choose a reason for hiding this comment

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

We forgot to put a fourth MenuSkeleton here for the orgs dropdown

Copy link
Member

Choose a reason for hiding this comment

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

it needs to be conditional on showOrganizations :^)

Copy link
Member Author

@Parkreiner Parkreiner Sep 12, 2024

Choose a reason for hiding this comment

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

Whoops

@@ -180,101 +175,3 @@ const ResourceTypeMenu: FC<ResourceTypeMenuProps> = ({ menu, width }) => {
/>
);
};

Copy link
Member Author

Choose a reason for hiding this comment

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

All moved to the orgs/filtering file

Comment on lines +200 to +203
<>
<BaseSkeleton width="100%" />
{optionsSkeleton}
</>
Copy link
Member Author

Choose a reason for hiding this comment

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

Inlined the base skeleton because:

  1. I don't think there will ever be a situation where we don't want a skeleton for the main search box itself
  2. It felt weird that the component was never in control of any of its skeletons

@Parkreiner Parkreiner marked this pull request as ready for review September 9, 2024 17:12
@Parkreiner Parkreiner requested a review from aslilac September 9, 2024 17:12
Copy link
Member

@aslilac aslilac left a comment

Choose a reason for hiding this comment

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

wonderful 😄

@@ -1,6 +1,6 @@
import { API } from "api/api";
import type { AuditLogResponse } from "api/typesGenerated";
import { useFilterParamsKey } from "components/Filter/filter";
import { useFilterParamsKey } from "components/Filter/Filter";
Copy link
Member

Choose a reason for hiding this comment

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

MY HERO

@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
<SelectMenuTrigger>
<SelectMenuButton
startIcon={selectedOption?.startIcon}
css={{ width, flexGrow: 1 }}
css={{ flexBasis: width, flexGrow: 1 }}
Copy link
Member

Choose a reason for hiding this comment

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

flexBasis!!!!! you're literally so good at your job

const addMeAsFirstOption = (options: SelectFilterOption[]) => {
options = options.filter((option) => option.value !== me.username);
const addMeAsFirstOption = (options: readonly SelectFilterOption[]) => {
const filtered = options.filter((o) => o.value !== me.username);
Copy link
Member

Choose a reason for hiding this comment

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

the only way this line would make me happier is if you did the thing I like where the closure names the parameter it

Comment on lines 24 to 27
// Have to specify min width so that, as we keep adding more and
// control options to the filter row, the text box doesn't have a
// risk of shrinking so much that it becomes un-clickable
css={{ minWidth: "320px" }}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
// Have to specify min width so that, as we keep adding more and
// control options to the filter row, the text box doesn't have a
// risk of shrinking so much that it becomes un-clickable
css={{ minWidth: "320px" }}
// We specify `minWidth` so that the text box can't shrink so much that
// it becomes un-clickable as we add more filter controls.

<>
<SearchFieldSkeleton />
<MenuSkeleton />
Copy link
Member

Choose a reason for hiding this comment

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

it needs to be conditional on showOrganizations :^)

menu: StatusFilterMenu;
}>;

export const StatusMenu: FC<StatusMenuProps> = ({ width, menu }) => {
Copy link
Member

Choose a reason for hiding this comment

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

thank you 🙏

Base automatically changed from mes/filter-work-1 to main September 16, 2024 20:17
@Parkreiner Parkreiner enabled auto-merge (squash) September 16, 2024 20:40
@Parkreiner Parkreiner merged commit 5aa54be into main Sep 16, 2024
27 checks passed
@Parkreiner Parkreiner deleted the mes/filter-work-2 branch September 16, 2024 20:45
@github-actions github-actions bot locked and limited conversation to collaborators Sep 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants