Add loader to redeploy confirm dialog button

2024-10-22 14:38:22 +05:30 · 2024-10-22 14:38:22 +05:30 · da6dd3c442
commit da6dd3c442
parent 2b00028935
18 changed files with 187 additions and 96 deletions
--- a/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx
@ -10,11 +10,16 @@ import {
  LinkChainIcon,
 } from 'components/shared/CustomIcon';
 import { TagProps } from 'components/shared/Tag';
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';

 interface ChangeStateToProductionDialogProps extends ConfirmDialogProps {
  deployment: Deployment;
  newDeployment?: Deployment;
  domains: Domain[];
+  isConfirmButtonLoading?: boolean;
 }

 export const ChangeStateToProductionDialog = ({
@ -24,6 +29,7 @@ export const ChangeStateToProductionDialog = ({
  open,
  handleCancel,
  handleConfirm,
+  isConfirmButtonLoading,
  ...props
 }: ChangeStateToProductionDialogProps) => {
  const currentChip = {
@ -41,6 +47,14 @@ export const ChangeStateToProductionDialog = ({
      handleCancel={handleCancel}
      open={open}
      handleConfirm={handleConfirm}
+      confirmButtonProps={{
+        disabled: isConfirmButtonLoading,
+        rightIcon: isConfirmButtonLoading ? (
+          <LoadingIcon className="animate-spin" />
+        ) : (
+          <ArrowRightCircleFilledIcon />
+        ),
+      }}
    >
      <div className="flex flex-col gap-7">
        <div className="flex flex-col gap-3">
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@ -25,7 +25,8 @@ type ConfigureDeploymentFormValues = {
  maxPrice?: string;
 };

-type ConfigureFormValues = ConfigureDeploymentFormValues & EnvironmentVariablesFormValues;
+type ConfigureFormValues = ConfigureDeploymentFormValues &
+  EnvironmentVariablesFormValues;

 const Configure = () => {
  const [isLoading, setIsLoading] = useState(false);
@ -55,7 +56,10 @@ const Configure = () => {
  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
  const buttonSize = isTabletView ? { size: 'lg' as const } : {};

-  const createProject = async (data: FieldValues, envVariables: AddEnvironmentVariableInput[]): Promise<string> => {
+  const createProject = async (
+    data: FieldValues,
+    envVariables: AddEnvironmentVariableInput[],
+  ): Promise<string> => {
    setIsLoading(true);
    let projectId: string | null = null;

@ -68,7 +72,7 @@ const Configure = () => {
      } else if (data.option === 'Auction') {
        auctionParams = {
          numProviders: Number(data.numProviders!),
-          maxPrice: (data.maxPrice!).toString(),
+          maxPrice: data.maxPrice!.toString(),
        };
      }

@ -86,7 +90,7 @@ const Configure = () => {
          projectData,
          lrn,
          auctionParams,
-          envVariables
+          envVariables,
        );

        projectId = addProjectFromTemplate.id;
@ -101,7 +105,7 @@ const Configure = () => {
          },
          lrn,
          auctionParams,
-          envVariables
+          envVariables,
        );

        projectId = addProject.id;
@ -127,7 +131,8 @@ const Configure = () => {

  const handleFormSubmit = useCallback(
    async (createFormData: FieldValues) => {
-      const environmentVariables = createFormData.variables.map((variable: any) => {
+      const environmentVariables = createFormData.variables.map(
+        (variable: any) => {
          return {
            key: variable.key,
            value: variable.value,
@ -135,9 +140,13 @@ const Configure = () => {
              .filter(([, value]) => value === true)
              .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)),
          };
-      });
+        },
+      );

-      const projectId = await createProject(createFormData, environmentVariables);
+      const projectId = await createProject(
+        createFormData,
+        environmentVariables,
+      );

      await client.getEnvironmentVariables(projectId);

@ -147,19 +156,19 @@ const Configure = () => {
              `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`,
            )
          : navigate(
-            `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`
+              `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`,
            );
      } else {
        createFormData.option === 'Auction'
          ? navigate(
-            `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`
+              `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`,
            )
          : navigate(
-            `/${orgSlug}/projects/create/deploy?projectId=${projectId}`
+              `/${orgSlug}/projects/create/deploy?projectId=${projectId}`,
            );
      }
    },
-    [client, createProject, dismiss, toast]
+    [client, createProject, dismiss, toast],
  );

  return (
@ -190,10 +199,15 @@ const Configure = () => {
                    value={
                      {
                        value: value || 'LRN',
-                        label: value === 'Auction' ? 'Create Auction' : 'Deployer LRN',
+                        label:
+                          value === 'Auction'
+                            ? 'Create Auction'
+                            : 'Deployer LRN',
                      } as SelectOption
                    }
-                    onChange={(value) => onChange((value as SelectOption).value)}
+                    onChange={(value) =>
+                      onChange((value as SelectOption).value)
+                    }
                    options={[
                      { value: 'LRN', label: 'Deployer LRN' },
                      { value: 'Auction', label: 'Create Auction' },
@ -205,7 +219,10 @@ const Configure = () => {

            {selectedOption === 'LRN' && (
              <div className="flex flex-col justify-start gap-4 mb-6">
-                <Heading as="h5" className="text-sm font-sans text-elements-low-em">
+                <Heading
+                  as="h5"
+                  className="text-sm font-sans text-elements-low-em"
+                >
                  The app will be deployed by the configured deployer
                </Heading>
                <span className="text-sm text-elements-high-em">
@ -225,8 +242,12 @@ const Configure = () => {
            {selectedOption === 'Auction' && (
              <>
                <div className="flex flex-col justify-start gap-4 mb-6">
-                  <Heading as="h5" className="text-sm font-sans text-elements-low-em">
-                    Set the number of deployers and maximum price for each deployment
+                  <Heading
+                    as="h5"
+                    className="text-sm font-sans text-elements-low-em"
+                  >
+                    Set the number of deployers and maximum price for each
+                    deployment
                  </Heading>
                  <span className="text-sm text-elements-high-em">
                    Number of Deployers
--- a/packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx
+++ b/packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx
@ -39,7 +39,7 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
    }

    navigate(
-      `configure?owner=${repository.owner?.login}&name=${repository.name}&defaultBranch=${repository.default_branch}&fullName=${repository.full_name}&orgSlug=${orgSlug}`
+      `configure?owner=${repository.owner?.login}&name=${repository.name}&defaultBranch=${repository.default_branch}&fullName=${repository.full_name}&orgSlug=${orgSlug}`,
    );
  }, [client, repository, orgSlug, setIsLoading, navigate, toast]);

--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@ -34,13 +34,13 @@ import { formatAddress } from '../../../../utils/format';
 import { DeploymentMenu } from './DeploymentMenu';

 const DEPLOYMENT_LOGS_STYLE = {
-  backgroundColor: "rgba(0,0,0, .9)",
-  padding: "2em",
-  borderRadius: "0.5em",
-  marginLeft: "0.5em",
-  marginRight: "0.5em",
-  color: "gray",
-  fontSize: "small",
+  backgroundColor: 'rgba(0,0,0, .9)',
+  padding: '2em',
+  borderRadius: '0.5em',
+  marginLeft: '0.5em',
+  marginRight: '0.5em',
+  color: 'gray',
+  fontSize: 'small',
 };

 interface DeployDetailsCardProps {
@ -95,7 +95,11 @@ const DeploymentDetailsCard = ({
    const logs = await res.text();
    setDeploymentLogs(logs);
    handleOpenDialog();
-  }, [deployment.deployer.deployerApiUrl, deployment.applicationDeploymentRequestId, handleOpenDialog]);
+  }, [
+    deployment.deployer.deployerApiUrl,
+    deployment.applicationDeploymentRequestId,
+    handleOpenDialog,
+  ]);

  const renderDeploymentStatus = useCallback(
    (className?: string) => {
@ -201,7 +205,12 @@ const DeploymentDetailsCard = ({
          prodBranchDomains={prodBranchDomains}
        />
      </div>
-      <Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">
+      <Dialog
+        open={openDialog}
+        onClose={handleCloseDialog}
+        fullWidth
+        maxWidth="md"
+      >
        <DialogTitle>Deployment logs</DialogTitle>
        <DialogContent style={DEPLOYMENT_LOGS_STYLE}>
          {deploymentLogs && <pre>{deploymentLogs}</pre>}
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
@ -48,6 +48,8 @@ export const DeploymentMenu = ({
  const [redeployToProduction, setRedeployToProduction] = useState(false);
  const [rollbackDeployment, setRollbackDeployment] = useState(false);
  const [assignDomainDialog, setAssignDomainDialog] = useState(false);
+  const [isConfirmButtonLoading, setConfirmButtonLoadingLoading] =
+    useState(false);

  const updateDeployment = async () => {
    const isUpdated = await client.updateDeploymentToProd(deployment.id);
@ -71,6 +73,7 @@ export const DeploymentMenu = ({

  const redeployToProd = async () => {
    const isRedeployed = await client.redeployToProd(deployment.id);
+    setConfirmButtonLoadingLoading(false);
    if (isRedeployed) {
      await onUpdate();
      toast({
@ -113,6 +116,13 @@ export const DeploymentMenu = ({
  };

  const deleteDeployment = async () => {
+    toast({
+      id: 'deployment_going_to_be_deleted',
+      title: 'Deployment going to be deleted',
+      variant: 'success',
+      onDismiss: dismiss,
+    });
+
    const isDeleted = await client.deleteDeployment(deployment.id);
    if (isDeleted) {
      await onUpdate();
@ -228,11 +238,13 @@ export const DeploymentMenu = ({
        open={redeployToProduction}
        confirmButtonTitle="Redeploy"
        handleConfirm={async () => {
+          setConfirmButtonLoadingLoading(true);
          await redeployToProd();
          setRedeployToProduction((preVal) => !preVal);
        }}
        deployment={deployment}
        domains={deployment.domain ? [deployment.domain] : []}
+        isConfirmButtonLoading={isConfirmButtonLoading}
      />
      {Boolean(currentDeployment) && (
        <ChangeStateToProductionDialog
--- a/packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx
@ -8,7 +8,10 @@ import {
  DialogActions,
 } from '@mui/material';

-import { CheckRoundFilledIcon, LoadingIcon } from 'components/shared/CustomIcon';
+import {
+  CheckRoundFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Button, Heading, Tag } from 'components/shared';

@ -23,7 +26,11 @@ export const AuctionCard = ({ project }: { project: Project }) => {
  const client = useGQLClient();

  const getIconByAuctionStatus = (status: string) =>
-    status === 'completed' ? <CheckRoundFilledIcon /> : <LoadingIcon className="animate-spin" />;
+    status === 'completed' ? (
+      <CheckRoundFilledIcon />
+    ) : (
+      <LoadingIcon className="animate-spin" />
+    );

  const checkAuctionStatus = useCallback(async () => {
    const result = await client.getAuctionData(project.auctionId);
@ -61,7 +68,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
        {auctionStatus.toUpperCase()}
      </Tag>
    ),
-    [auctionStatus]
+    [auctionStatus],
  );

  const handleOpenDialog = () => setOpenDialog(true);
@ -71,19 +78,25 @@ export const AuctionCard = ({ project }: { project: Project }) => {
    <>
      <div className="p-3 gap-2 rounded-xl border border-gray-200 transition-colors hover:bg-base-bg-alternate flex flex-col mt-8">
        <div className="flex justify-between items-center">
-          <Heading className="text-lg leading-6 font-medium">Auction details</Heading>
+          <Heading className="text-lg leading-6 font-medium">
+            Auction details
+          </Heading>
          <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
            View details
          </Button>
        </div>

        <div className="flex justify-between items-center mt-1">
-          <span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Status</span>
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">
+            Auction Status
+          </span>
          <div className="ml-2">{renderAuctionStatus()}</div>
        </div>

        <div className="flex justify-between items-center mt-2">
-          <span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Id</span>
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">
+            Auction Id
+          </span>
          <span className="text-elements-mid-em text-sm text-right">
            {project.auctionId}
          </span>
@ -91,7 +104,9 @@ export const AuctionCard = ({ project }: { project: Project }) => {

        {deployerLrns?.length > 0 && (
          <div className="mt-3">
-            <span className="text-elements-high-em text-sm font-medium tracking-tight">Deployer LRNs</span>
+            <span className="text-elements-high-em text-sm font-medium tracking-tight">
+              Deployer LRNs
+            </span>
            {deployerLrns.map((lrn, index) => (
              <p key={index} className="text-elements-mid-em text-sm">
                {'\u2022'} {lrn}
@ -101,22 +116,28 @@ export const AuctionCard = ({ project }: { project: Project }) => {
        )}

        <div className="flex justify-between items-center mt-1">
-          <span className="text-elements-high-em text-sm font-medium tracking-tight">Deployer Funds Status</span>
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">
+            Deployer Funds Status
+          </span>
          <div className="ml-2">
-            <Tag
-              size="xs"
-              type={fundsStatus ? 'positive' : 'emphasized'}
-            >
+            <Tag size="xs" type={fundsStatus ? 'positive' : 'emphasized'}>
              {fundsStatus ? 'RELEASED' : 'LOCKED'}
            </Tag>
          </div>
        </div>
      </div>

-      <Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">
+      <Dialog
+        open={openDialog}
+        onClose={handleCloseDialog}
+        fullWidth
+        maxWidth="md"
+      >
        <DialogTitle>Auction Details</DialogTitle>
        <DialogContent>
-          {auctionDetails && <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>}
+          {auctionDetails && (
+            <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
+          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog}>Close</Button>
--- a/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
@ -60,8 +60,10 @@ const DeleteProjectDialog = ({
          <Modal.Body>
            <Input
              label={
-                "Deleting your project is irreversible. Enter your project's name " + '"' +
-                project.name + '"' +
+                "Deleting your project is irreversible. Enter your project's name " +
+                '"' +
+                project.name +
+                '"' +
                ' below to confirm you want to permanently delete it:'
              }
              id="input"
--- a/packages/frontend/src/context/Web3Provider.tsx
+++ b/packages/frontend/src/context/Web3Provider.tsx
@ -55,7 +55,7 @@ const siweConfig = createSIWEConfig({
      statement: 'Sign in With Ethereum.',
    }).prepareMessage(),
  getNonce: async () => {
-    return generateNonce()
+    return generateNonce();
  },
  getSession: async () => {
    try {
--- a/packages/frontend/src/index.tsx
+++ b/packages/frontend/src/index.tsx
@ -17,7 +17,6 @@ import { LogErrorBoundary } from 'utils/log-error';
 import { BASE_URL } from 'utils/constants';
 import Web3ModalProvider from './context/Web3Provider';

-
 console.log(`v-0.0.9`);

 const root = ReactDOM.createRoot(
--- a/packages/frontend/src/pages/components/modals.tsx
+++ b/packages/frontend/src/pages/components/modals.tsx
@ -39,7 +39,7 @@ const deployment: Deployment = {
  deployer: {
    deployerApiUrl: 'https://webapp-deployer-api.example.com',
    deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
-    deployerLrn:'lrn://example/deployers/webapp-deployer-api.example.com'
+    deployerLrn: 'lrn://example/deployers/webapp-deployer-api.example.com',
  },
  status: DeploymentStatus.Ready,
  createdBy: {
@ -53,7 +53,8 @@ const deployment: Deployment = {
  },
  createdAt: '1677676800', // 2023-03-01T12:00:00Z
  updatedAt: '1677680400', // 2023-03-01T13:00:00Z
-  applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
+  applicationDeploymentRequestId:
+    'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
 };

 const domains: Domain[] = [
--- a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
@ -48,7 +48,9 @@ const Id = () => {
          {/* Heading */}
          <div className="flex flex-col items-center gap-1.5">
            <Heading as="h3" className="font-medium text-xl">
-              {isAuction? 'Auction created successfully.' : 'Project deployment created successfully.'}
+              {isAuction
+                ? 'Auction created successfully.'
+                : 'Project deployment created successfully.'}
            </Heading>
          </div>

--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@ -54,7 +54,7 @@ const CreateRepo = () => {
        setIsLoading(true);

        navigate(
-          `configure?templateId=${template.id}&templateOwner=${owner}&templateRepo=${repo}&owner=${data.account}&name=${data.repoName}&isPrivate=false&orgSlug=${orgSlug}`
+          `configure?templateId=${template.id}&templateOwner=${owner}&templateRepo=${repo}&owner=${data.account}&name=${data.repoName}&isPrivate=false&orgSlug=${orgSlug}`,
        );
      } catch (err) {
        setIsLoading(false);
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@ -135,7 +135,7 @@ const OverviewTabPanel = () => {
                <p>
                  <a
                    key={index}
-                    href={`https://${project.name}.${baseDomain}`}
+                    href={`https://${project.name.toLowerCase()}.${baseDomain}`}
                    className="text-sm text-elements-low-em tracking-tight truncate"
                  >
                    {baseDomain}
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx
@ -64,7 +64,8 @@ export const EnvironmentVariablesTabPanel = () => {

  const createEnvironmentVariablesHandler = useCallback(
    async (createFormData: FieldValues) => {
-      const environmentVariables = createFormData.variables.map((variable: any) => {
+      const environmentVariables = createFormData.variables.map(
+        (variable: any) => {
          return {
            key: variable.key,
            value: variable.value,
@ -72,7 +73,8 @@ export const EnvironmentVariablesTabPanel = () => {
              .filter(([, value]) => value === true)
              .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)),
          };
-      });
+        },
+      );

      const { addEnvironmentVariables: isEnvironmentVariablesAdded } =
        await client.addEnvironmentVariables(id!, environmentVariables);
@ -124,7 +126,11 @@ export const EnvironmentVariablesTabPanel = () => {
        </Heading>
        <Collapse open={createNewVariable}>
          <FormProvider {...methods}>
-            <form onSubmit={methods.handleSubmit((data) => createEnvironmentVariablesHandler(data))}>
+            <form
+              onSubmit={methods.handleSubmit((data) =>
+                createEnvironmentVariablesHandler(data),
+              )}
+            >
              <div className="p-4 bg-slate-100">
                <EnvironmentVariablesForm />
              </div>
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx
@ -67,7 +67,10 @@ const EnvironmentVariablesForm = () => {
      <div className="flex gap-2 p-2">
        <Checkbox label="Production" {...register('environment.production')} />
        <Checkbox label="Preview" {...register('environment.preview')} />
-        <Checkbox label="Development" {...register('environment.development')} />
+        <Checkbox
+          label="Development"
+          {...register('environment.development')}
+        />
      </div>
    </>
  );
--- a/packages/frontend/src/stories/MockStoriesData.ts
+++ b/packages/frontend/src/stories/MockStoriesData.ts
@ -105,9 +105,10 @@ export const deployment0: Deployment = {
  deployer: {
    deployerApiUrl: 'https://webapp-deployer-api.example.com',
    deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
-    deployerLrn:'lrn://deployer.apps.snowballtools.com '
+    deployerLrn: 'lrn://deployer.apps.snowballtools.com ',
  },
-  applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
+  applicationDeploymentRequestId:
+    'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
 };

 export const project: Project = {