AXON-762: moving functionality to a new page

Author: sspanchenko

src/react/atlascode/startwork/v3/StartWorkPageV3.tsx

@@ -1,13 +1,187 @@
-import { Box, Button, Typography } from '@material-ui/core';
-import React from 'react';
+import { emptyTransition, Transition } from '@atlassianlabs/jira-pi-common-models';
+import { Box, Button, CircularProgress, Typography } from '@material-ui/core';
+import React, { useCallback, useEffect, useState } from 'react';
 import { AnalyticsView } from 'src/analyticsTypes';
 
+import { StartWorkActionType } from '../../../../lib/ipc/fromUI/startWork';
+import { RepoData } from '../../../../lib/ipc/toUI/startWork';
+import { Branch } from '../../../../typings/git';
 import { AtlascodeErrorBoundary } from '../../common/ErrorBoundary';
 import { StartWorkControllerContext, useStartWorkController } from '../startWorkController';
-import { CreateBranchSection, TaskInfoSection, UpdateStatusSection } from './components';
+import { CreateBranchSection, SuccessAlert, TaskInfoSection, UpdateStatusSection } from './components';
+import { generateBranchName, getDefaultSourceBranch } from './utils/branchUtils';
 
 const StartWorkPageV3: React.FunctionComponent = () => {
     const [state, controller] = useStartWorkController();
+    const [pushBranchEnabled, setPushBranchEnabled] = useState(true);
+    const [localBranch, setLocalBranch] = useState('');
+    const [sourceBranch, setSourceBranch] = useState<Branch>({ type: 0, name: '' });
+    const [selectedRepository, setSelectedRepository] = useState<RepoData | undefined>(state.repoData[0]);
+    const [selectedBranchType, setSelectedBranchType] = useState<{ kind: string; prefix: string }>({
+        kind: '',
+        prefix: '',
+    });
+    const [upstream, setUpstream] = useState('');
+    const [transitionIssueEnabled, setTransitionIssueEnabled] = useState(true);
+    const [selectedTransition, setSelectedTransition] = useState<Transition>(emptyTransition);
+    const [branchSetupEnabled, setBranchSetupEnabled] = useState(true);
+    const [submitState, setSubmitState] = useState<'initial' | 'submitting' | 'submit-success'>('initial');
+    const [submitResponse, setSubmitResponse] = useState<{
+        transistionStatus?: string;
+        branch?: string;
+        upstream?: string;
+    }>({});
+
+    // Initialize form with default values
+    useEffect(() => {
+        if (state.repoData.length > 0) {
+            const defaultRepo = state.repoData[0];
+            setSelectedRepository(defaultRepo);
+            const defaultSourceBranch = getDefaultSourceBranch(defaultRepo);
+            setSourceBranch(defaultSourceBranch);
+
+            // Set default branch type
+            if (defaultRepo.branchTypes && defaultRepo.branchTypes.length > 0) {
+                setSelectedBranchType(defaultRepo.branchTypes[0]);
+            }
+
+            // Set default upstream
+            setUpstream(defaultRepo.workspaceRepo.mainSiteRemote.remote.name);
+        }
+    }, [state.repoData]);
+
+    // Generate branch name when dependencies change
+    useEffect(() => {
+        if (selectedRepository && selectedBranchType.prefix) {
+            const generatedName = generateBranchName(
+                selectedRepository,
+                selectedBranchType,
+                state.issue,
+                state.customTemplate,
+            );
+            setLocalBranch(generatedName);
+        }
+    }, [selectedRepository, selectedBranchType, state.issue, state.customTemplate]);
+
+    const handleRepositoryChange = useCallback((repository: RepoData) => {
+        setSelectedRepository(repository);
+        const defaultSourceBranch = getDefaultSourceBranch(repository);
+        setSourceBranch(defaultSourceBranch);
+
+        // Set default branch type for new repository
+        if (repository.branchTypes && repository.branchTypes.length > 0) {
+            setSelectedBranchType(repository.branchTypes[0]);
+        }
+
+        // Set default upstream for new repository
+        setUpstream(repository.workspaceRepo.mainSiteRemote.remote.name);
+    }, []);
+
+    const handleBranchTypeChange = useCallback((branchType: { kind: string; prefix: string }) => {
+        setSelectedBranchType(branchType);
+    }, []);
+
+    const handleUpstreamChange = useCallback((newUpstream: string) => {
+        setUpstream(newUpstream);
+    }, []);
+
+    const handleTransitionIssueEnabledChange = useCallback((enabled: boolean) => {
+        setTransitionIssueEnabled(enabled);
+    }, []);
+
+    const handleSelectedTransitionChange = useCallback((transition: Transition) => {
+        setSelectedTransition(transition);
+    }, []);
+
+    const handleBranchSetupEnabledChange = useCallback((enabled: boolean) => {
+        setBranchSetupEnabled(enabled);
+    }, []);
+
+    const handleCreateBranch = useCallback(async () => {
+        setSubmitState('submitting');
+
+        try {
+            console.log('Form data:', {
+                transitionIssueEnabled,
+                selectedTransition,
+                branchSetupEnabled,
+                pushBranchEnabled,
+                localBranch,
+                sourceBranch,
+                selectedRepository,
+                selectedBranchType,
+                upstream,
+            });
+
+            // TODO: Replace with actual API call
+            if (!selectedRepository) {
+                throw new Error('No repository selected');
+            }
+
+            const response = await controller.startWork(
+                transitionIssueEnabled,
+                selectedTransition,
+                branchSetupEnabled,
+                selectedRepository.workspaceRepo,
+                sourceBranch,
+                localBranch,
+                upstream,
+                pushBranchEnabled,
+            );
+
+            // Send message to refresh tree views after successful start work
+            controller.postMessage({
+                type: StartWorkActionType.RefreshTreeViews,
+            });
+
+            setSubmitResponse(response);
+            setSubmitState('submit-success');
+        } catch (error) {
+            console.error('Error creating branch:', error);
+            setSubmitState('initial');
+        }
+    }, [
+        controller,
+        transitionIssueEnabled,
+        selectedTransition,
+        branchSetupEnabled,
+        pushBranchEnabled,
+        localBranch,
+        sourceBranch,
+        selectedRepository,
+        selectedBranchType,
+        upstream,
+    ]);
+
+    const formState = {
+        pushBranchEnabled,
+        localBranch,
+        sourceBranch,
+        selectedRepository,
+        selectedBranchType,
+        upstream,
+        branchSetupEnabled,
+    };
+
+    const formActions = {
+        onPushBranchChange: setPushBranchEnabled,
+        onLocalBranchChange: setLocalBranch,
+        onSourceBranchChange: setSourceBranch,
+        onRepositoryChange: handleRepositoryChange,
+        onBranchTypeChange: handleBranchTypeChange,
+        onUpstreamChange: handleUpstreamChange,
+        onBranchSetupEnabledChange: handleBranchSetupEnabledChange,
+    };
+
+    const updateStatusFormState = {
+        transitionIssueEnabled,
+        selectedTransition,
+    };
+
+    const updateStatusFormActions = {
+        onTransitionIssueEnabledChange: handleTransitionIssueEnabledChange,
+        onSelectedTransitionChange: handleSelectedTransitionChange,
+    };
 
     return (
         <StartWorkControllerContext.Provider value={controller}>
@@ -22,12 +196,41 @@ const StartWorkPageV3: React.FunctionComponent = () => {
                         </Typography>
                     </Box>
 
+                    {submitState === 'submit-success' && <SuccessAlert submitResponse={submitResponse} />}
+
                     <TaskInfoSection state={state} controller={controller} />
-                    <CreateBranchSection state={state} controller={controller} />
-                    <UpdateStatusSection state={state} controller={controller} />
-                    <Button variant="contained" color="primary">
-                        Create branch
-                    </Button>
+                    <CreateBranchSection
+                        state={state}
+                        controller={controller}
+                        formState={formState}
+                        formActions={formActions}
+                    />
+                    <UpdateStatusSection
+                        state={state}
+                        controller={controller}
+                        formState={updateStatusFormState}
+                        formActions={updateStatusFormActions}
+                    />
+
+                    {submitState !== 'submit-success' && (
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            disabled={submitState === 'submitting'}
+                            onClick={handleCreateBranch}
+                            endIcon={
+                                submitState === 'submitting' ? <CircularProgress color="inherit" size={20} /> : null
+                            }
+                        >
+                            Create branch
+                        </Button>
+                    )}
+
+                    {submitState === 'submit-success' && (
+                        <Button variant="contained" color="default" onClick={controller.closePage}>
+                            Close
+                        </Button>
+                    )}
                 </Box>
             </AtlascodeErrorBoundary>
         </StartWorkControllerContext.Provider>

src/react/atlascode/startwork/v3/components/BranchPrefixSelector.tsx

@@ -0,0 +1,61 @@
+import { Grid, TextField, Typography } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
+import React, { useCallback } from 'react';
+
+import { RepoData } from '../../../../../lib/ipc/toUI/startWork';
+
+interface BranchPrefixSelectorProps {
+    selectedRepository: RepoData | undefined;
+    selectedBranchType: { kind: string; prefix: string };
+    customPrefixes: string[];
+    onBranchTypeChange: (branchType: { kind: string; prefix: string }) => void;
+}
+
+export const BranchPrefixSelector: React.FC<BranchPrefixSelectorProps> = ({
+    selectedRepository,
+    selectedBranchType,
+    customPrefixes,
+    onBranchTypeChange,
+}) => {
+    // Convert custom prefixes to branch types format
+    const convertedCustomPrefixes = customPrefixes.map((prefix) => {
+        const normalizedCustomPrefix = prefix.endsWith('/') ? prefix : prefix + '/';
+        return { prefix: normalizedCustomPrefix, kind: prefix };
+    });
+
+    const handleBranchTypeChange = useCallback(
+        (event: React.ChangeEvent<{}>, value: { kind: string; prefix: string } | null) => {
+            if (value) {
+                onBranchTypeChange(value);
+            }
+        },
+        [onBranchTypeChange],
+    );
+
+    const hasOptions = (selectedRepository?.branchTypes?.length || 0) > 0 || convertedCustomPrefixes.length > 0;
+
+    // Don't render if no options available
+    if (!hasOptions) {
+        return null;
+    }
+
+    return (
+        <Grid item xs={6}>
+            <Typography variant="body2">Branch prefix</Typography>
+            <Autocomplete
+                options={[...(selectedRepository?.branchTypes || []), ...convertedCustomPrefixes]}
+                groupBy={(option) =>
+                    (selectedRepository?.branchTypes || []).map((type) => type.kind).includes(option.kind)
+                        ? 'Repo Branch Type'
+                        : 'Custom Prefix'
+                }
+                getOptionLabel={(option) => option.kind}
+                renderInput={(params) => <TextField {...params} size="small" variant="outlined" fullWidth />}
+                size="small"
+                disableClearable
+                value={selectedBranchType}
+                onChange={handleBranchTypeChange}
+            />
+        </Grid>
+    );
+};