@plusscommunities/pluss-maintenance-web 1.1.16 → 1.1.18-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-maintenance-web",
-  "version": "1.1.16",
+  "version": "1.1.18-beta.0",
   "description": "Extension package to enable maintenance on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -10,7 +10,12 @@
     "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
     "betaupload:p": "npm run betapatch && npm run betaupload",
     "upload": "npm run build && npm publish --access public && rm -rf node_modules",
-    "upload:p": "npm run patch && npm run upload"
+    "upload:p": "npm run patch && npm run upload",
+    "copy:add": "run(){ ext=${1:-default}; test -f src/values.config.$ext.js || cp src/values.config.default.js src/values.config.$ext.js; }; run",
+    "copy:get": "echo $npm_package_name",
+    "copy:set": "run(){ target='\\@plusscommunities\\/pluss-maintenance-web'; ext=${1:-default}; [ $ext == 'default' ] && replace=$target || replace=$target'-'$ext; echo 'Setting target to '$replace; test -f src/values.config.$ext.js && cp -f src/values.config.$ext.js src/values.config.js; sed -i '' -e 's/'$target'.*\"/'$replace'\"/g' package.json; }; run",
+    "copy:betaupload": "npm run betapatch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run betaupload; done; npm run copy:set;",
+    "copy:upload": "npm run patch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run upload; done; npm run copy:set;"
   },
   "author": "Phillip Suh",
   "license": "ISC",

package/src/actions/types.js

@@ -1,4 +1,6 @@
-export const JOBS_LOADED = 'JOBS_LOADED';
-export const JOBS_REMOVED = 'JOBS_REMOVED';
-export const JOBS_TYPES_LOADED = 'JOBS_TYPES_LOADED';
-export const JOBS_LOADING = 'JOBS_LOADING';
+import { values } from '../values.config';
+
+export const JOBS_LOADED = values.actionJobsLoaded;
+export const JOBS_REMOVED = values.actionJobsRemoved;
+export const JOBS_TYPES_LOADED = values.actionJobsTypesLoaded;
+export const JOBS_LOADING = values.actionJobsLoading;

package/src/apis/maintenanceActions.js

@@ -1,9 +1,18 @@
 import { PlussCore } from '../feature.config';
+import { values } from '../values.config';
 const { Helper, Session } = PlussCore;
 
 export const maintenanceActions = {
-  getJobTypes: (site) => {
-    let url = Helper.getUrl('maintenance', 'getjobtypes');
+  getJobType: (site, typeId) => {
+    let url = Helper.getUrl(values.serviceKey, 'getjobtype');
+    return Session.authedFunction({
+      method: 'POST',
+      url,
+      data: { site, typeId },
+    });
+  },
+  getJobTypes: (site, id) => {
+    let url = Helper.getUrl(values.serviceKey, 'getjobtypes');
     return Session.authedFunction({
       method: 'POST',
       url,
@@ -11,7 +20,7 @@ export const maintenanceActions = {
     });
   },
   getJob: (site, id) => {
-    let url = Helper.getUrl('maintenance', 'getJob');
+    let url = Helper.getUrl(values.serviceKey, 'getJob');
     return Session.authedFunction({
       method: 'POST',
       url,
@@ -19,7 +28,7 @@ export const maintenanceActions = {
     });
   },
   getJobByJobId: (site, jobId) => {
-    let url = Helper.getUrl('maintenance', 'getJob');
+    let url = Helper.getUrl(values.serviceKey, 'getJob');
     return Session.authedFunction({
       method: 'POST',
       url,
@@ -29,7 +38,7 @@ export const maintenanceActions = {
   getJobs: (site, status = '', type = '') => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'getJobs'),
+      url: Helper.getUrl(values.serviceKey, 'getJobs'),
       data: { site, status, type },
     });
   },
@@ -46,7 +55,7 @@ export const maintenanceActions = {
     }
     return Session.authedFunction({
       method: 'GET',
-      url: Helper.getUrl('maintenance', 'get/requests', query),
+      url: Helper.getUrl(values.serviceKey, 'get/requests', query),
     });
   },
   getJobsRecursive: (site, status, type, lastKey, jobs = []) => {
@@ -63,7 +72,7 @@ export const maintenanceActions = {
   createJob: (job) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'sendMaintenance'),
+      url: Helper.getUrl(values.serviceKey, 'sendMaintenance'),
       data: {
         ...job,
       },
@@ -72,28 +81,28 @@ export const maintenanceActions = {
   editJob: (job, site) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'editJob'),
+      url: Helper.getUrl(values.serviceKey, 'editJob'),
       data: { job, site },
     });
   },
   deleteJob: (site, id) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'requests/remove'),
