feat(ui): allow disabling animations

ui/src/Components/MainModal/Configuration/AnimationsConfiguration.test.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { Settings } from "Stores/Settings";
+import { AnimationsConfiguration } from "./AnimationsConfiguration";
+
+let settingsStore: Settings;
+beforeEach(() => {
+  settingsStore = new Settings(null);
+});
+
+const FakeConfiguration = () => {
+  return mount(<AnimationsConfiguration settingsStore={settingsStore} />);
+};
+
+describe("<AnimationsConfiguration />", () => {
+  it("matches snapshot with default values", () => {
+    const tree = FakeConfiguration();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("animations is 'true' by default", () => {
+    expect(settingsStore.themeConfig.config.animations).toBe(true);
+  });
+
+  it("unchecking the checkbox sets stored animations value to 'false'", (done) => {
+    const tree = FakeConfiguration();
+    const checkbox = tree.find("#configuration-animations");
+
+    settingsStore.themeConfig.setAnimations(true);
+    expect(settingsStore.themeConfig.config.animations).toBe(true);
+    checkbox.simulate("change", { target: { checked: false } });
+    setTimeout(() => {
+      expect(settingsStore.themeConfig.config.animations).toBe(false);
+      done();
+    }, 200);
+  });
+
+  it("checking the checkbox sets stored animations value to 'true'", (done) => {
+    const tree = FakeConfiguration();
+    const checkbox = tree.find("#configuration-animations");
+
+    settingsStore.themeConfig.setAnimations(false);
+    expect(settingsStore.themeConfig.config.animations).toBe(false);
+    checkbox.simulate("change", { target: { checked: true } });
+    setTimeout(() => {
+      expect(settingsStore.themeConfig.config.animations).toBe(true);
+      done();
+    }, 200);
+  });
+});

ui/src/Components/MainModal/Configuration/AnimationsConfiguration.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+
+import { observer } from "mobx-react-lite";
+
+import { Settings } from "Stores/Settings";
+
+const AnimationsConfiguration: FC<{
+  settingsStore: Settings;
+}> = observer(({ settingsStore }) => {
+  const onChange = (value: boolean) => {
+    settingsStore.themeConfig.setAnimations(value);
+  };
+
+  return (
+    <div className="form-group mb-0">
+      <div className="form-check form-check-inline">
+        <span className="custom-control custom-switch">
+          <input
+            id="configuration-animations"
+            className="custom-control-input"
+            type="checkbox"
+            value=""
+            checked={settingsStore.themeConfig.config.animations || false}
+            onChange={(event) => onChange(event.target.checked)}
+          />
+          <label
+            className="custom-control-label cursor-pointer mr-3"
+            htmlFor="configuration-animations"
+          >
+            Enable animations
+          </label>
+        </span>
+      </div>
+    </div>
+  );
+});
+
+export { AnimationsConfiguration };

ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AnimationsConfiguration /> matches snapshot with default values 1`] = `
+"
+<div class=\\"form-group mb-0\\">
+  <div class=\\"form-check form-check-inline\\">
+    <span class=\\"custom-control custom-switch\\">
+      <input id=\\"configuration-animations\\"
+             class=\\"custom-control-input\\"
+             type=\\"checkbox\\"
+             value
+             checked
+      >
+      <label class=\\"custom-control-label cursor-pointer mr-3\\"
+             for=\\"configuration-animations\\"
+      >
+        Enable animations
+      </label>
+    </span>
+  </div>
+</div>
+"
+`;

ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap

@@ -206,6 +206,23 @@ exports[`<Configuration /> matches snapshot 1`] = `
           </span>
         </div>
       </div>
+      <div class=\\"form-group mb-0\\">
+        <div class=\\"form-check form-check-inline\\">
+          <span class=\\"custom-control custom-switch\\">
+            <input id=\\"configuration-animations\\"
+                   class=\\"custom-control-input\\"
+                   type=\\"checkbox\\"
+                   value
+                   checked
+            >
+            <label class=\\"custom-control-label cursor-pointer mr-3\\"
+                   for=\\"configuration-animations\\"
+            >
+              Enable animations
+            </label>
+          </span>
+        </div>
+      </div>
     </div>
   </div>
   <div class=\\"accordion card\\">

ui/src/Components/MainModal/Configuration/index.tsx

@@ -11,6 +11,7 @@ import { AlertGroupCollapseConfiguration } from "./AlertGroupCollapseConfigurati
 import { AlertGroupTitleBarColor } from "./AlertGroupTitleBarColor";
 import { ThemeConfiguration } from "./ThemeConfiguration";
 import { MultiGridConfiguration } from "./MultiGridConfiguration";
+import { AnimationsConfiguration } from "./AnimationsConfiguration";
 
 const Configuration: FC<{
   settingsStore: Settings;
@@ -33,6 +34,7 @@ const Configuration: FC<{
         <React.Fragment>
           <ThemeConfiguration settingsStore={settingsStore} />
           <AlertGroupTitleBarColor settingsStore={settingsStore} />
+          <AnimationsConfiguration settingsStore={settingsStore} />
         </React.Fragment>
       }
       defaultIsOpen={defaultIsOpen}