feat: add inline actions into workspaces table #17636
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import { MissingBuildParameters } from "api/api"; | ||
| import { updateWorkspace } from "api/queries/workspaces"; | ||
| import type { | ||
| TemplateVersion, | ||
| Workspace, | ||
| WorkspaceBuild, | ||
| WorkspaceBuildParameter, | ||
| } from "api/typesGenerated"; | ||
| import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; | ||
| import { MemoizedInlineMarkdown } from "components/Markdown/Markdown"; | ||
| import { UpdateBuild F438 ParametersDialog } from "pages/WorkspacePage/UpdateBuildParametersDialog"; | ||
| import { type FC, useState } from "react"; | ||
| import { useMutation, useQueryClient } from "react-query"; | ||
|
|
||
| type UseWorkspaceUpdateOptions = { | ||
| workspace: Workspace; | ||
| latestVersion: TemplateVersion | undefined; | ||
| onSuccess?: (build: WorkspaceBuild) => void; | ||
| onError?: (error: unknown) => void; | ||
| }; | ||
|
|
||
| type UseWorkspaceUpdateResult = { | ||
| update: ( | ||
| hasConfirmed?: boolean, | ||
| buildParameters?: WorkspaceBuildParameter[], | ||
| ) => void; | ||
| isUpdating: boolean; | ||
| dialogs: { | ||
| updateConfirmation: UpdateConfirmationDialogProps; | ||
| missingBuildParameters: MissingBuildParametersDialogProps; | ||
| }; | ||
| }; | ||
|
|
||
| export const useWorkspaceUpdate = ({ | ||
|
There was a problem hiding this comment. Actually, now that I think about it, do we need to export the custom hook? We could keep it as an implementation detail, but couldn't we update There was a problem hiding this comment. Could you show me an example? Or a draft the interface/usage of it? |
||
| workspace, | ||
| latestVersion, | ||
| onSuccess, | ||
| onError, | ||
| }: UseWorkspaceUpdateOptions): UseWorkspaceUpdateResult => { | ||
| const queryClient = useQueryClient(); | ||
| const [isConfirmingUpdate, setIsConfirmingUpdate] = useState(false); | ||
|
|
||
| const updateWorkspaceOptions = updateWorkspace(workspace, queryClient); | ||
| const updateWorkspaceMutation = useMutation({ | ||
| ...updateWorkspaceOptions, | ||
| onSuccess: (build: WorkspaceBuild) => { | ||
| updateWorkspaceOptions.onSuccess(build); | ||
| onSuccess?.(build); | ||
| }, | ||
| onError, | ||
| }); | ||
|
|
||
| const update = ( | ||
| hasConfirmed = false, | ||
| buildParameters: WorkspaceBuildParameter[] = [], | ||
| ) => { | ||
| if (!hasConfirmed) { | ||
| setIsConfirmingUpdate(true); | ||
| return; | ||
| } | ||
|
|
||
| updateWorkspaceMutation.mutate(buildParameters); | ||
| setIsConfirmingUpdate(false); | ||
| }; | ||
|
|
||
| return { | ||
| update, | ||
|
There was a problem hiding this comment. I'm not opposed to having a general function that handles both the confirmed case and the non-confirmed case, but I'd prefer for that to be kept as an implementation detail. I feel like there's a risk of accidentally calling I think it'd be better if we did something like this: update: () => update()This also makes sure that the types can't lie to us There was a problem hiding this comment. I see... Maybe in this case, we could have two functions |
||
| isUpdating: updateWorkspaceMutation.isLoading, | ||
| dialogs: { | ||
| updateConfirmation: { | ||
| open: isConfirmingUpdate, | ||
| onClose: () => setIsConfirmingUpdate(false), | ||
| onConfirm: () => update(true), | ||
| latestVersion, | ||
| }, | ||
| missingBuildParameters: { | ||
| error: updateWorkspaceMutation.error, | ||
| onClose: () => { | ||
| updateWorkspaceMutation.reset(); | ||
| }, | ||
| onUpdate: (buildParameters: WorkspaceBuildParameter[]) => { | ||
| if (updateWorkspaceMutation.error instanceof MissingBuildParameters) { | ||
| update(true, buildParameters); | ||
| } | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| type WorkspaceUpdateDialogsProps = { | ||
| updateConfirmation: UpdateConfirmationDialogProps; | ||
| missingBuildParameters: MissingBuildParametersDialogProps; | ||
| }; | ||
|
|
||
| export const WorkspaceUpdateDialogs: FC<WorkspaceUpdateDialogsProps> = ({ | ||
|
There was a problem hiding this comment. Because this file is exporting components that aren't simple pass-through components like context providers, I feel like it's probably better to rename the file to put more emphasis on the components over the hook (could probably name it WorkspaceUpdateDialogs?). The hook just feels like an implementation detail There was a problem hiding this comment. Especially since this isn't the first There was a problem hiding this comment. Makes total sense 👍 |
||
| updateConfirmation, | ||
| missingBuildParameters, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <UpdateConfirmationDialog {...updateConfirmation} /> | ||
| <MissingBuildParametersDialog {...missingBuildParameters} /> | ||
| </> | ||
|
There was a problem hiding this comment. I'm also wondering: do we want to make sure that both dialogs are mounted together? I feel like passing two separate, custom objects as props is a bit much, but I don't know if we get away with splitting them up as separate exports There was a problem hiding this comment. I was wondering about that too 🤔. Since they are suppose to always working together I thought that would be better to enforce this by exporting only one component with the two dialogs, but I'm open for suggestions. |
||
| ); | ||
| }; | ||
|
|
||
| type UpdateConfirmationDialogProps = { | ||
| open: boolean; | ||
| onClose: () => void; | ||
| onConfirm: () => void; | ||
| latestVersion?: TemplateVersion; | ||
| }; | ||
|
|
||
| const UpdateConfirmationDialog: FC<UpdateConfirmationDialogProps> = ({ | ||
| latestVersion, | ||
| ...dialogProps | ||
| }) => { | ||
| return ( | ||
| <ConfirmDialog | ||
| {...dialogProps} | ||
| hideCancel={false} | ||
| title="Update workspace?" | ||
| confirmText="Update" | ||
| description={ | ||
| <div className="flex flex-col gap-2"> | ||
| <p> | ||
| Updating your workspace will start the workspace on the latest | ||
| template version. This can{" "} | ||
| <strong>delete non-persistent data</strong>. | ||
| </p> | ||
| {latestVersion?.message && ( | ||
| <MemoizedInlineMarkdown allowedElements={["ol", "ul", "li"]}> | ||
| {latestVersion.message} | ||
| </MemoizedInlineMarkdown> | ||
| )} | ||
| </div> | ||
| } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| type MissingBuildParametersDialogProps = { | ||
| error: unknown; | ||
| onClose: () => void; | ||
| onUpdate: (buildParameters: WorkspaceBuildParameter[]) => void; | ||
| }; | ||
|
|
||
| const MissingBuildParametersDialog: FC<MissingBuildParametersDialogProps> = ({ | ||
| error, | ||
| ...dialogProps | ||
| }) => { | ||
| return ( | ||
| <UpdateBuildParametersDialog | ||
| missedParameters={ | ||
| error instanceof MissingBuildParameters ? error.parameters : [] | ||
| } | ||
| open={error instanceof MissingBuildParameters} | ||
| {...dialogProps} | ||
| /> | ||
| ); | ||
| }; | ||
Uh oh!
There was an error while loading. Please reload this page.