+      url: Helper.getUrl(values.serviceKey, 'requests/remove'),
       data: { site, id },
     });
   },
   editJobStatus: (id, status) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'editJobStatus'),
+      url: Helper.getUrl(values.serviceKey, 'editJobStatus'),
       data: { id, status },
     });
   },
   assignJob: (jobId, userId) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'update/assign'),
+      url: Helper.getUrl(values.serviceKey, 'update/assign'),
       data: {
         id: jobId,
         userId,
@@ -103,13 +112,13 @@ export const maintenanceActions = {
   getAssignees: (site) => {
     return Session.authedFunction({
       method: 'GET',
-      url: Helper.getUrl('maintenance', 'get/assignees', { site }),
+      url: Helper.getUrl(values.serviceKey, 'get/assignees', { site }),
     });
   },
   addNote: (jobId, note, attachments) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'requests/note'),
+      url: Helper.getUrl(values.serviceKey, 'requests/note'),
       data: {
         id: jobId,
         note,
@@ -121,7 +130,7 @@ export const maintenanceActions = {
   editNote: (jobId, noteId, note, attachments) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'requests/note'),
+      url: Helper.getUrl(values.serviceKey, 'requests/note'),
       data: {
         id: jobId,
         note,
@@ -134,7 +143,7 @@ export const maintenanceActions = {
   deleteNote: (jobId, noteId) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'requests/note'),
+      url: Helper.getUrl(values.serviceKey, 'requests/note'),
       data: {
         id: jobId,
         noteId,
@@ -142,37 +151,27 @@ export const maintenanceActions = {
       },
     });
   },
-  addJobType: (site, name, email, description, level) => {
+  addJobType: (site, name, email, description, level, hasCustomFields, customFields) => {
+    const data = { site, name, email, description, level, hasCustomFields, customFields: customFields || [] };
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'createJobType'),
-      data: {
-        site,
-        name,
-        email,
-        description,
-        level,
-      },
+      url: Helper.getUrl(values.serviceKey, 'createJobType'),
+      data,
     });
   },
