Allow an Alert to be non-dismissible and use it in DomainList

Also improved DomainList tests.

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>

src/components/common/Alert.tsx

@@ -8,7 +8,7 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React, { FunctionComponent } from "react";
+import React from "react";
 
 export type AlertType = "info" | "success" | "danger";
 
@@ -16,23 +16,27 @@ export interface AlertProps {
   type: AlertType;
   onClick: () => void;
   message: string;
+  dismissible: boolean;
 }
 
-const Alert: FunctionComponent<AlertProps> = (props: AlertProps) => {
+const Alert = (props: AlertProps) => {
+  const dismissClass = props.dismissible ? "alert-dismissible" : "";
+
   return (
-    <div
-      className={"alert alert-" + props.type + " alert-dismissible fade show"}
-    >
-      <button type="button" className="close" onClick={props.onClick}>
-        &times;
-      </button>
+    <div className={`alert alert-${props.type} ${dismissClass} fade show`}>
+      {props.dismissible ? (
+        <button type="button" className="close" onClick={props.onClick}>
+          &times;
+        </button>
+      ) : null}
       {props.message}
     </div>
   );
 };
 
 Alert.defaultProps = {
-  onClick: () => {}
+  onClick: () => {},
+  dismissible: true
 };
 
 export default Alert;

src/components/list/DomainList.tsx

@@ -12,6 +12,7 @@ import React from "react";
 import { WithNamespaces, withNamespaces } from "react-i18next";
 import api from "../../util/api";
 import { Button } from "reactstrap";
+import Alert from "../common/Alert";
 
 export interface DomainListProps extends WithNamespaces {
   domains: string[];
@@ -54,9 +55,11 @@ const DomainList = ({ domains, onRemove, t }: DomainListProps) => {
     body = domains.map(mapDomainsToListItems);
   } else {
     body = (
-      <div className="alert alert-info" role="alert">
-        {t("There are no domains in this list")}
-      </div>
+      <Alert
+        type="info"
+        message={t("There are no domains in this list")}
+        dismissible={false}
+      />
     );
   }
 

src/components/list/__tests__/DomainList.test.tsx

@@ -12,6 +12,7 @@ import React from "react";
 import { shallow } from "enzyme";
 import DomainList from "../DomainList";
 import api from "../../../util/api";
+import Alert from "../../common/Alert";
 
 const domains = ["domain1.com", "domain2.com", "domain3.com"];
 
@@ -26,9 +27,11 @@ it("shows a list of domains", () => {
 it("shows an alert if there are no domains", () => {
   const wrapper = shallow(<DomainList domains={[]} onRemove={jest.fn()} />);
 
-  expect(wrapper.find("li")).toHaveLength(0);
-  expect(wrapper.find("ul").childAt(0)).toHaveClassName("alert-info");
-  expect(wrapper).toIncludeText("There are no domains in this list");
+  expect(wrapper.find("li")).not.toExist();
+  expect(wrapper.find(Alert)).toExist();
+  expect(wrapper.find(Alert).props().message).toEqual(
+    "There are no domains in this list"
+  );
 });
 
 it("does not have a delete button when not logged in", () => {
@@ -36,12 +39,7 @@ it("does not have a delete button when not logged in", () => {
     <DomainList domains={domains} onRemove={jest.fn()} />
   );
 
-  expect(
-    wrapper
-      .find("ul")
-      .childAt(0)
-      .find("button")
-  ).not.toExist();
+  expect(wrapper.find("Button")).not.toExist();
 });
 
 it("has a delete button when logged in", () => {