Prepopulate the new-build-form with query params (#432)

Co-authored-by: Kyle Goss <[email protected]>

Author: kgwebsites

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

@@ -11,11 +11,17 @@ import css from './new-build-form.module.scss';
 
 const cx = classNames.bind(css);
 
-const NewBuildForm = ({ handleSubmit, handleCancel }) => {
+const NewBuildForm = ({
+  handleSubmit,
+  handleCancel,
+  target,
+  commit,
+  parameters
+}) => {
   const [state, setState] = useState({
-    target: '',
-    commit: '',
-    parameters: [],
+    target,
+    commit,
+    parameters,
   });
   const [parameterState, setParameterState] = useState({
     key: '',
@@ -107,9 +113,24 @@ const NewBuildForm = ({ handleSubmit, handleCancel }) => {
   );
 };
 
+NewBuildForm.defaultProps = {
+  target: "",
+  commit: "",
+  parameters: [],
+};
+
 NewBuildForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   handleCancel: PropTypes.func.isRequired,
+  target: PropTypes.string,
+  commit: PropTypes.string,
+  parameters: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      value: PropTypes.string,
+      id: PropTypes.string,
+    })
+  ),
 };
 
 export default NewBuildForm;

src/components/shared/modal/modal.jsx

@@ -10,8 +10,8 @@ import styles from './modal.module.scss';
 
 const cx = classNames.bind(styles);
 
-export const useModal = () => {
-  const [isShowing, setIsShowing] = useState(false);
+export const useModal = (isShowingInit = false) => {
+  const [isShowing, setIsShowing] = useState(isShowingInit);
   const toggle = () => setIsShowing(!isShowing);
   return [isShowing, toggle];
 };

src/pages/repo/repo.jsx

@@ -4,7 +4,7 @@ import React, {
   useCallback, useMemo, useContext,
 } from 'react';
 import {
-  Route, Switch, NavLink, useRouteMatch,
+  Route, Switch, NavLink, useRouteMatch, useLocation,
 } from 'react-router-dom';
 
 import { VISIBILITY_LEVELS } from '_constants';
@@ -62,7 +62,20 @@ const Repo = ({ user }) => {
   } = params;
   const [context] = useContext(AppContext);
   const { isRepoNavDisabled } = context;
-  const [isModalShowing, toggleModal] = useModal();
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  let target = '';
+  let commit = '';
+  let parameters = [];
+  try {
+    target = queryParams.get('target') || '';
+    commit = queryParams.get('commit') || '';
+    parameters = queryParams.get('parameters') ? JSON.parse(queryParams.get('parameters')) : [];
+  } catch (e) {
+    console.warn('Invalid query parameters', e)
+  }
+  // If there is a target url param, show the new build modal on load
+  const [isModalShowing, toggleModal] = useModal(!!queryParams.get('target'));
 
   const { data: repo, isLoading: isRepoDataLoading, isError } = useRepo({ namespace, name });
 
@@ -202,7 +215,7 @@ const Repo = ({ user }) => {
             isShowing={isModalShowing}
             hide={toggleModal}
           >
-            <NewBuildForm handleSubmit={handleNewBuildSubmit} handleCancel={toggleModal} />
+            <NewBuildForm handleSubmit={handleNewBuildSubmit} handleCancel={toggleModal} target={target} commit={commit} parameters={parameters} />
           </Modal>
         </>
       </Route>