Skip to content
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

feat(websiste): CAN-662 wip #1607

Merged
merged 1 commit into from
Dec 30, 2024
+104 −119
Merged

feat(websiste): CAN-662 wip #1607

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
71 changes: 71 additions & 0 deletions packages/website/src/features/Deploy/CannonFileInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { CheckIcon } from '@chakra-ui/icons';
import {
Alert,
AlertIcon,
FormControl,
FormHelperText,
FormLabel,
Input,
InputGroup,
InputRightElement,
Spinner,
} from '@chakra-ui/react';

// Define interface for component props
interface CannonFileInputProps {
cannonfileUrlInput: string;
setCannonfileUrlInput: (value: string) => void;
cannonDefInfo: {
isFetching: boolean;
error: any;
def: any;
};
cannonDefInfoError: string;
isDisabled: boolean;
}

export const CannonFileInput = ({
cannonfileUrlInput,
setCannonfileUrlInput,
cannonDefInfo,
cannonDefInfoError,
isDisabled,
}: CannonFileInputProps) => {
const isLoading = cannonfileUrlInput.length > 0 && cannonDefInfo?.isFetching;
const showCheck =
cannonfileUrlInput.length > 0 && !cannonDefInfo.error && cannonDefInfo?.def;

return (
<FormControl mb="4">
<FormLabel>Cannonfile (Optional)</FormLabel>

<InputGroup>
<Input
type="text"
placeholder="https://github.com/../cannonfile.toml"
value={cannonfileUrlInput}
borderColor={!cannonDefInfoError ? 'whiteAlpha.400' : 'red.500'}
isDisabled={isDisabled}
background="black"
onChange={(evt) => setCannonfileUrlInput(evt.target.value)}
/>
<InputRightElement>
{isLoading && <Spinner />}
{showCheck && <CheckIcon color="green.500" />}
</InputRightElement>
</InputGroup>

<FormHelperText color="gray.300">
The Cannonfile URL is used to generate the deployment data to display a
git diff in Cannon.
</FormHelperText>

{cannonDefInfoError && (
<Alert mt="6" status="error" bg="gray.700">
<AlertIcon mr={3} />
<strong>{cannonDefInfoError.toString()}</strong>
</Alert>
)}
</FormControl>
);
};
136 changes: 26 additions & 110 deletions packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,12 @@ import NoncePicker from './NoncePicker';
import { TransactionDisplay } from './TransactionDisplay';
import 'react-diff-view/style/index.css';
import { extractIpfsHash } from '@/helpers/ipfs';
import { isCannonFileURL } from '@/helpers/isCannonFileURL';
import { CannonFileInput } from '@/features/Deploy/CannonFileInput';

const EMPTY_IPFS_MISC_URL =
'ipfs://QmeSt2mnJKE8qmRhLyYbHQQxDKpsFbcWnw5e7JF4xVbN6k';

const cannonfileUrlRegex =
// eslint-disable-next-line no-useless-escape
/^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?\.toml$/i;

