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(site): show favorite workspaces in ui#11875

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
johnstcn merged 9 commits intomainfromcj/ui-favorite-workspace
Jan 29, 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
8 changes: 8 additions & 0 deletionssite/src/api/api.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1688,3 +1688,11 @@ export const updateHealthSettings = async (
);
return response.data;
};

export const putFavoriteWorkspace = async (workspaceID: string) => {
await axios.put(`/api/v2/workspaces/${workspaceID}/favorite`);
};

export const deleteFavoriteWorkspace = async (workspaceID: string) => {
await axios.delete(`/api/v2/workspaces/${workspaceID}/favorite`);
};
27 changes: 27 additions & 0 deletionssite/src/api/queries/workspaces.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -265,3 +265,30 @@ const updateWorkspaceBuild = async (
queryKey: workspaceBuildsKey(build.workspace_id),
});
};

export const toggleFavorite = (
workspace: Workspace,
queryClient: QueryClient,
) => {
return {
mutationFn: () => {
if (workspace.favorite) {
return API.deleteFavoriteWorkspace(workspace.id);
} else {
return API.putFavoriteWorkspace(workspace.id);
}
},
onSuccess: async () => {
queryClient.setQueryData(
workspaceByOwnerAndNameKey(workspace.owner_name, workspace.name),
{ ...workspace, favorite: !workspace.favorite },
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

You also may want to invalidate the "workspace list" query data.

johnstcn reacted with thumbs up emoji
await queryClient.invalidateQueries({
queryKey: workspaceByOwnerAndNameKey(
workspace.owner_name,
workspace.name,
),
});
},
};
};
7 changes: 7 additions & 0 deletionssite/src/pages/WorkspacePage/Workspace.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -90,6 +90,13 @@ export const Running: Story = {
},
};

export const Favorite: Story = {
args: {
...Running.args,
workspace: Mocks.MockFavoriteWorkspace,
},
};

