- {automationRulesLoading.isLoading &&
+ {automationRulesLoading.isLoading && (
- }
+ )}
{project.automationRules.map((rule) => {
@@ -95,30 +86,19 @@ const AutomationRulesList = ({ project, availableModels, onAddRuleClick, onEditR
-
+
-
+
- )
+ );
})}
-
@@ -127,6 +107,4 @@ const AutomationRulesList = ({ project, availableModels, onAddRuleClick, onEditR
);
};
-
export default AutomationRulesList;
-
diff --git a/src/features/projects/CategoryConfigForm.jsx b/src/features/projects/CategoryConfigForm.jsx
index aff99fa2..24f74e51 100644
--- a/src/features/projects/CategoryConfigForm.jsx
+++ b/src/features/projects/CategoryConfigForm.jsx
@@ -7,7 +7,6 @@ import Checkbox from '../../components/Checkbox.jsx';
import { CheckboxLabel } from '../../components/CheckboxLabel.jsx';
import { CheckboxWrapper } from '../../components/CheckboxWrapper.jsx';
-
const StyledFieldRow = styled(FieldRow, {
paddingTop: '$2',
});
@@ -16,7 +15,7 @@ const CategoryName = styled(CheckboxLabel, {
fontSize: '$3',
fontFamily: '$Roboto',
fontWeight: '$2',
- minWidth: '130px'
+ minWidth: '130px',
});
const ConfThreshold = styled('div', {
@@ -39,10 +38,10 @@ const StyledSlider = styled(ReactSlider, {
'.thumb': {
backgroundColor: '$gray4',
cursor: 'default',
- }
- }
- }
- }
+ },
+ },
+ },
+ },
});
const StyledThumb = styled('div', {
@@ -75,27 +74,22 @@ const ConfDisplay = styled('div', {
disabled: {
true: {
color: '$gray4',
- }
- }
- }
+ },
+ },
+ },
});
const DisabledCheckboxWrapper = styled(CheckboxWrapper, {
padding: '0px',
minWidth: '100px',
- 'label': {
+ label: {
display: 'flex',
marginBottom: '0px',
- }
+ },
});
-export function fieldToSlider({
- field,
- form: { isSubmitting, setFieldValue },
- disabled,
- ...props
-}) {
+export function fieldToSlider({ field, form: { isSubmitting }, disabled, ...props }) {
return {
...props,
...field,
@@ -103,8 +97,7 @@ export function fieldToSlider({
disabledStyles: disabled,
value: props.value * 100,
};
-};
-
+}
const Slider = (props) => (
{
const handleCheckboxChange = () => {
props.form.setFieldValue(props.field.name, !props.field.value);
};
- return (
-
- )
+ return ;
};
const Track = (props, state) => ;
-const Thumb = (props, state) => ;
-
+const Thumb = (props) => ;
const CategoryConfigForm = ({ catName, config }) => {
return (
@@ -146,10 +132,7 @@ const CategoryConfigForm = ({ catName, config }) => {
name={`action.categoryConfig.${catName}.disabled`}
value={config.disabled}
/>
-
+
{catName}
@@ -163,13 +146,10 @@ const CategoryConfigForm = ({ catName, config }) => {
disabled={config.disabled}
/>
-
- { Math.round(config.confThreshold * 100) }%
-
+
{Math.round(config.confThreshold * 100)}%
);
};
-
-export default CategoryConfigForm;
\ No newline at end of file
+export default CategoryConfigForm;
diff --git a/src/features/projects/CreateProjectForm.jsx b/src/features/projects/CreateProjectForm.jsx
index 1ee0ccd9..e739b8a3 100644
--- a/src/features/projects/CreateProjectForm.jsx
+++ b/src/features/projects/CreateProjectForm.jsx
@@ -1,21 +1,15 @@
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { timeZonesNames } from '@vvo/tzdb';
-import _ from 'lodash';
import { Cross2Icon } from '@radix-ui/react-icons';
import { styled } from '../../theme/stitches.config.js';
import { FormWrapper, FormFieldWrapper, FieldRow, ButtonRow, FormError } from '../../components/Form';
import Button from '../../components/Button.jsx';
import SelectField from '../../components/SelectField.jsx';
-import {
- Toast,
- ToastTitle,
- ToastAction,
- ToastViewport
-} from '../../components/Toast';
+import { Toast, ToastTitle, ToastAction, ToastViewport } from '../../components/Toast';
import IconButton from '../../components/IconButton';
import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner.jsx';
@@ -26,14 +20,14 @@ import {
fetchModelOptions,
selectModelOptions,
selectCreateProjectLoading,
- selectModelOptionsLoading
+ selectModelOptionsLoading,
} from './projectsSlice.js';
const PageWrapper = styled('div', {
maxWidth: '600px',
padding: '0 $5',
width: '100%',
- margin: '0 auto'
+ margin: '0 auto',
});
const Header = styled('div', {
@@ -41,14 +35,14 @@ const Header = styled('div', {
fontWeight: '$5',
fontFamily: '$roboto',
paddingTop: '$8',
- marginBottom: '$4'
+ marginBottom: '$4',
});
const createProjectSchema = Yup.object().shape({
name: Yup.string().required('Enter a project name'),
description: Yup.string().required('Enter a short description'),
timezone: Yup.string().required('Select a timezone'),
- availableMLModels: Yup.array().min(1, "Select at least one ML model").required('Select a ML model'),
+ availableMLModels: Yup.array().min(1, 'Select at least one ML model').required('Select a ML model'),
});
const CreateProjectForm = () => {
@@ -56,15 +50,16 @@ const CreateProjectForm = () => {
const stateMsg = useSelector(selectCreateProjectState);
const mlModels = useSelector(selectModelOptions);
const createProjectIsLoading = useSelector(selectCreateProjectLoading);
- const mlModelsOptionsIsLoading = useSelector(selectModelOptionsLoading)
+ const mlModelsOptionsIsLoading = useSelector(selectModelOptionsLoading);
const tzOptions = timeZonesNames.map((tz) => ({ value: tz, label: tz }));
const mlModelOptions = useMemo(
- () => mlModels.map(({ _id, description }) => ({
- value: _id,
- label: description
- })),
- [mlModels]
+ () =>
+ mlModels.map(({ _id, description }) => ({
+ value: _id,
+ label: description,
+ })),
+ [mlModels],
);
useEffect(() => {
@@ -73,11 +68,11 @@ const CreateProjectForm = () => {
return (
- {(createProjectIsLoading || mlModelsOptionsIsLoading) &&
+ {(createProjectIsLoading || mlModelsOptionsIsLoading) && (
- }
+ )}
{
name: '',
description: '',
timezone: '',
- availableMLModels: []
+ availableMLModels: [],
}}
validationSchema={createProjectSchema}
onSubmit={(values) => dispatch(createProject(values))}
@@ -94,31 +89,23 @@ const CreateProjectForm = () => {
);
-}
+};
export default CreateProjectForm;
diff --git a/src/features/projects/DeleteViewForm.jsx b/src/features/projects/DeleteViewForm.jsx
index dcdf03e4..4c401dc6 100644
--- a/src/features/projects/DeleteViewForm.jsx
+++ b/src/features/projects/DeleteViewForm.jsx
@@ -3,16 +3,11 @@ import { useSelector, useDispatch } from 'react-redux';
import { styled } from '../../theme/stitches.config.js';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
-import {
- selectViewsLoading,
- selectSelectedView,
- editView
-} from './projectsSlice.js';
+import { selectViewsLoading, selectSelectedView, editView } from './projectsSlice.js';
import Button from '../../components/Button.jsx';
import { FormWrapper, ButtonRow, HelperText } from '../../components/Form.jsx';
import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner.jsx';
-
const ViewName = styled('span', {
fontWeight: '$5',
});
@@ -22,7 +17,7 @@ const deleteViewSchema = Yup.object().shape({
});
const DeleteViewForm = ({ handleClose }) => {
- const [queuedForClose, setQueuedForClose ] = useState(false);
+ const [queuedForClose, setQueuedForClose] = useState(false);
const viewsLoading = useSelector(selectViewsLoading);
const selectedView = useSelector(selectSelectedView);
const dispatch = useDispatch();
@@ -30,21 +25,20 @@ const DeleteViewForm = ({ handleClose }) => {
// TODO: extract into hook?
useEffect(() => {
if (queuedForClose && !viewsLoading.isLoading) handleClose();
- }, [queuedForClose, viewsLoading.isLoading, handleClose])
+ }, [queuedForClose, viewsLoading.isLoading, handleClose]);
const handleDeleteViewSubmit = (values) => {
dispatch(editView('delete', values));
setQueuedForClose(true);
};
-
return (
- {viewsLoading.isLoading &&
+ {viewsLoading.isLoading && (
- }
+ )}
{
{() => (