Skip to content

feat(site): add WorkspacesButton component #10011

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 26 commits into from
Oct 5, 2023
Merged

feat(site): add WorkspacesButton component #10011

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
f0a2aae
chore: Add OverflowY component
Parkreiner Oct 3, 2023
2420167
chore: Add PopoverContainer component
Parkreiner Oct 3, 2023
88d73af
chore: Add SearchBox
Parkreiner Oct 3, 2023
209eed4
feat: add WorkspacesButton
Parkreiner Oct 3, 2023
9300b11
chore: Install MUI utils package
Parkreiner Oct 3, 2023
2b13f1e
chore: integrate WorkspacesButton
Parkreiner Oct 3, 2023
e86207e
chore: reorganize files
Parkreiner Oct 3, 2023
5b249d5
fix: resolve hover state visual glitch
Parkreiner Oct 3, 2023
b1e1271
chore: Add story for OverflowY
Parkreiner Oct 3, 2023
b367495
fix: remove dynamic name from OverflowY story
Parkreiner Oct 3, 2023
5a34769
chore: update stories again
Parkreiner Oct 3, 2023
b9f6cb8
fix: remove all references to icons (for now)
Parkreiner Oct 3, 2023
1996e2b
refactor: move flex shrink to be OverflowY concern
Parkreiner Oct 4, 2023
5ecbbe6
fix: remove needless render key
Parkreiner Oct 4, 2023
55ab10a
fix: make sure popover closes before navigation
Parkreiner Oct 5, 2023
1a01127
refactor: clean up WorkspacesButton to use more native MUI
Parkreiner Oct 5, 2023
80928c6
Merge branch 'main' into mes/workspace-button-2
Parkreiner Oct 5, 2023
55c6061
fix: update integration into rest of view
Parkreiner Oct 5, 2023
5aea06f
fix: remove JS security concern
Parkreiner Oct 5, 2023
2aee4fe
refactor: parameterize button language
Parkreiner Oct 5, 2023
12ac56f
revert: undo sql/go file change
Parkreiner Oct 5, 2023
99f2656
fix: remove permissions dependency
Parkreiner Oct 5, 2023
430e30c
fix: simplify button prop types
Parkreiner Oct 5, 2023
ff37ab5
fix: lift data dependencies to page component
Parkreiner Oct 5, 2023
1b934ab
refactor: clean up props
Parkreiner Oct 5, 2023
84c6642
fix: update dependencies again for Storybook
Parkreiner Oct 5, 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
chore: reorganize files
  • Loading branch information
@Parkreiner
Parkreiner committed Oct 3, 2023
commit e86207ed8a4daf08b7c310cef44fc79a30171154
3 changes: 3 additions & 0 deletions ...components/WorkspacesButton/OverflowY.tsx → site/src/components/OverflowY/OverflowY.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/**
* @file Provides reusable vertical overflow behavior.
*/
import { type ReactNode } from "react";
import { type SystemStyleObject } from "@mui/system";
import Box from "@mui/system/Box";
Expand Down
7 changes: 7 additions & 0 deletions ...nts/WorkspacesButton/PopoverContainer.tsx → ...nts/PopoverContainer/PopoverContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
/**
* @file Abstracts over MUI's Popover component to simplify using it (and hide)
* some of the wonkier parts of the API.
Copy link
Member

Choose a reason for hiding this comment

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

Might be useful to hint at some of the wonkier API parts of MUI, or maybe link to their docs.

Copy link
Member Author

@Parkreiner Parkreiner Oct 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Yeah, good point. I guess if I had to summarize up my concern, it feels to me like their current API (as in, the entire conceit of it) defeats the point of React?

Like, the point of JSX is that you don't have to touch live DOM nodes during actual render logic, and only have to worry about them when you use effects and event handlers as escape hatches. But MUI has you take a whole real DOM node (which is physically incapable of existing on the first render), and store it in React state, to be accessed in renders

It feels backwards to me, and I've seen the component get set up multiple different ways in the codebase to make it happy, when it feels like there should be one obvious way of doing things

Copy link
Member

@Kira-Pilot Kira-Pilot Oct 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

it feels to me like their current API (as in, the entire conceit of it) defeats the point of React?

lolol

Your abstraction makes sense to me. Maybe you could make a contribution!

*
* Just place a button and some content in the component, and things just work.
* No setup needed with hooks or refs.
*/
import {
type KeyboardEvent,
type ReactElement,
Expand Down
8 changes: 5 additions & 3 deletions ...nts/WorkspacesButton/WorkspacesButton.tsx → ...pages/WorkspacesPage/WorkspacesButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@ import { useOrganizationId, usePermissions } from "hooks";
import { useQuery } from "@tanstack/react-query";
import { type Template } from "api/typesGenerated";
import { templates } from "api/queries/templates";

import { Link as RouterLink } from "react-router-dom";
import Box from "@mui/system/Box";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import AddIcon from "@mui/icons-material/AddOutlined";
import OpenIcon from "@mui/icons-material/OpenInNewOutlined";

import { Loader } from "components/Loader/Loader";
import { PopoverContainer } from "./PopoverContainer";
import { OverflowY } from "./OverflowY";
import { SearchBox } from "./SearchBox";
import { PopoverContainer } from "components/PopoverContainer/PopoverContainer";
import { OverflowY } from "components/OverflowY/OverflowY";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Avatar } from "components/Avatar/Avatar";
import { SearchBox } from "./WorkspacesSearchBox";

const ICON_SIZE = 18;
const COLUMN_GAP = 1.5;
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
import { WorkspacesButton } from "components/WorkspacesButton/WorkspacesButton";
import { WorkspacesButton } from "./WorkspacesButton";

export const Language = {
pageTitle: "Workspaces",
Expand Down
6 changes: 6 additions & 0 deletions ...components/WorkspacesButton/SearchBox.tsx → ...es/WorkspacesPage/WorkspacesSearchBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/**
* @file Defines a controlled searchbox component for processing form state.
*
* Not defined as a top-level component just yet, because it's not clear how
* reusable this is outside of workspace dropdowns.
*/
import {
type ForwardedRef,
type KeyboardEvent,
Expand Down