Impl [Jobs] Revamp Jobs page filters bar

src/common/NameFilter/NameFilter.js

@@ -28,15 +28,17 @@ import { ReactComponent as SearchIcon } from 'igz-controls/images/search.svg'
 
 import './nameFilter.scss'
 
-const NameFilter = ({ applyChanges, filterMenuName= '' }) => {
+const NameFilter = ({ applyChanges, filterMenuName = '' }) => {
   const { input } = useField(NAME_FILTER)
   const dispatch = useDispatch()
 
   const handleNameChange = event => {
     if (event.keyCode === KEY_CODES.ENTER) {
       applyChanges(event.target.value)
       if (filterMenuName) {
-        dispatch(setFiltersValues({ name: filterMenuName, value: { [NAME_FILTER]: event.target.value } }))
+        dispatch(
+          setFiltersValues({ name: filterMenuName, value: { [NAME_FILTER]: event.target.value } })
+        )
       } else {
         dispatch(setFilters({ [NAME_FILTER]: event.target.value }))
       }
@@ -54,7 +56,7 @@ const NameFilter = ({ applyChanges, filterMenuName= '' }) => {
   }
 
   return (
-    <div className="name-filter">
+    <div className="name-filter filter-column">
       <FormInput
         iconClass="name-filter__icon"
         iconClick={handleIconClick}

src/components/ActionBar/ActionBar.js

@@ -289,7 +289,7 @@ const ActionBar = ({
               </div>
             )}
             {DATES_FILTER in filterMenu && !filtersConfig[DATES_FILTER].hidden && (
-              <div key={DATES_FILTER} className="action-bar__filters-item">
+              <div key={DATES_FILTER} className="action-bar__filters-item filter-column">
                 <Field name={DATES_FILTER}>
                   {({ input }) => {
                     return (
@@ -312,18 +312,18 @@ const ActionBar = ({
                 </Field>
               </div>
             )}
+            {filterMenuModal && (
+              <FilterMenuModal
+                applyChanges={filterMenuModal => applyChanges(formState.values, filterMenuModal)}
+                filterMenuName={filterMenuName}
+                initialValues={filterMenuModalInitialState}
+                restartFormTrigger={`${tab}`}
+                values={filterMenuModal.values}
+              >
+                {children}
+              </FilterMenuModal>
+            )}
           </div>
-          {filterMenuModal && (
-            <FilterMenuModal
-              applyChanges={filterMenuModal => applyChanges(formState.values, filterMenuModal)}
-              filterMenuName={filterMenuName}
-              initialValues={filterMenuModalInitialState}
-              restartFormTrigger={`${tab}`}
-              values={filterMenuModal.values}
-            >
-              {children}
-            </FilterMenuModal>
-          )}
           {(withRefreshButton || !isEmpty(actionButtons)) && (
             <div className="action-bar__actions">
               {actionButtons.map(
@@ -332,6 +332,7 @@ const ActionBar = ({
                   !actionButton.hidden &&
                   (actionButton.template || (
                     <Button
+                      disabled={actionButton.disabled}
                       key={index}
                       variant={actionButton.variant}
                       label={actionButton.label}
@@ -340,7 +341,13 @@ const ActionBar = ({
                     />
                   ))
               )}
-              {autoRefreshIsEnabled && <FormCheckBox className="auto-refresh" label={AUTO_REFRESH} name={AUTO_REFRESH_ID} />}
+              {autoRefreshIsEnabled && (
+                <FormCheckBox
+                  className="auto-refresh"
+                  label={AUTO_REFRESH}
+                  name={AUTO_REFRESH_ID}
+                />
+              )}
               <FormOnChange handler={setAutoRefresh} name={AUTO_REFRESH_ID} />
               {withRefreshButton && (
                 <RoundedIcon tooltipText="Refresh" onClick={() => refresh(formState)} id="refresh">

src/components/FilterMenuModal/FilterMenuModal.js

@@ -225,7 +225,9 @@ const FilterMenuModal = ({
                       )}
                       {applyButton && !withoutApplyButton && (
                         <Button
-                          disabled={isEqual(filtersData?.values, formState.values) || formState?.invalid}
+                          disabled={
+                            isEqual(filtersData?.values, formState.values) || formState?.invalid
+                          }
                           id="filter-apply-btn"
                           variant={applyButton.variant}
                           label={applyButton.label}

src/components/JobWizard/JobWizard.js

@@ -68,7 +68,6 @@ import { FUNCTIONS_SELECTION_FUNCTIONS_TAB } from './JobWizardSteps/JobWizardFun
 import { JOB_WIZARD_MODE } from '../../types'
 import { MODAL_MAX } from 'igz-controls/constants'
 import { resetModalFilter } from '../../reducers/filtersReducer'
-import { scheduledJobsActionCreator } from '../Jobs/ScheduledJobs/scheduledJobs.util'
 import { setFieldState, isSubmitDisabled } from 'igz-controls/utils/form.util'
 import { setNotification } from '../../reducers/notificationReducer'
 import { showErrorNotification } from '../../utils/notifications.util'
@@ -139,11 +138,11 @@ const JobWizard = ({
 
   useEffect(() => {
     if (!isEditMode) {
-      dispatch(projectsAction.fetchProject(params.projectName, { format: 'minimal' })).then(
-        project => setCurrentProject(project)
-      ).catch(error => {
-        showErrorNotification(dispatch, error, 'The project failed to load')
-      })
+      dispatch(projectsAction.fetchProject(params.projectName, { format: 'minimal' }))
+        .then(project => setCurrentProject(project))
+        .catch(error => {
+          showErrorNotification(dispatch, error, 'The project failed to load')
+        })
     }
   }, [dispatch, isEditMode, params.projectName])
 
@@ -563,7 +562,6 @@ export default connect(
   {
     ...functionsActions,
     ...jobsActions,
-    ...projectsAction,
-    editJob: scheduledJobsActionCreator.editJob
+    ...projectsAction
   }
 )(JobWizard)