diff --git a/packages/frontend/src/components/Logo.tsx b/packages/frontend/src/components/Logo.tsx index c3bceb09..81cf3555 100644 --- a/packages/frontend/src/components/Logo.tsx +++ b/packages/frontend/src/components/Logo.tsx @@ -2,15 +2,15 @@ import { Heading } from './shared/Heading'; export const Logo = () => { return ( -
- Snowball Logo - - Snowball - -
+
+ Snowball Logo + + Snowball + +
); }; diff --git a/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx b/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx index 1e6d9f58..efb9c2fa 100644 --- 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 ? ( + + ) : ( + + ), + }} >
diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index 09a0b6b4..64899f58 100644 --- 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 => { + const createProject = async ( + data: FieldValues, + envVariables: AddEnvironmentVariableInput[], + ): Promise => { 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,39 +131,44 @@ const Configure = () => { const handleFormSubmit = useCallback( async (createFormData: FieldValues) => { - const environmentVariables = createFormData.variables.map((variable: any) => { - return { - key: variable.key, - value: variable.value, - environments: Object.entries(createFormData.environment) - .filter(([, value]) => value === true) - .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)), - }; - }); + const environmentVariables = createFormData.variables.map( + (variable: any) => { + return { + key: variable.key, + value: variable.value, + environments: Object.entries(createFormData.environment) + .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); if (templateId) { createFormData.option === 'Auction' ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) + `/${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' && (
- + The app will be deployed by the configured deployer @@ -225,8 +242,12 @@ const Configure = () => { {selectedOption === 'Auction' && ( <>
- - Set the number of deployers and maximum price for each deployment + + Set the number of deployers and maximum price for each + deployment Number of Deployers diff --git a/packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx b/packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx index 29b4b065..48650ca5 100644 --- 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 = ({ } 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]); diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx index 499aed76..ea5a33a1 100644 --- 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,10 +205,15 @@ const DeploymentDetailsCard = ({ prodBranchDomains={prodBranchDomains} />
- + Deployment logs - - {deploymentLogs &&
{deploymentLogs}
} + + {deploymentLogs &&
{deploymentLogs}
}
diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx index 51532f34..8ef1dd61 100644 --- 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) && ( { const client = useGQLClient(); const getIconByAuctionStatus = (status: string) => - status === 'completed' ? : ; + status === 'completed' ? ( + + ) : ( + + ); const checkAuctionStatus = useCallback(async () => { const result = await client.getAuctionData(project.auctionId); @@ -61,7 +68,7 @@ export const AuctionCard = ({ project }: { project: Project }) => { {auctionStatus.toUpperCase()} ), - [auctionStatus] + [auctionStatus], ); const handleOpenDialog = () => setOpenDialog(true); @@ -71,19 +78,25 @@ export const AuctionCard = ({ project }: { project: Project }) => { <>
- Auction details + + Auction details +
- Auction Status + + Auction Status +
{renderAuctionStatus()}
- Auction Id + + Auction Id + {project.auctionId} @@ -91,7 +104,9 @@ export const AuctionCard = ({ project }: { project: Project }) => { {deployerLrns?.length > 0 && (
- Deployer LRNs + + Deployer LRNs + {deployerLrns.map((lrn, index) => (

{'\u2022'} {lrn} @@ -101,22 +116,28 @@ export const AuctionCard = ({ project }: { project: Project }) => { )}

- Deployer Funds Status + + Deployer Funds Status +
- + {fundsStatus ? 'RELEASED' : 'LOCKED'}
- + Auction Details - {auctionDetails &&
{JSON.stringify(auctionDetails, null, 2)}
} + {auctionDetails && ( +
{JSON.stringify(auctionDetails, null, 2)}
+ )}
diff --git a/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx index 7ae30d8e..4287e4c0 100644 --- 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 = ({ { - return generateNonce() + return generateNonce(); }, getSession: async () => { try { diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index f0cded53..66812111 100644 --- 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( @@ -33,11 +32,11 @@ root.render( - - - - - + + + + + diff --git a/packages/frontend/src/pages/auth/Login.tsx b/packages/frontend/src/pages/auth/Login.tsx index a514e59f..a1acc1c5 100644 --- a/packages/frontend/src/pages/auth/Login.tsx +++ b/packages/frontend/src/pages/auth/Login.tsx @@ -12,7 +12,7 @@ export const Login = () => {
- +
diff --git a/packages/frontend/src/pages/components/modals.tsx b/packages/frontend/src/pages/components/modals.tsx index 8e333101..91d5f29b 100644 --- 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[] = [ diff --git a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx index bd1d680c..37883c8c 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx @@ -1,4 +1,4 @@ -import { Link, useParams, useSearchParams } from 'react-router-dom'; +import { Link, useParams, useSearchParams } from 'react-router-dom'; import Lottie from 'lottie-react'; import { Badge } from 'components/shared/Badge'; @@ -48,7 +48,9 @@ const Id = () => { {/* Heading */}
- {isAuction? 'Auction created successfully.' : 'Project deployment created successfully.'} + {isAuction + ? 'Auction created successfully.' + : 'Project deployment created successfully.'}
diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx index 4024e521..9879c56d 100644 --- 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); @@ -173,7 +173,7 @@ const CreateRepo = () => { ( + render={({}) => ( )} /> diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index 66e97359..9346deb0 100644 --- 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 = () => {

{baseDomain} diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx index d284a4a6..e76aa364 100644 --- 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,15 +64,17 @@ export const EnvironmentVariablesTabPanel = () => { const createEnvironmentVariablesHandler = useCallback( async (createFormData: FieldValues) => { - const environmentVariables = createFormData.variables.map((variable: any) => { - return { - key: variable.key, - value: variable.value, - environments: Object.entries(createFormData.environment) - .filter(([, value]) => value === true) - .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)), - }; - }); + const environmentVariables = createFormData.variables.map( + (variable: any) => { + return { + key: variable.key, + value: variable.value, + environments: Object.entries(createFormData.environment) + .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 = () => { -

createEnvironmentVariablesHandler(data))}> + + createEnvironmentVariablesHandler(data), + )} + >
diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx index ebe9bdc2..447d76fd 100644 --- 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 = () => {
- +
); diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts index 3a64356f..be3ff31a 100644 --- a/packages/frontend/src/stories/MockStoriesData.ts +++ b/packages/frontend/src/stories/MockStoriesData.ts @@ -102,12 +102,13 @@ export const deployment0: Deployment = { domain: domain0, commitMessage: 'Commit Message', createdBy: user, - deployer: { + 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 = {