added toggler to disable box

src/components/box/Box.tsx

@@ -31,6 +31,7 @@ import { openConfirmModal } from '../../helpers/modal';
 import { copyObject, isEqual } from '../../helpers/object';
 import { DictionaryEntity } from '../../models/Dictionary';
 import '../../styles/box.scss';
+import '../../styles/toggler.scss';
 
 interface Props {
 	box: BoxEntity;
@@ -61,6 +62,7 @@ const Box = (
 		'box',
 		isBoxActive ? 'active' : null,
 		isHidden ? 'hidden' : null,
+		box.spec.disabled ? 'disabled' : null,
 	);
 
 	React.useEffect(() => {
@@ -132,6 +134,22 @@ const Box = (
 	const splitedImageName = imageName.split('/');
 	const slicedImageName = splitedImageName.slice(-(splitedImageName.length - 1)).join('/');
 
+	const toggleDisabled = () => {
+		const copyBox = copyObject(box);
+		if (box.spec.disabled) {
+			copyBox.spec.disabled = undefined;
+		} else {
+			copyBox.spec.disabled = true;
+		}
+		const temp = schemasStore.boxes
+			.map((value, index) => {
+				return { value, index };
+			})
+			.find(b => b.value.name === copyBox.name);
+		if (temp) schemasStore.boxes[temp.index].spec.disabled = copyBox.spec.disabled;
+		schemasStore.saveEntityChanges(copyBox, 'update');
+	};
+
 	return (
 		<>
 			<div
@@ -159,6 +177,12 @@ const Box = (
 					)}
 					<span className='box__title'>{box.name}</span>
 					<div className='box__buttons-wrapper'>
+						<div className='toggler'>
+							<div
+								className={`toggler__bar ${box.spec.disabled ? 'off' : 'on'}`}
+								onClick={toggleDisabled}
+							/>
+						</div>
 						<button className='box__button filter' onClick={filterRelatedBoxes}>
 							<i className='box__button-icon' />
 						</button>

src/components/box/BoxSettings.tsx

@@ -171,10 +171,6 @@ const BoxSettings = ({ box, onClose, setEditablePin, setEditableDictionary }: Bo
 		savePins(pinsList);
 	}, [pinsList]);
 
-	useEffect(() => {
-		saveConfig(boxConfigInput.value);
-	}, [boxConfigInput.value]);
-
 	useOutsideClickListener(modalRef, (e: MouseEvent) => {
 		if (
 			!e
@@ -251,6 +247,7 @@ const BoxSettings = ({ box, onClose, setEditablePin, setEditableDictionary }: Bo
 	};
 
 	const submit = async () => {
+		saveConfig(boxConfigInput.value);
 		if (
 			[
 				imageNameInput,

src/models/Box.ts

@@ -19,6 +19,7 @@ import { DictionaryRelation } from './Dictionary';
 
 export interface BoxEntity extends FileBase {
 	spec: {
+		['disabled']?: true | undefined;
 		['custom-config']?: {
 			[prop: string]: string;
 		};

src/store/SchemasStore.ts

@@ -394,23 +394,13 @@ export default class SchemasStore {
 		entity: BoxEntity | LinksDefinition | DictionaryLinksEntity | DictionaryEntity,
 		operation: 'add' | 'update' | 'remove',
 	) => {
-		if (
-			!this.preparedRequests.some(
-				request =>
-					request.payload.name === entity.name &&
-					request.operation === operation &&
-					!hasChanges(request.payload, entity),
-			)
-		) {
-			this.preparedRequests.push({
+		this.preparedRequests = [
+			...this.preparedRequests.filter(req => req.payload.name !== entity.name),
+			{
 				operation,
 				payload: entity,
-			});
-		}
-
-		function hasChanges<T extends object>(obj1: T, obj2: T) {
-			return Object.keys(diff(obj1, obj2)).length > 0;
-		}
+			},
+		];
 	};
 
 	@action

src/styles/box.scss

@@ -40,8 +40,11 @@
 		filter: blur(0.5px);
 	}
 
+	&.disabled {
+		opacity: 0.5;
+	}
+
 	&__header {
-		min-height: 25px;
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
@@ -125,6 +128,7 @@
 	}
 
 	&__buttons-wrapper {
+		min-height: 25px;
 		margin-left: auto;
 		display: flex;
 		gap: 7.5px;

src/styles/group.scss

@@ -70,7 +70,8 @@
 
 		display: flex;
 		flex-direction: column;
-		overflow-y: scroll;
+		overflow-y: auto;
+		overflow-x: hidden;
 		padding: 0 10px;
 		padding-bottom: 12px;
 	}

src/styles/toggler.scss

@@ -0,0 +1,60 @@
+/******************************************************************************
+ * Copyright 2020-2020 Exactpro (Exactpro Systems Limited)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+ @import './common/vars';
+
+
+ .toggler {
+     display: flex;
+     align-items: center;
+
+     &__bar {
+         cursor: pointer;
+         position: relative;
+         box-sizing: border-box;
+         width: 20px;
+         height: 10px;
+         margin: 0 2px;
+         border: solid transparent 1px;
+         border-radius: 6px;
+         &:before {
+             position: absolute;
+             content: '';
+             width: 8px;
+             height: 8px;
+             border-radius: 50%;
+             background-color: #7a99b8;
+             top: 50%;
+             transform: translateY(-50%);
+             transition: left ease-in-out 240ms;
+         }
+     }
+     .on {
+        background-color: white;
+         &:before {
+             left: calc(100% - 9px);
+         }
+     }
+     .off {
+        background-color: #617a93;
+        opacity: 0.9;
+         &:before {
+            background-color: white;
+            opacity: 0.5;
+            left: 1px;
+         }
+     }
+ }