Skip to content

Commit c5348e8

Browse files
kgwebsitesKyle Goss
andauthored
Prepopulate the new-build-form with query params (#432)
Co-authored-by: Kyle Goss <[email protected]>
1 parent 62843e8 commit c5348e8

File tree

3 files changed

+43
-9
lines changed

3 files changed

+43
-9
lines changed

src/components/pages/repo/new-build-form/new-build-form.jsx

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,17 @@ import css from './new-build-form.module.scss';
1111

1212
const cx = classNames.bind(css);
1313

14-
const NewBuildForm = ({ handleSubmit, handleCancel }) => {
14+
const NewBuildForm = ({
15+
handleSubmit,
16+
handleCancel,
17+
target,
18+
commit,
19+
parameters
20+
}) => {
1521
const [state, setState] = useState({
16-
target: '',
17-
commit: '',
18-
parameters: [],
22+
target,
23+
commit,
24+
parameters,
1925
});
2026
const [parameterState, setParameterState] = useState({
2127
key: '',
@@ -107,9 +113,24 @@ const NewBuildForm = ({ handleSubmit, handleCancel }) => {
107113
);
108114
};
109115

116+
NewBuildForm.defaultProps = {
117+
target: "",
118+
commit: "",
119+
parameters: [],
120+
};
121+
110122
NewBuildForm.propTypes = {
111123
handleSubmit: PropTypes.func.isRequired,
112124
handleCancel: PropTypes.func.isRequired,
125+
target: PropTypes.string,
126+
commit: PropTypes.string,
127+
parameters: PropTypes.arrayOf(
128+
PropTypes.shape({
129+
key: PropTypes.string,
130+
value: PropTypes.string,
131+
id: PropTypes.string,
132+
})
133+
),
113134
};
114135

115136
export default NewBuildForm;

src/components/shared/modal/modal.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import styles from './modal.module.scss';
1010

1111
const cx = classNames.bind(styles);
1212

13-
export const useModal = () => {
14-
const [isShowing, setIsShowing] = useState(false);
13+
export const useModal = (isShowingInit = false) => {
14+
const [isShowing, setIsShowing] = useState(isShowingInit);
1515
const toggle = () => setIsShowing(!isShowing);
1616
return [isShowing, toggle];
1717
};

src/pages/repo/repo.jsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, {
44
useCallback, useMemo, useContext,
55
} from 'react';
66
import {
7-
Route, Switch, NavLink, useRouteMatch,
7+
Route, Switch, NavLink, useRouteMatch, useLocation,
88
} from 'react-router-dom';
99

1010
import { VISIBILITY_LEVELS } from '_constants';
@@ -62,7 +62,20 @@ const Repo = ({ user }) => {
6262
} = params;
6363
const [context] = useContext(AppContext);
6464
const { isRepoNavDisabled } = context;
65-
const [isModalShowing, toggleModal] = useModal();
65+
const { search } = useLocation();
66+
const queryParams = new URLSearchParams(search);
67+
let target = '';
68+
let commit = '';
69+
let parameters = [];
70+
try {
71+
target = queryParams.get('target') || '';
72+
commit = queryParams.get('commit') || '';
73+
parameters = queryParams.get('parameters') ? JSON.parse(queryParams.get('parameters')) : [];
74+
} catch (e) {
75+
console.warn('Invalid query parameters', e)
76+
}
77+
// If there is a target url param, show the new build modal on load
78+
const [isModalShowing, toggleModal] = useModal(!!queryParams.get('target'));
6679

6780
const { data: repo, isLoading: isRepoDataLoading, isError } = useRepo({ namespace, name });
6881

@@ -202,7 +215,7 @@ const Repo = ({ user }) => {
202215
isShowing={isModalShowing}
203216
hide={toggleModal}
204217
>
205-
<NewBuildForm handleSubmit={handleNewBuildSubmit} handleCancel={toggleModal} />
218+
<NewBuildForm handleSubmit={handleNewBuildSubmit} handleCancel={toggleModal} target={target} commit={commit} parameters={parameters} />
206219
</Modal>
207220
</>
208221
</Route>

0 commit comments

Comments
 (0)