Function to prefill promote modal w/ query params (#434)

* Function to prefill promote modal w/ query params * Remove unused commit query param --------- Co-authored-by: Kyle Goss <[email protected]>
drone · Apr 19, 2023 · c89ac05 · c89ac05
1 parent 07d4d78
commit c89ac05
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/src/components/pages/repo/new-build-form/new-build-form.jsx b/src/components/pages/repo/new-build-form/new-build-form.jsx
@@ -15,12 +15,10 @@ const NewBuildForm = ({
   handleSubmit,
   handleCancel,
   target,
-  commit,
   parameters
 }) => {
   const [state, setState] = useState({
     target,
-    commit,
     parameters,
   });
   const [parameterState, setParameterState] = useState({
@@ -115,15 +113,13 @@ const NewBuildForm = ({
 
 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,

diff --git a/src/pages/build/build.jsx b/src/pages/build/build.jsx
@@ -77,7 +77,20 @@ export default function Build({ user, userIsAdminOrHasWritePerm }) {
   const [state, setState] = useState(RESOLVED);
   const [view, setView] = useState(LOGS_VIEW);
 
-  const [isModalShowing, toggleModal] = useModal();
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  let action = 'promote'
+  let target = '';
+  let parameters = [];
+  try {
+    action = queryParams.get('action') || 'promote';
+    target = queryParams.get('target') || '';
+    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 { showError } = useToast();
 
@@ -279,7 +292,7 @@ export default function Build({ user, userIsAdminOrHasWritePerm }) {
         isShowing={isModalShowing}
         hide={toggleModal}
       >
-        <DeploymentForm handleSubmit={handleDeploySubmit} handleCancel={toggleModal} />
+        <DeploymentForm handleSubmit={handleDeploySubmit} handleCancel={toggleModal} action={action} target={target} parameters={parameters} />
       </Modal>
     </>
   );

diff --git a/src/pages/build/deployment-form/deployment-form.jsx b/src/pages/build/deployment-form/deployment-form.jsx
@@ -9,11 +9,11 @@ import css from './deployment-form.module.scss';
 
 const cx = classNames.bind(css);
 
-const DeploymentForm = ({ handleSubmit, handleCancel }) => {
+const DeploymentForm = ({ handleSubmit, handleCancel, action, target, parameters }) => {
   const [state, setState] = useState({
-    action: 'promote',
-    target: '',
-    parameters: [],
+    action,
+    target,
+    parameters,
   });
   const [parameterState, setParameterState] = useState({
     key: '',
@@ -129,9 +129,24 @@ const DeploymentForm = ({ handleSubmit, handleCancel }) => {
   );
 };
 
+NewBuildForm.defaultProps = {
+  action: "promote",
+  target: "",
+  parameters: [],
+};
+
 DeploymentForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   handleCancel: PropTypes.func.isRequired,
+  action: PropTypes.string,
+  target: PropTypes.string,
+  parameters: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      value: PropTypes.string,
+      id: PropTypes.string,
+    })
+  ),
 };
 
 export default DeploymentForm;
diff --git a/src/pages/repo/repo.jsx b/src/pages/repo/repo.jsx
@@ -65,11 +65,9 @@ const Repo = ({ user }) => {
   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)
@@ -215,7 +213,7 @@ const Repo = ({ user }) => {
             isShowing={isModalShowing}
             hide={toggleModal}
           >
-            <NewBuildForm handleSubmit={handleNewBuildSubmit} handleCancel={toggleModal} target={target} commit={commit} parameters={parameters} />
+            <NewBuildForm handleSubmit={handleNewBuildSubmit} handleCancel={toggleModal} target={target} parameters={parameters} />
           </Modal>
         </>
       </Route>