diff --git a/ui/package-lock.json b/ui/package-lock.json
index 5c90ccc7e..0adddffbc 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -18818,11 +18818,6 @@
"@babel/runtime": "^7.0.0"
}
},
- "react-collapsible": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.8.0.tgz",
- "integrity": "sha512-QTxGyp4iL8N57FcU1RGt4wD7vqOTRYAHNukxtSeVMkZ+/d1WNWXRIakzhYhC/5TDERihPdp1IvKIJlrLLPyQ/A=="
- },
"react-datepicker": {
"version": "2.16.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.16.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index c585adbce..92722989e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -39,7 +39,6 @@
"react": "16.13.1",
"react-app-polyfill": "1.0.6",
"react-autosuggest": "10.0.2",
- "react-collapsible": "2.8.0",
"react-datepicker": "2.16.0",
"react-dom": "16.13.1",
"react-highlighter": "0.4.3",
diff --git a/ui/src/Components/Accordion/index.test.js b/ui/src/Components/Accordion/index.test.js
new file mode 100644
index 000000000..6076ed28f
--- /dev/null
+++ b/ui/src/Components/Accordion/index.test.js
@@ -0,0 +1,37 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import { Accordion } from ".";
+
+describe("", () => {
+ it("doesn't render content by default", () => {
+ const tree = mount();
+ expect(tree.text()).toBe("title");
+ });
+
+ it("doesn't render content when defaultIsOpen=false", () => {
+ const tree = mount(
+
+ );
+ expect(tree.text()).toBe("title");
+ });
+
+ it("renders content when defaultIsOpen=true", () => {
+ const tree = mount(
+
+ );
+ expect(tree.text()).toBe("titlecontent");
+ });
+
+ it("toggles content after header click", () => {
+ const tree = mount();
+ expect(tree.text()).toBe("title");
+
+ tree.find("div.card-header").simulate("click");
+ expect(tree.text()).toBe("titlecontent");
+
+ tree.find("div.card-header").simulate("click");
+ expect(tree.text()).toBe("title");
+ });
+});
diff --git a/ui/src/Components/Accordion/index.tsx b/ui/src/Components/Accordion/index.tsx
index 0152f5453..4d3913d84 100644
--- a/ui/src/Components/Accordion/index.tsx
+++ b/ui/src/Components/Accordion/index.tsx
@@ -1,6 +1,4 @@
-import React, { FunctionComponent, ReactNode } from "react";
-
-import Collapsible from "react-collapsible";
+import React, { FunctionComponent, ReactNode, useState } from "react";
import { ToggleIcon } from "Components/ToggleIcon";
@@ -19,24 +17,21 @@ const Trigger: FunctionComponent<{ text: string; isOpen: boolean }> = ({
const Accordion: FunctionComponent<{
text: string;
content: ReactNode;
- extraProps?: object;
-}> = ({ text, content, extraProps }) => (
- }
- triggerWhenOpen={}
- >
- {content}
-
-);
+ defaultIsOpen?: boolean;
+}> = ({ text, content, defaultIsOpen }) => {
+ const [isOpen, setIsOpen] = useState(defaultIsOpen || false);
+
+ return (
+
+
setIsOpen(!isOpen)}
+ >
+
+
+
{isOpen && content}
+
+ );
+};
export { Accordion };
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
index 4f6adf74c..e828cbb84 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
@@ -3,8 +3,8 @@
exports[` matches snapshot 1`] = `
"