-  editJobType: (site, id, name, email, description, level) => {
+  editJobType: (site, id, name, email, description, level, hasCustomFields, customFields) => {
+    const data = { site, id, name, email, description, level, hasCustomFields, customFields: customFields || [] };
+    if (hasCustomFields && customFields) data.customFields = customFields;
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'editJobType'),
-      data: {
-        site,
-        id,
-        name,
-        email,
-        description,
-        level,
-      },
+      url: Helper.getUrl(values.serviceKey, 'editJobType'),
+      data,
     });
   },
   deleteJobType: (site, id) => {
     return Session.authedFunction({
       method: 'POST',
-      url: Helper.getUrl('maintenance', 'deleteJobType'),
+      url: Helper.getUrl(values.serviceKey, 'deleteJobType'),
       data: {
         site,
         id,

package/src/components/ActivityText.js

@@ -1,47 +1,48 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
+import { values } from '../values.config';
 
 class ActivityText extends Component {
   render() {
     const { data, classes, clickableClasses, highlightedClasses } = this.props;
 
     switch (data.Type) {
-      case 'MaintenanceJobStatusChanged':
+      case values.activityMaintenanceJobStatusChanged:
         return (
           <p className={classes}>
             <span className={highlightedClasses}>{data.User.displayName}</span>
-            &nbsp;changed a maintenance request's status:&nbsp;
-            <Link to={`/requestsHub/jobDetails/${data.Id}`} className={clickableClasses}>
+            &nbsp;{values.textChangedRequestStatus}&nbsp;
+            <Link to={`${values.routeRequestDetails}/${data.Id}`} className={clickableClasses}>
               {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
             </Link>
           </p>
         );
-      case 'AddMaintenanceJob':
+      case values.activityAddMaintenanceJob:
         return (
           <p className={classes}>
             <span className={highlightedClasses}>{data.User.displayName}</span>
-            &nbsp;added a maintenance request:&nbsp;
-            <Link to={`/requestsHub/jobDetails/${data.Id}`} className={clickableClasses}>
+            &nbsp;{values.textAddedRequest}&nbsp;
+            <Link to={`${values.routeRequestDetails}/${data.Id}`} className={clickableClasses}>
               {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
             </Link>
           </p>
         );
-      case 'EditMaintenanceJob':
+      case values.activityEditMaintenanceJob:
         return (
           <p className={classes}>
             <span className={highlightedClasses}>{data.User.displayName}</span>
-            &nbsp;edited a maintenance request:&nbsp;
-            <Link to={`/requestsHub/jobDetails/${data.Id}`} className={clickableClasses}>
+            &nbsp;{values.textEditedRequest}&nbsp;
+            <Link to={`${values.routeRequestDetails}/${data.Id}`} className={clickableClasses}>
               {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
             </Link>
           </p>
         );
-      case 'DeleteMaintenanceJob':
+      case values.activityDeleteMaintenanceJob:
         return (
           <p className={classes}>
             <span className={highlightedClasses}>{data.User.displayName}</span>
-            &nbsp;removed a maintenance request:&nbsp;
+            &nbsp;{values.textRemovedRequest}&nbsp;
             <span className={highlightedClasses}>
               {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
             </span>

package/src/components/AnalyticsHub.js

@@ -4,6 +4,7 @@ import { faCircleCheck, faComment, faWrench } from '@fortawesome/free-solid-svg-
 import { connect } from 'react-redux';
 import { analyticsActions } from '../apis';
 import { PlussCore } from '../feature.config';
+import { values } from '../values.config';
 
 const { Analytics, Session, Components } = PlussCore;
 
@@ -18,15 +19,22 @@ const getInitialState = () => ({
 });
 
 // AnalyticsHub Component
-const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount }) => {
+const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings }) => {
   const [analyticsData, setAnalyticsData] = useState(getInitialState());
   const [isExportOpen, setIsExportOpen] = useState(false);
 
-  const hasAccess = Session.validateAccess(auth.site, 'maintenanceTracking', auth);
+  const hasAccess = Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth);
   if (!hasAccess) {
     return null;
   }
 
+  const featureTitle = ((key) => {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textMenuTitle;
+    }
+    return strings.sideNav[key];
+  })();
+
   const exportColumns = [
     { label: 'Select All', key: '' },
     { label: 'Start Date', key: 'startDate' },
@@ -45,8 +53,8 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount }) => {
     // Load analytics data here using startTime and endTime
     const timeDifference = endTime - startTime;
     const [currentStatsResponse, prevStatsResponse] = await Promise.all([
-      analyticsActions.getAggregateEntityStats(auth.site, 'maintenancerequest', startTime, endTime, true),
-      analyticsActions.getAggregateEntityStats(auth.site, 'maintenancerequest', startTime - timeDifference, startTime, true),
+      analyticsActions.getAggregateEntityStats(auth.site, values.analyticsKey, startTime, endTime, true),
+      analyticsActions.getAggregateEntityStats(auth.site, values.analyticsKey, startTime - timeDifference, startTime, true),
     ]);
 
     const data = {
@@ -89,7 +97,7 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount }) => {
         }}
         columns={exportColumns}
         source={source}
-        filename={`maintenanceanalytics_${source[0].startDate}_${source[0].endDate}.csv`}
+        filename={`${values.analyticsKey}analytics_${source[0].startDate}_${source[0].endDate}.csv`}
       />
     );
   };
@@ -99,7 +107,7 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount }) => {
       {csvPopup()}
       <div>
         <Components.Text type="h4" className="inlineBlock marginRight-40">
-          Maintenance
+          {featureTitle}
         </Components.Text>
         <Components.Button
           inline
@@ -116,30 +124,30 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount }) => {
       </div>
       <div className="analyticsSection dashboardSection_content">
         <Components.StatBox
-          title="Requests"
+          title={`${featureTitle} Requests`}
           icon={faWrench}
           value={analyticsData.requests}
           previousValue={analyticsData.prevRequests}
           prevText={prevText}
-          viewGraphLink={`/chart?entity=maintenancerequest&startTime=${startTime}&endTime=${endTime}&key=Request&countType=total&dayCount=${dayCount}`}
+          viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Request&countType=total&dayCount=${dayCount}`}
           isLoading={analyticsData.isLoading}
         />
         <Components.StatBox
-          title="Completed Requests"
+          title={`Completed ${featureTitle} Requests`}
           icon={faCircleCheck}
           value={analyticsData.completedRequests}
           previousValue={analyticsData.prevCompletedRequests}
           prevText={prevText}
-          viewGraphLink={`/chart?entity=maintenancerequest&startTime=${startTime}&endTime=${endTime}&key=RequestCompleted&countType=unique&dayCount=${dayCount}`}
+          viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=RequestCompleted&countType=unique&dayCount=${dayCount}`}
           isLoading={analyticsData.isLoading}
         />
         <Components.StatBox
-          title="Maintenance Comments"
+          title={`${featureTitle} Comments`}
           icon={faComment}
           value={analyticsData.comments}
           previousValue={analyticsData.prevComments}
           prevText={prevText}
-          viewGraphLink={`/chart?entity=maintenancerequest&startTime=${startTime}&endTime=${endTime}&key=Comment&countType=total&dayCount=${dayCount}`}
+          viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Comment&countType=total&dayCount=${dayCount}`}
           isLoading={analyticsData.isLoading}
         />
       </div>
@@ -151,6 +159,7 @@ const mapStateToProps = (state) => {
   const { auth } = state;
   return {
     auth,
+    strings: (state.strings && state.strings.config) || {},
   };
 };
 

package/src/components/JobList.js

@@ -11,6 +11,7 @@ import { PlussCore } from '../feature.config';
 import { maintenanceActions } from '../apis';
 import StatusTypes from '../maintenanceStatus.json';
 import { Colours } from '@plusscommunities/pluss-core-web';
+import { values } from '../values.config';
 
 const { Session, Components, Analytics } = PlussCore;
 
@@ -28,11 +29,11 @@ class JobList extends Component {
     this.exportColumns = [
       { label: 'Select All', key: '' },
       { label: 'System Id', key: 'id' },
-      { label: 'Job No.', key: 'jobId' },
+      { label: `${values.textEntityName} No.`, key: 'jobId' },
       { label: 'Type', key: 'type' },
       { label: 'Status', key: 'status' },
       { label: 'Title', key: 'title' },
-      { label: 'Location', key: 'room' },
+      { label: 'Address', key: 'room' },
       { label: 'Description', key: 'description' },
       { label: 'Notes', key: 'notes' },
       { label: 'User Name', key: 'userName' },
@@ -85,7 +86,7 @@ class JobList extends Component {
   };
 
   onRemoveRequest = async (request) => {
-    if (window.confirm(`Are you sure you want to delete that request?`)) {
+    if (window.confirm(values.textAreYouSureYouWantToDelete)) {
       this.props.removeJob(request.id);
       try {
         await maintenanceActions.deleteJob(this.props.auth.site, request.id);
@@ -274,8 +275,45 @@ class JobList extends Component {
     return source;
   };
 
+  getCustomFieldValue = (field) => {
+    switch (field.type) {
+      case 'date':
+        return field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD-MMM-YYYY') : '';
+      case 'time':
+        return field.answer ? moment(field.answer, 'HH:mm').format('h:mm a') : '';
+      case 'yn':
+        return field.answer ? 'Yes' : 'No';
+      case 'checkbox':
+        return field.answer && Array.isArray(field.answer) ? field.answer.join(', ') : '';
+      default:
+        return field.answer;
+    }
+  };
+
+  getCustomFields = (job, customColumns) => {
+    const { customFields, type } = job;
+    const customValues = {};
+    if (customFields && Array.isArray(customFields)) {
+      customFields.forEach((field) => {
+        // Exclude un-exportable fields
+        if (['image', 'staticTitle', 'staticText'].includes(field.type)) return;
+
+        const fieldKey = `${_.camelCase(type)}.${_.camelCase(field.label)}`;
+        // Build custom columns
+        const exists = customColumns.find((c) => c.key === fieldKey);
+        if (!exists) {
+          customColumns.push({ label: field.label, key: fieldKey });
+        }
+        // Build custom field source
+        customValues[fieldKey] = this.getCustomFieldValue(field);
+      });
+    }
+    return customValues;
+  };
+
   getExportSource = () => {
-    return this.getSource().map((r) => {
+    const customColumns = [];
+    const source = this.getSource().map((r) => {
       const history = r.history || [];
       const progressEntry = _.find(history, (e) => {
         return e.status !== 'Unassigned';
@@ -308,8 +346,14 @@ class JobList extends Component {
         }
         notes += note.Note;
       });
-      return { ...r, notes, progressTime, completedTime, progressDuration, completedDuration };
+      const customFieldValues = this.getCustomFields(r, customColumns);
+      return { ...r, ...customFieldValues, notes, progressTime, completedTime, progressDuration, completedDuration };
     });
+
+    // Compose revised columns list with custom fields
+    const index = this.exportColumns.findIndex((c) => c.key === 'notes');
+    const columns = [...this.exportColumns.slice(0, index), ...customColumns, ...this.exportColumns.slice(index)];
+    return { columns, source };
   };
 
   isExportReady = () => {
@@ -335,6 +379,7 @@ class JobList extends Component {
           {_.sortBy(_.uniq(this.props.source.map((r) => r.type)), (t) => t.toLowerCase()).map((type) => {
             return (
               <Components.Tag
+                key={type}
                 onClick={() => {
                   this.selectTypeFilter(type);
                 }}
@@ -353,6 +398,7 @@ class JobList extends Component {
             const text = sKey === 'incomplete' ? 'All Incomplete' : StatusTypes[sKey].text;
             return (
               <Components.Tag
+                key={sKey}
                 onClick={() => {
                   this.selectStatusFilter(sKey);
                 }}
@@ -476,7 +522,7 @@ class JobList extends Component {
         <tr key={index}>
           <td>{ev.jobId}</td>
           <td className="table-TitleColumn">
-            <Link to={`/requestsHub/jobDetails/${ev.id}`}>
+            <Link to={`${values.routeRequestDetails}/${ev.id}`}>
               <span>{ev.title}</span>
             </Link>
           </td>
@@ -504,10 +550,10 @@ class JobList extends Component {
           </td>
           <td className="table-options">
             <div style={{ display: 'flex', alignItems: 'center' }}>
-              <Link to={`/requestsHub/jobDetails/${ev.id}`}>
+              <Link to={`${values.routeRequestDetails}/${ev.id}`}>
                 <FontAwesome style={{ fontSize: 20, padding: 5, cursor: 'pointer' }} name="pencil" />
               </Link>
-              {Session.validateAccess(this.props.auth.site, 'maintenanceTracking', this.props.auth) && (
+              {Session.validateAccess(this.props.auth.site, values.permissionMaintenanceTracking, this.props.auth) && (
                 <a onClick={() => this.onRemoveRequest(ev)}>
                   <FontAwesome style={{ fontSize: 20, padding: 5, marginLeft: 8, cursor: 'pointer' }} name="minus-circle" />
                 </a>
@@ -531,17 +577,19 @@ class JobList extends Component {
   }
 
   renderEmpty() {
+    const title = this.props.strings[`${values.featureKey}_textTitleRequests`] || values.textTitleRequests;
+
     return (
       <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 32 }}>
         <div className="emptyState" />
         <div className="marginTop-32" style={{ maxWidth: 500, textAlign: 'center' }}>
           <span className="fontRegular fontSize-13">
-            <span className="fontHeavy text-brandingColour">Maintenance </span>
-            allows your users to submit Requests (such as maintenance requests) that all appear in this job board.
+            <span className="fontHeavy text-brandingColour">{title} </span>
+            {values.textEmptyDescription}
           </span>
         </div>
         <div className="marginTop-8 fontRegular fontSize-13" style={{ maxWidth: 500, textAlign: 'center' }}>
-          Example might be; Fix my light bulb, hand rail is broken, or please send flowers to Mum.
+          {values.textEmptyExample}
         </div>
       </div>
     );
@@ -561,7 +609,7 @@ class JobList extends Component {
                 this.sortByCol('jobId');
               }}
             >
-              Job No.{this.renderSort('jobId')}
+              {values.textEntityName} No.{this.renderSort('jobId')}
             </th>
             <th
               className={`${this.sortIsActive('title')}`}
@@ -597,7 +645,7 @@ class JobList extends Component {
                 this.sortByCol('room');
               }}
             >
-              Location{this.renderSort('room')}
+              Address{this.renderSort('room')}
             </th>
             <th
               className={`${this.sortIsActive('assigned')}`}
@@ -745,7 +793,7 @@ class JobList extends Component {
         <Components.GenericInput
           id="search"
           type="text"
-          placeholder="Search by Job ID, Location or Title"
+          placeholder={`Search by ${values.textEntityName} ID, Address or Title`}
           value={this.state.search}
           onChange={(e) => this.onHandleSearchChange(e)}
           className="genericInputContainer-rounded marginTop-10"
@@ -760,14 +808,8 @@ class JobList extends Component {
       return null;
     }
 
-    return (
-      <Components.ExportCsvPopup
-        onClose={this.onCloseExportCsv}
-        columns={this.exportColumns}
-        source={this.getExportSource()}
-        filename="requests.csv"
-      />
-    );
+    const { columns, source } = this.getExportSource();
+    return <Components.ExportCsvPopup onClose={this.onCloseExportCsv} columns={columns} source={source} filename="requests.csv" />;
   }
 
   render() {
@@ -783,11 +825,11 @@ class JobList extends Component {
 }
 
 const mapStateToProps = (state) => {
-  const { jobs } = state.maintenance;
   const { auth } = state;
   return {
-    jobs,
+    jobs: state[values.reducerKey].jobs,
     auth,
+    strings: (state.strings && state.strings.config) || {},
   };
 };