export const WithoutUpdateAccess: Story = {
args: {
...Running.args,
Expand Down
3 changes: 3 additions & 0 deletionssite/src/pages/WorkspacePage/Workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,6 +33,7 @@ export interface WorkspaceProps {
handleSettings: () => void;
handleChangeVersion: () => void;
handleDormantActivate: () => void;
handleToggleFavorite: () => void;
isUpdating: boolean;
isRestarting: boolean;
workspace: TypesGen.Workspace;
Expand DownExpand Up@@ -64,6 +65,7 @@ export const Workspace: FC<WorkspaceProps> = ({
handleSettings,
handleChangeVersion,
handleDormantActivate,
handleToggleFavorite,
workspace,
isUpdating,
isRestarting,
Expand DownExpand Up@@ -131,6 +133,7 @@ export const Workspace: FC<WorkspaceProps> = ({
handleBuildRetryDebug={handleBuildRetryDebug}
handleChangeVersion={handleChangeVersion}
handleDormantActivate={handleDormantActivate}
handleToggleFavorite={handleToggleFavorite}
canRetryDebugMode={canRetryDebugMode}
canChangeVersions={canChangeVersions}
isUpdating={isUpdating}
Expand Down
23 changes: 23 additions & 0 deletionssite/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,8 @@ import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import RetryIcon from "@mui/icons-material/BuildOutlined";
import RetryDebugIcon from "@mui/icons-material/BugReportOutlined";
import Star from "@mui/icons-material/Star";
import StarBorder from "@mui/icons-material/StarBorder";
import { type FC } from "react";
import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
import { BuildParametersPopover } from "./BuildParametersPopover";
Expand DownExpand Up@@ -190,3 +192,24 @@ export const RetryButton: FC<RetryButtonProps> = ({
</TopbarButton>
);
};

interface FavoriteButtonProps {
onToggle: (workspaceID: string) => void;
workspaceID: string;
isFavorite: boolean;
}

export const FavoriteButton: FC<FavoriteButtonProps> = ({
onToggle: onToggle,
workspaceID,
isFavorite,
}) => {
return (
<TopbarButton
startIcon={isFavorite ? <Star /> : <StarBorder />}
onClick={() => onToggle(workspaceID)}
>
{isFavorite ? "Unfavorite" : "Favorite"}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Since this button can have two states, favorite and unfavorite, I would create a story in a storybook for both scenarios.

johnstcn reacted with thumbs up emoji
</TopbarButton>
);
};
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import {
UpdateButton,
ActivateButton,
RetryButton,
FavoriteButton,
} from "./Buttons";

import Divider from "@mui/material/Divider";
Expand All@@ -30,6 +31,7 @@ import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined";

export interface WorkspaceActionsProps {
workspace: Workspace;
handleToggleFavorite: () => void;
handleStart: (buildParameters?: WorkspaceBuildParameter[]) => void;
handleStop: () => void;
handleRestart: (buildParameters?: WorkspaceBuildParameter[]) => void;
Expand All@@ -51,6 +53,7 @@ export interface WorkspaceActionsProps {

export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
workspace,
handleToggleFavorite,
handleStart,
handleStop,
handleRestart,
Expand DownExpand Up@@ -131,6 +134,13 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
activating: <ActivateButton loading handleAction={handleDormantActivate} />,
retry: <RetryButton handleAction={handleRetry} />,
retryDebug: <RetryButton debug handleAction={handleRetryDebug} />,
toggleFavorite: (
<FavoriteButton
workspaceID={workspace.id}
isFavorite={workspace.favorite}
onToggle={handleToggleFavorite}
/>
),
};

return (
Expand All@@ -150,6 +160,8 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({

{showCancel && <CancelButton handleAction={handleCancel} />}

{buttonMapping.toggleFavorite}

<MoreMenu>
<MoreMenuTrigger>
<TopbarIconButton
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export const actionTypes = [
"updating",
"activate",
"activating",
"toggleFavorite",

// There's no need for a retrying state because retrying starts a transition
// into one of the starting, stopping, or deleting states (based on the
Expand Down
9 changes: 9 additions & 0 deletionssite/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ import {
updateWorkspace,
stopWorkspace,
startWorkspace,
toggleFavorite,
cancelBuild,
} from "api/queries/workspaces";
import { Alert } from "components/Alert/Alert";
Expand DownExpand Up@@ -144,6 +145,11 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
startWorkspace(workspace, queryClient),
);

// Toggle workspace favorite
const toggleFavoriteMutation = useMutation(
toggleFavorite(workspace, queryClient),
);

// Cancel build
const cancelBuildMutation = useMutation(cancelBuild(workspace, queryClient));

Expand DownExpand Up@@ -217,6 +223,9 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
displayError(message);
}
}}
handleToggleFavorite={() => {
toggleFavoriteMutation.mutate();
}}
latestVersion={latestVersion}
canChangeVersions={canChangeVersions}
hideSSHButton={featureVisibility["browser_only"]}
Expand Down
3 changes: 3 additions & 0 deletionssite/src/pages/WorkspacePage/WorkspaceTopbar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -63,6 +63,7 @@ export interface WorkspaceProps {
template: TypesGen.Template;
permissions: WorkspacePermissions;
latestVersion?: TypesGen.TemplateVersion;
handleToggleFavorite: () => void;
}

export const WorkspaceTopbar: FC<WorkspaceProps> = ({
Expand All@@ -75,6 +76,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
handleSettings,
handleChangeVersion,
handleDormantActivate,
handleToggleFavorite,
workspace,
isUpdating,
isRestarting,
Expand DownExpand Up@@ -278,6 +280,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
handleRetryDebug={handleBuildRetryDebug}
handleChangeVersion={handleChangeVersion}
handleDormantActivate={handleDormantActivate}
handleToggleFavorite={handleToggleFavorite}
canRetryDebug={canRetryDebugMode}
canChangeVersions={canChangeVersions}
isUpdating={isUpdating}
Expand Down
11 changes: 11 additions & 0 deletionssite/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -165,6 +165,17 @@ export const AllStates: Story = {
},
};

export const AllStatesWithFavorites: Story = {
args: {
workspaces: allWorkspaces.map((workspace, i) => ({
...workspace,
// NOTE: testing sort order is not relevant here.
favorite: i % 2 === 0,
})),
count: allWorkspaces.length,
},
};

const icons = [
"/icon/code.svg",
"/icon/aws.svg",
Expand Down
4 changes: 4 additions & 0 deletionssite/src/pages/WorkspacesPage/WorkspacesTable.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import TableRow from "@mui/material/TableRow";
import Checkbox from "@mui/material/Checkbox";
import Skeleton from "@mui/material/Skeleton";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import Star from "@mui/icons-material/Star";
import { useTheme } from "@emotion/react";
import { type FC, type ReactNode } from "react";
import { useNavigate } from "react-router-dom";
Expand DownExpand Up@@ -150,6 +151,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
alignItems="center"
>
{workspace.name}
{workspace.favorite && (
<Star css={{ width: 16, height: 16 }} />
)}
{workspace.outdated && (
<WorkspaceOutdatedTooltip
templateName={workspace.template_name}
Expand Down
34 changes: 34 additions & 0 deletionssite/src/pages/WorkspacesPage/batchActions.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
import { useMutation } from "react-query";
import {
deleteWorkspace,
deleteFavoriteWorkspace,
putFavoriteWorkspace,
startWorkspace,
stopWorkspace,
updateWorkspace,
Expand DownExpand Up@@ -63,12 +65,44 @@ export function useBatchActions(options: UseBatchActionsProps) {
},
});

const favoriteAllMutation = useMutation({
mutationFn: (workspaces: Workspace[]) => {
return Promise.all(
workspaces
.filter((w) => !w.favorite)
.map((w) => putFavoriteWorkspace(w.id)),
);
},
onSuccess,
onError: () => {
displayError("Failed to favorite some workspaces");
},
});

const unfavoriteAllMutation = useMutation({
mutationFn: (workspaces: Workspace[]) => {
return Promise.all(
workspaces
.filter((w) => w.favorite)
.map((w) => deleteFavoriteWorkspace(w.id)),
);
},
onSuccess,
onError: () => {
displayError("Failed to unfavorite some workspaces");
},
});

return {
favoriteAll: favoriteAllMutation.mutateAsync,
unfavoriteAll: unfavoriteAllMutation.mutateAsync,
startAll: startAllMutation.mutateAsync,
stopAll: stopAllMutation.mutateAsync,
deleteAll: deleteAllMutation.mutateAsync,
updateAll: updateAllMutation.mutateAsync,
isLoading:
favoriteAllMutation.isLoading ||
unfavoriteAllMutation.isLoading ||
startAllMutation.isLoading ||
stopAllMutation.isLoading ||
deleteAllMutation.isLoading,
Expand Down
8 changes: 7 additions & 1 deletionsite/src/testHelpers/entities.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,7 @@ import {
type DeploymentConfig,
} from "api/api";
import { FieldError } from "api/errors";
importtype* as TypesGen from "api/typesGenerated";
import * as TypesGen from "api/typesGenerated";
import range from "lodash/range";
import type { Permissions } from "contexts/auth/permissions";
import { TemplateVersionFiles } from "utils/templateVersion";
Expand DownExpand Up@@ -1020,6 +1020,12 @@ export const MockWorkspace: TypesGen.Workspace = {
},
automatic_updates: "never",
allow_renames: true,
favorite: false,
};

export const MockFavoriteWorkspace: TypesGen.Workspace = {
...MockWorkspace,
id: "test-favorite-workspace",
favorite: true,
};

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