fix(ui): rewrite Accordion component

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",

ui/src/Components/Accordion/index.test.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import { Accordion } from ".";
+
+describe("<Accordion />", () => {
+  it("doesn't render content by default", () => {
+    const tree = mount(<Accordion text="title" content="content" />);
+    expect(tree.text()).toBe("title");
+  });
+
+  it("doesn't render content when defaultIsOpen=false", () => {
+    const tree = mount(
+      <Accordion text="title" content="content" defaultIsOpen={false} />
+    );
+    expect(tree.text()).toBe("title");
+  });
+
+  it("renders content when defaultIsOpen=true", () => {
+    const tree = mount(
+      <Accordion text="title" content="content" defaultIsOpen={true} />
+    );
+    expect(tree.text()).toBe("titlecontent");
+  });
+
+  it("toggles content after header click", () => {
+    const tree = mount(<Accordion text="title" content="content" />);
+    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");
+  });
+});

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 }) => (
-  <Collapsible
-    triggerTagName="div"
-    transitionTime={50}
-    overflowWhenOpen="visible"
-    className="card"
-    openedClassName="card"
-    triggerClassName="card-header cursor-pointer border-bottom-0"
-    triggerOpenedClassName="card-header cursor-pointer"
-    contentOuterClassName="collapse show"
-    contentInnerClassName="card-body my-2"
-    {...extraProps}
-    trigger={<Trigger text={text} isOpen={false} />}
-    triggerWhenOpen={<Trigger text={text} isOpen={true} />}
-  >
-    {content}
-  </Collapsible>
-);
+  defaultIsOpen?: boolean;
+}> = ({ text, content, defaultIsOpen }) => {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen || false);
+
+  return (
+    <div className="accordion card">
+      <div
+        className={`card-header cursor-pointer ${isOpen ? "active" : ""}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Trigger text={text} isOpen={isOpen} />
+      </div>
+      <div className={isOpen ? "card-body my-2" : ""}>{isOpen && content}</div>
+    </div>
+  );
+};
 
 export { Accordion };