Skip to content

Show spinner during form save in ConfirmUpdate modals #949

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

Open
tozekoni wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Show spinner during form save in ConfirmUpdate modals #949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 deletions frontend/src/components/config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const ConfigLayout = <
children,
disabled,
onConfirm,
isSavePending,
onReset,
selector,
titleOther,
Expand All @@ -39,6 +40,7 @@ export const ConfigLayout = <
children: ReactNode;
disabled: boolean;
onConfirm: () => void;
isSavePending: boolean;
onReset: () => void;
selector?: ReactNode;
titleOther?: ReactNode;
Expand Down Expand Up @@ -75,6 +77,7 @@ export const ConfigLayout = <
previous={original}
content={update}
onConfirm={async () => onConfirm()}
loading={isSavePending}
disabled={disabled}
file_contents_language={file_contents_language}
key_listener
Expand Down Expand Up @@ -121,6 +124,7 @@ export const Config = <T,>({
disableSidebar,
set,
onSave,
isSavePending,
components,
selector,
titleOther,
Expand All @@ -132,6 +136,7 @@ export const Config = <T,>({
disableSidebar?: boolean;
set: React.Dispatch<SetStateAction<Partial<T>>>;
onSave: () => Promise<void>;
isSavePending: boolean,
selector?: ReactNode;
titleOther?: ReactNode;
components: Record<
Expand All @@ -154,6 +159,7 @@ export const Config = <T,>({
update={update}
disabled={disabled}
onConfirm={onConfirm}
isSavePending={isSavePending}
onReset={onReset}
selector={selector}
file_contents_language={file_contents_language}
Expand Down Expand Up @@ -199,6 +205,7 @@ export const Config = <T,>({
onConfirm={onConfirm}
disabled={disabled || !changesMade}
file_contents_language={file_contents_language}
loading={isSavePending}
/>
<Button
variant="outline"
Expand Down Expand Up @@ -331,6 +338,7 @@ export const Config = <T,>({
previous={original}
content={update}
onConfirm={onConfirm}
loading={isSavePending}
disabled={disabled}
file_contents_language={file_contents_language}
/>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/action/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const ActionConfig = ({ id }: { id: string }) => {
`action-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateAction");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateAction");
const { integrations } = useWebhookIntegrations();
const [id_or_name] = useWebhookIdOrName();

Expand All @@ -63,6 +63,7 @@ export const ActionConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/alerter/config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const AlerterConfig = ({ id }: { id: string }) => {
const config = useRead("GetAlerter", { alerter: id }).data?.config;
const global_disabled =
useRead("GetCoreInfo", {}).data?.ui_write_disabled ?? false;
const { mutateAsync } = useWrite("UpdateAlerter");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateAlerter");
const [update, set] = useLocalStorage<Partial<Types.AlerterConfig>>(
`alerter-${id}-update-v1`,
{}
Expand All @@ -29,6 +29,7 @@ export const AlerterConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/build/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const BuildConfig = ({
`build-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateBuild");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateBuild");
const { integrations } = useWebhookIntegrations();
const [id_or_name] = useWebhookIdOrName();

Expand Down Expand Up @@ -733,6 +733,7 @@ export const BuildConfig = ({
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={components}
file_contents_language="dockerfile"
/>
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/components/resources/builder/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const AwsBuilderConfig = ({ id }: { id: string }) => {
`aws-builder-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateBuilder");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateBuilder");
if (!config) return null;

const disabled = global_disabled || !canWrite;
Expand All @@ -49,6 +49,7 @@ const AwsBuilderConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: { type: "Aws", params: update } });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down Expand Up @@ -245,7 +246,7 @@ const ServerBuilderConfig = ({ id }: { id: string }) => {
`server-builder-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateBuilder");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateBuilder");
if (!config) return null;

const disabled = !canWrite;
Expand All @@ -259,6 +260,7 @@ const ServerBuilderConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: { type: "Server", params: update } });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down Expand Up @@ -305,7 +307,7 @@ const UrlBuilderConfig = ({ id }: { id: string }) => {
`url-builder-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateBuilder");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateBuilder");
if (!config) return null;

const disabled = !canWrite;
Expand All @@ -319,6 +321,7 @@ const UrlBuilderConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: { type: "Url", params: update } });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/deployment/config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const DeploymentConfig = ({
`deployment-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateDeployment");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateDeployment");

if (!config) return null;

Expand All @@ -59,6 +59,7 @@ export const DeploymentConfig = ({
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/procedure/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const ProcedureConfig = ({ id }: { id: string }) => {
`procedure-${id}-update-v1`,
{},
);
const { mutateAsync } = useWrite("UpdateProcedure");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateProcedure");
const { integrations } = useWebhookIntegrations();
const [id_or_name] = useWebhookIdOrName();

Expand All @@ -161,6 +161,7 @@ export const ProcedureConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/repo/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const RepoConfig = ({ id }: { id: string }) => {
`repo-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateRepo");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateRepo");
const { integrations } = useWebhookIntegrations();
const [id_or_name] = useWebhookIdOrName();

Expand All @@ -59,6 +59,7 @@ export const RepoConfig = ({ id }: { id: string }) => {
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={{
"": [
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/resource-sync/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const ResourceSyncConfig = ({
`sync-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateResourceSync");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateResourceSync");
const { integrations } = useWebhookIntegrations();
const [id_or_name] = useWebhookIdOrName();

Expand Down Expand Up @@ -581,6 +581,7 @@ export const ResourceSyncConfig = ({
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={components}
file_contents_language="fancy_toml"
/>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/server/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const ServerConfig = ({
`server-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateServer", {
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateServer", {
onSuccess: () => {
// In case of disabling to resolve unreachable alert
invalidate(["ListAlerts"]);
Expand All @@ -43,6 +43,7 @@ export const ServerConfig = ({
disabled={disabled}
original={config}
update={update}
isSavePending={isSavePending}
set={set}
onSave={async () => {
await mutateAsync({ id, config: update });
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/resources/stack/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const StackConfig = ({
`stack-${id}-update-v1`,
{}
);
const { mutateAsync } = useWrite("UpdateStack");
const { mutateAsync, isPending: isSavePending } = useWrite("UpdateStack");
const { integrations } = useWebhookIntegrations();
const [id_or_name] = useWebhookIdOrName();

Expand Down Expand Up @@ -906,6 +906,7 @@ export const StackConfig = ({
onSave={async () => {
await mutateAsync({ id, config: update });
}}
isSavePending={isSavePending}
components={components}
file_contents_language="yaml"
/>
Expand Down