Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: show organization name in workspaces table#14547

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Parkreiner merged 4 commits intomainfrommes/orgs-table-update
Sep 5, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
2 changes: 1 addition & 1 deletionsite/src/components/AvatarData/AvatarData.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
css={{
fontSize: 13,
color: theme.palette.text.secondary,
lineHeight:"150%",
lineHeight:1.5,
Copy link
Member

Choose a reason for hiding this comment

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

ah the wonderful subtleties of css. so annoying that this actually means something different. 🙃

Copy link
MemberAuthor

Choose a reason for hiding this comment

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

CSS is so silly sometimes

maxWidth: 540,
}}
>
Expand Down
28 changes: 28 additions & 0 deletionssite/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { expect, within } from "@storybook/test";
import {
type Workspace,
type WorkspaceStatus,
Expand DownExpand Up@@ -265,3 +266,30 @@ export const InvalidPageNumber: Story = {
page: 1000,
},
};

export const ShowOrganizations: Story = {
args: {
workspaces: [
{
...MockWorkspace,
organization_name: "Limbus Co.",
},
],
},

parameters: {
showOrganizations: true,
},

play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const accessibleTableCell = await canvas.findByRole("cell", {
// Need whitespace classes because different parts of the element
// are going in different spans, and Storybook doesn't consolidate
// these
name: /org\s?(?:anization)?\s?:\s?Limbus Co\./i,
});

expect(accessibleTableCell).toBeDefined();
},
Comment on lines +284 to +294
Copy link
MemberAuthor

Choose a reason for hiding this comment

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

Just wanted to make sure that I understand the limitations around decorators: they're basically assumed to always be static values, right? There's no easy way to make a decorator re-render with a new value?

Copy link
Member

Choose a reason for hiding this comment

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

each "decorator" undergoes a small transformation to get turned into a component by storybook. there's no way to force a rerender from the outside, just like any other component. being a component tho, they can call hooks and have state, which is kind of non-obvious.

};
25 changes: 23 additions & 2 deletionssite/src/pages/WorkspacesPage/WorkspacesTable.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { visuallyHidden } from "@mui/utils";
import type { Template, Workspace } from "api/typesGenerated";
import { ExternalAvatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/AvatarData/AvatarData";
Expand All@@ -20,6 +21,7 @@ import {
TableRowSkeleton,
} from "components/TableLoader/TableLoader";
import { useClickableTableRow } from "hooks/useClickableTableRow";
import { useDashboard } from "modules/dashboard/useDashboard";
import { WorkspaceDormantBadge } from "modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge";
import { WorkspaceOutdatedTooltip } from "modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
Expand DownExpand Up@@ -52,6 +54,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
canCreateTemplate,
}) => {
const theme = useTheme();
const dashboard = useDashboard();

return (
<TableContainer>
Expand DownExpand Up@@ -172,7 +175,12 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
)}
</Stack>
}
subtitle={workspace.owner_name}
subtitle={
<div>
<span css={{ ...visuallyHidden }}>User: </span>
{workspace.owner_name}
</div>
}
avatar={
<ExternalAvatar
src={workspace.template_icon}
Expand All@@ -189,7 +197,20 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
</TableCell>

<TableCell>
{getDisplayWorkspaceTemplateName(workspace)}
<div>{getDisplayWorkspaceTemplateName(workspace)}</div>

{dashboard.showOrganizations && (
<div
css={{
fontSize: 13,
color: theme.palette.text.secondary,
lineHeight: 1.5,
}}
>
<span css={{ ...visuallyHidden }}>Organization: </span>
{workspace.organization_name}
</div>
)}
</TableCell>

<TableCell>
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp