Merge pull request #4582 from cloud-gov/feat-admin-site-build-task-config-ui

feat(admin): Add runDay input to manage build tasks

Author: apburnes

admin-client/src/components/Nav.svelte

@@ -96,6 +96,11 @@
               <span>Builds</span>
             </a>
           </li>
+          <li class="usa-nav__primary-item">
+            <a class="usa-nav__link"  class:usa-current={currentPath === '/tasks'} href="/tasks">
+              <span>Tasks</span>
+            </a>
+          </li>
           <li class="usa-nav__primary-item">
             <a class="usa-nav__link"  class:usa-current={currentPath === '/users'} href="/users">
               <span>Users</span>

admin-client/src/components/NumberInput.svelte

@@ -0,0 +1,34 @@
+<script>
+  export let error;
+  export let hint;
+  export let id;
+  export let label;
+  export let name;
+  export let required = false;
+  export let value;
+  export let min;
+  export let max;
+
+  $: idValue = id ?? name;
+  $: errorMessageId = `${idValue}-error-message`;
+</script>
+
+<label class="usa-label" for={idValue}>
+  {label}{#if required}<abbr title="required" class="usa-hint usa-hint--required">*</abbr>{/if}
+</label>
+{#if hint}
+  <span class="usa-hint">{hint}</span>
+{/if}
+{#if error}
+  <span id={errorMessageId} class="usa-error-message">{error}</span>
+{/if}
+<input
+  class="usa-select"
+  name={name}
+  id={idValue}
+  type="number"
+  min={min}
+  max={max}
+  {required}
+  bind:value={value}
+/>

admin-client/src/components/SiteFormBuildTaskType.svelte

@@ -1,8 +1,9 @@
 <script>
   import Form from './Form.svelte';
+  import NumberInput from './NumberInput.svelte';
   import SelectInput from './SelectInput.svelte';
 
-  export let buildTaskTypes;
+  export let buildTaskTypes = [];
   export let site;
   export let onSubmit;
   export let onSuccess;
@@ -21,13 +22,14 @@
 
   $: value = undefined;
   $: branch = undefined;
+  $: runDay = undefined;
 </script>
 
 <div class="grid-row">
   <div class="grid-col-8 grid-offset-4">
     <Form
       action="Add"
-      onSubmit={() => onSubmit(value, branch)}
+      onSubmit={() => onSubmit(value, branch, runDay)}
       {onSuccess}
       {onFailure}
       let:errors
@@ -39,6 +41,7 @@
           name="build-task-types"
           label='Build Task Types'
           options={options}
+          required
           bind:value={value}
         />
         <SelectInput
@@ -48,7 +51,14 @@
           options={branches}
           bind:value={branch}
         />
-
+        <NumberInput
+          error={errors.isActive}
+          name="runDay"
+          label='Runs On'
+          min={1}
+          max={27}
+          bind:value={runDay}
+        />
       </fieldset>
     </Form>
   </div>

admin-client/src/components/SiteFormUpdateBuildTaskType.svelte

@@ -0,0 +1,54 @@
+<script>
+  import Form from './Form.svelte';
+  import Modal from './Modal.svelte';
+  import NumberInput from './NumberInput.svelte';
+
+  export let branch;
+  export let buildTaskName;
+  export let id;
+  export let initialRunDay;
+  export let runDay;
+  export let closeModal;
+  export let onSubmit;
+  export let onSuccess;
+  export let onFailure;
+</script>
+
+
+{#if buildTaskName && id}
+  <Modal>
+    <div class="display-flex flex-column flex-align-end">
+      <button
+        class="usa-button usa-button--base"
+        on:click|preventDefault={() => closeModal()}
+      >
+        Close
+      </button>
+    </div>
+    <Form
+      action="Edit"
+      disabled={initialRunDay === runDay}
+      onSubmit={() => onSubmit(id, runDay)}
+      {onSuccess}
+      {onFailure}
+      let:errors
+    >
+      <fieldset class="usa-fieldset">
+        <p class="font-sans-lg">
+          Edit the <span class="text-bold">{buildTaskName}</span>
+          running on the
+          <span class="font-code-lg bg-base-lightest padding-x-1">{branch}</span> branch.
+        </p>
+        <NumberInput
+          error={errors.isActive}
+          name="run-day"
+          label="Select day of the month to run report. (Choose a number
+          from 1 to 27)"
+          min={1}
+          max={27}
+          bind:value={runDay}
+        />
+      </fieldset>
+    </Form>
+  </Modal>
+  {/if}

admin-client/src/components/index.js

@@ -16,6 +16,7 @@ export { default as LabeledItem } from './LabeledItem.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as Nav } from './Nav.svelte';
 export { default as NavButton } from './NavButton.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
 export { default as PageTitle } from './PageTitle.svelte';
 export { default as PaginatedQueryPage } from './PaginatedQueryPage.svelte';
 export { default as PaginationBanner } from './PaginationBanner.svelte';

admin-client/src/lib/api.js

@@ -318,12 +318,17 @@ async function addSiteBuildTask(id, params) {
   return post(`/sites/${id}/tasks`, params);
 }
 
+async function updateSiteBuildTask(id, params) {
+  return put(`/site-build-tasks/${id}`, params);
+}
+
 async function removeBuildTask(id) {
   return destroy(`/site-build-tasks/${id}`);
 }
 
 export {
   addSiteBuildTask,
+  updateSiteBuildTask,
   removeBuildTask,
   destroySite,
   fetchMe,

admin-client/src/pages/Site.svelte

@@ -12,6 +12,7 @@
     fetchUsers,
     updateSite,
     addSiteBuildTask,
+    updateSiteBuildTask,
     removeBuildTask,
   } from '../lib/api';
   import {
@@ -33,6 +34,7 @@
   import { destroySite } from '../flows';
   import { selectSiteDomains, stateColor } from '../lib/utils';
   import SiteFormBuildTaskType from '../components/SiteFormBuildTaskType.svelte';
+  import SiteFormUpdateBuildTaskType from '../components/SiteFormUpdateBuildTaskType.svelte';
 
   const { id } = $router.params;
   $: sitePromise = fetchSite(id);
@@ -44,6 +46,14 @@
   $: usersPromise = fetchUsers({ site: id });
   $: uevsPromise = fetchUserEnvironmentVariables({ site: id });
 
+  const initEditedBuildTask = {
+    isEditing: false,
+    initialRunDay: null,
+    data: null,
+  };
+
+  let editedBuildTask = initEditedBuildTask;
+
   async function handleOrganizationSubmit(organizationId) {
     return updateSite(id, { organizationId });
   }
@@ -78,8 +88,12 @@
     notification.setError(`Site webhook create error: ${error.message}`);
   }
 
-  async function handleSiteBuildTaskSubmit(buildTaskTypeId, branch) {
-    return addSiteBuildTask(id, { buildTaskTypeId, branch });
+  async function handleSiteBuildTaskSubmit(
+    buildTaskTypeId,
+    branch,
+    runDay = null,
+  ) {
+    return addSiteBuildTask(id, { buildTaskTypeId, branch, runDay });
   }
 
   async function handleSiteBuildTaskSuccess() {
@@ -91,6 +105,28 @@
     notification.setError('Build task update error');
   }
 
+  async function handleCloseEditSiteBuildTask() {
+    editedBuildTask = initEditedBuildTask;
+  }
+
+  async function handleOpenEditSiteBuildTask(data) {
+    editedBuildTask = {
+      isEditing: true,
+      initialRunDay: data?.metadata?.runDay,
+      data,
+    };
+  }
+
+  async function handleEditSiteBuildTaskSubmit(sbtId, runDay = null) {
+    return updateSiteBuildTask(sbtId, { runDay });
+  }
+
+  async function handleEditSiteBuildTaskSuccess() {
+    sitePromise = fetchSite(id);
+    notification.setSuccess('Build task edited successfully');
+    editedBuildTask = initEditedBuildTask;
+  }
+
   async function handleRemoveBuildTask(sbt) {
     await removeBuildTask(sbt.id);
     sitePromise = fetchSite(id);
@@ -166,10 +202,7 @@
         </Await>
       </AccordionContent>
       <AccordionContent title="Domains">
-        <DataTable
-          data={selectSiteDomains(site)}
-          borderless={true}
-        >
+        <DataTable data={selectSiteDomains(site)} borderless={true}>
           <tr slot="header">
             <th>Domain Names</th>
             <th>Context</th>
@@ -236,23 +269,38 @@
             <th>Build Task Type</th>
             <th>Type Id</th>
             <th>Branch</th>
-            <th>Metadata</th>
+            <th>Run Day</th>
+            <th>Rules</th>
             <th>Created At</th>
+            <th>Edit</th>
             <th>Remove</th>
           </tr>
           <tr slot="item" let:item={sbt}>
             <td>{sbt.id}</td>
             <td>{sbt.BuildTaskType.name}</td>
             <td>{sbt.buildTaskTypeId}</td>
             <td>{sbt.branch}</td>
-            <td>{JSON.stringify(sbt.metadata)}</td>
+            <td>
+              {sbt.metadata?.runDay}
+            </td>
+            <td>{JSON.stringify(sbt.metadata?.rules)}</td>
             <td>{sbt.createdAt}</td>
+            <td>
+              <input
+                class="usa-button"
+                type="button"
+                value="Edit"
+                on:click|preventDefault={() => handleOpenEditSiteBuildTask(sbt)}
+              />
+            </td>
             <td>
               <input
                 class="usa-button usa-button--base"
                 type="reset"
                 value="Remove"
-                on:click|preventDefault={() => handleRemoveBuildTask(sbt)} /></td>
+                on:click|preventDefault={() => handleRemoveBuildTask(sbt)}
+              />
+            </td>
           </tr>
           <p slot="empty">No build tasks registered</p>
         </DataTable>
@@ -271,3 +319,18 @@
     </Accordion>
   </Await>
 </GridContainer>
+
+{#if editedBuildTask.isEditing}
+  <SiteFormUpdateBuildTaskType
+    isEditing={editedBuildTask.site}
+    branch={editedBuildTask.data?.branch}
+    buildTaskName={editedBuildTask?.data?.BuildTaskType?.name}
+    id={editedBuildTask?.data?.id}
+    initialRunDay={editedBuildTask.initialRunDay}
+    runDay={editedBuildTask.data?.metadata?.runDay}
+    closeModal={handleCloseEditSiteBuildTask}
+    onSubmit={handleEditSiteBuildTaskSubmit}
+    onSuccess={handleEditSiteBuildTaskSuccess}
+    onFailure={handleSiteBuildTaskFailure}
+  />
+{/if}

api/admin/controllers/task.js

@@ -57,16 +57,30 @@ module.exports = wrapHandlers({
   },
 
   async addSiteBuildTask(req, res) {
+    const { branch, runDay } = req.body;
+    const metadata = runDay ? { runDay } : {};
+
     await SiteBuildTask.create({
       buildTaskTypeId: req.body.buildTaskTypeId,
       siteId: req.params.id,
-      branch: req.body.branch,
-      metadata: {},
+      branch,
+      metadata,
     });
 
     return res.json({});
   },
 
+  async updateSiteBuildTask(req, res) {
+    const { id } = req.params;
+    const { runDay } = req.body;
+
+    const sbt = await SiteBuildTask.findByPk(id);
+
+    await sbt.update({ metadata: { ...sbt.metadata, runDay } });
+
+    return res.json({});
+  },
+
   async removeSiteBuiltTask(req, res) {
     const { id } = req.params;
 

api/admin/routers/api.js

@@ -56,6 +56,7 @@ apiRouter.post('/sites/:id/tasks', AdminControllers.Task.addSiteBuildTask);
 apiRouter.get('/tasks', AdminControllers.Task.list);
 apiRouter.get('/tasks/types', AdminControllers.Task.listTypes);
 apiRouter.delete('/site-build-tasks/:id', authorize(['pages.admin']), AdminControllers.Task.removeSiteBuiltTask);
+apiRouter.put('/site-build-tasks/:id', AdminControllers.Task.updateSiteBuildTask);
 apiRouter.get('/me', AdminControllers.User.me);
 apiRouter.get('/user-environment-variables', AdminControllers.UserEnvironmentVariable.list);
 apiRouter.get('/users', AdminControllers.User.list);

api/controllers/site.js

@@ -41,7 +41,7 @@ module.exports = wrapHandlers({
     const { user } = req;
 
     const sites = await Site.forUser(user).findAll({
-      include: [Domain, SiteBranchConfig],
+      include: [Domain, SiteBranchConfig, SiteBuildTask],
     });
 
     if (!sites) {
@@ -304,7 +304,7 @@ module.exports = wrapHandlers({
       body,
     } = req;
 
-    const { metadata } = body;
+    const { metadata: { rules } } = body;
 
     // check Site for authorizer's sake
     const site = await Site.findByPk(siteId);
@@ -321,7 +321,9 @@ module.exports = wrapHandlers({
       return res.notFound();
     }
 
-    await siteBuildTask.update({ metadata });
+    const { metadata } = siteBuildTask.dataValues;
+
+    await siteBuildTask.update({ metadata: { ...metadata, rules } });
 
     return res.ok({});
   },