// TODO: is there any way to make a better context? maybe this means we should get rid of name using context?
const ctx: ChainBuilderContext = {
chainId: 0,
Expand All @@ -89,35 +87,34 @@ const ctx: ChainBuilderContext = {
type DeployType = 'git' | 'partial';

export default function QueueFromGitOps() {
const [selectedDeployType, setSelectedDeployType] =
useState<DeployType>('git');
const router = useRouter();
const currentSafe = useStore((s) => s.currentSafe)!;
const settings = useStore((s) => s.settings);

const { chainId, isConnected } = useAccount();
const { switchChainAsync } = useSwitchChain();
const { openConnectModal } = useConnectModal();
const deployer = useDeployerWallet(currentSafe?.chainId);

const [genericInput, setGenericInput] = useState('');
const [selectedDeployType, setSelectedDeployType] =
useState<DeployType>('git');
const [deploymentSourceInput, setDeploymentSourceInput] = useState('');
const [cannonfileUrlInput, setCannonfileUrlInput] = useState('');
const [partialDeployIpfs, setPartialDeployIpfs] = useState('');
const [prevPackageInputRef, setPrevPackageInputRef] =
useState<PackageReference | null>(null);

const [previousPackageInput, setPreviousPackageInput] = useState('');
const [pickedNonce, setPickedNonce] = useState<number | null>(null);
const { openConnectModal } = useConnectModal();
const [writeToIpfsMutationRes, setWriteToIpfsMutationRes] = useState<{
isLoading: boolean;
error: Error | null;
data: CannonWriteDeployToIpfsMutationResult | null;
} | null>(null);
const [inputError, setInputError] = useState<string | null>(null);
const settings = useStore((s) => s.settings);

const deployer = useDeployerWallet(currentSafe?.chainId);

const gitInfo = useMemo(() => {
if (
!cannonfileUrlRegex.test(cannonfileUrlInput) ||
!isCannonFileURL(cannonfileUrlInput) ||
!cannonfileUrlInput.includes('/blob/')
) {
return { gitUrl: '', gitRef: '', gitFile: '' };
Expand Down Expand Up @@ -602,17 +599,16 @@ export default function QueueFromGitOps() {
PreviewButton,
]);

const handleGenericInputChange = useCallback(
const handleDeploymentSourceInputChange = useCallback(
(input: string) => {
resetState();
setCannonfileUrlInput('');
setPartialDeployIpfs('');
setInputError(null);

const isCannonfileUrl = cannonfileUrlRegex.test(input);
const isIpfsHash = extractIpfsHash(input);

if (isCannonfileUrl) {
if (isCannonFileURL(input)) {
setSelectedDeployType('git');
setCannonfileUrlInput(input);
} else if (isIpfsHash) {
Expand Down Expand Up @@ -687,50 +683,6 @@ export default function QueueFromGitOps() {
return null;
}, [settings.isIpfsGateway, cannonDefInfo?.def]);

const renderCannonFileInput = useCallback(() => {
return (
<FormControl mb="4">
<FormLabel>Cannonfile (Optional)</FormLabel>
<InputGroup>
<Input
type="text"
placeholder="https://github.com/../cannonfile.toml"
value={cannonfileUrlInput}
borderColor={!cannonDefInfoError ? 'whiteAlpha.400' : 'red.500'}
isDisabled={selectedDeployType == 'partial' && !partialDeployIpfs}
background="black"
onChange={(evt) => setCannonfileUrlInput(evt.target.value)}
/>
<InputRightElement>
{cannonfileUrlInput.length > 0 && cannonDefInfo?.isFetching ? (
<Spinner />
) : cannonfileUrlInput.length > 0 &&
!cannonDefInfo.error &&
cannonDefInfo?.def ? (
<CheckIcon color="green.500" />
) : null}
</InputRightElement>
</InputGroup>
<FormHelperText color="gray.300">
The Cannonfile URL is used to generate the deployment data to display
a git diff in Cannon.
</FormHelperText>
{cannonDefInfoError ? (
<Alert mt="6" status="error" bg="gray.700">
<AlertIcon mr={3} />
<strong>{cannonDefInfoError.toString()}</strong>
</Alert>
) : undefined}
</FormControl>
);
}, [
cannonfileUrlInput,
cannonDefInfo,
cannonDefInfoError,
selectedDeployType,
partialDeployIpfs,
]);

return (
<>
<Container maxWidth="container.md" py={8}>
Expand All @@ -754,54 +706,24 @@ export default function QueueFromGitOps() {
borderColor="gray.600"
borderRadius="4px"
>
{/* <FormControl mb="4">
<FormLabel>Deployment Source</FormLabel>
<RadioGroup
value={selectedDeployType}
onChange={(value: DeployType) => {
resetState();
setCannonfileUrlInput('');
setPartialDeployIpfs('');
setSelectedDeployType(value);
}}
>
<Stack
direction={['column', 'column', 'row']}
spacing={['1', '1', '6']}
width="100%"
>
<Radio colorScheme="teal" value="git">
Git URL
</Radio>
<Radio colorScheme="teal" value="partial">
IPFS Hash
</Radio>
</Stack>
</RadioGroup>

<Text color="gray.300" mt="2">
{selectedDeployType == 'git'
? 'Enter a Git URL repository with a cannonfile to build.'
: 'Use a partial deployment from a IPFS hash.'}
</Text>
</FormControl> */}
{/* Deployment Source */}
<FormControl mb="4">
<FormLabel>Cannonfile URL or Deployment Data IPFS Hash</FormLabel>
<HStack>
<InputGroup>
<Input
type="text"
placeholder="https://github.com/../cannonfile.toml or Qm.."
value={genericInput}
value={deploymentSourceInput}
borderColor={
!cannonDefInfoError ? 'whiteAlpha.400' : 'red.500'
}
disabled={chainId !== currentSafe?.chainId}
background="black"
onChange={(evt) => {
const value = evt.target.value;
setGenericInput(value);
handleGenericInputChange(value);
setDeploymentSourceInput(value);
handleDeploymentSourceInputChange(value);
}}
/>
{selectedDeployType == 'git' && (
Expand Down Expand Up @@ -863,18 +785,6 @@ export default function QueueFromGitOps() {
))}
</Flex>
)}
{/* ipfs://Qma8R3UNPp2WQZdwZ7Ri95D4ddqT5auSpU8TUxwh4nLHij */}
{/* {(partialDeployIpfs || cannonfileUrlInput) && (
<FormControl display="flex" alignItems="center" my="2">
<Checkbox
mr="2"
onChange={(evt) =>
setOverridePreviousState(evt.currentTarget.checked)
}
/>{' '}
Override Previous State
</FormControl>
)} */}
{(partialDeployInfoLoaded || tomlRequiresPrevPackage) && (
<FormControl mb="6">
<FormLabel>Previous Package</FormLabel>
Expand Down Expand Up @@ -920,11 +830,16 @@ export default function QueueFromGitOps() {
)}
{selectedDeployType == 'partial' &&
partialDeployIpfs.length > 0 &&
partialDeployInfoLoaded &&
renderCannonFileInput()}

partialDeployInfoLoaded && (
<CannonFileInput
cannonfileUrlInput={cannonfileUrlInput}
setCannonfileUrlInput={setCannonfileUrlInput}
cannonDefInfo={cannonDefInfo}
cannonDefInfoError={cannonDefInfoError}
isDisabled={!partialDeployIpfs}
/>
)}
{renderAlert()}

{!isConnected ? (
<Button
width="100%"
Expand Down Expand Up @@ -958,6 +873,7 @@ export default function QueueFromGitOps() {
<strong>{buildState.error}</strong>
</Alert>
)}

{buildState.skippedSteps.length > 0 && (
<AlertCannon my={2} status="error">
<Text mb="2" fontWeight="bold">
Expand Down
7 changes: 7 additions & 0 deletions packages/website/src/helpers/isCannonFileURL.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const cannonfileUrlRegex =
// eslint-disable-next-line no-useless-escape
/^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?\.toml$/i;

export const isCannonFileURL = (url: string) => {
return cannonfileUrlRegex.test(url);
};
9 changes: 0 additions & 9 deletions packages/website/src/pages/deploy/gitops/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,6 @@ const NoSSR = dynamic(
}
);

/*export const metadata: Metadata = {
title: 'Cannon | Queue From GitOps',
description: 'Queue From GitOps',
openGraph: {
title: 'Cannon | Queue From GitOps',
description: 'Queue From GitOps',
},
};*/

export default function QueueFromGitOps() {
return (
<>
Expand Down
Loading