[web] Extract If component to core namespace

web/src/components/core/If.jsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+/**
+ * Simple component for simplifying conditional rendering.
+ * @component
+ *
+ * Borrowed from the old  Michael J. Ryan’s comment at https://github.com/facebook/jsx/issues/65#issuecomment-255484351
+ * See more options at https://blog.logrocket.com/react-conditional-rendering-9-methods/
+ *
+ * @param {object} props
+ * @param {boolean} props.condition
+ * @param {JSX.Element} [props.then=null] - the content to be rendered when the condition is true
+ * @param {JSX.Element} [props.else=null] - the content to be rendered when the condition is false
+ */
+export default function If ({
+  condition,
+  then: positive = null,
+  else: negative = null
+}) {
+  return condition ? positive : negative;
+}

web/src/components/core/If.test.jsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen } from "@testing-library/react";
+import { plainRender } from "~/test-utils";
+import { If } from "~/components/core";
+
+describe("If", () => {
+  describe("when condition evaluates to true", () => {
+    describe("and 'then' prop was given", () => {
+      it("renders content given in 'then' prop", () => {
+        plainRender(<If condition={3 < 6} then="Hello World!" else="Goodbye World!" />);
+
+        screen.getByText("Hello World!");
+      });
+    });
+
+    describe("but 'then' prop was not given", () => {
+      it("renders nothing", () => {
+        const { container } = plainRender(<If condition={3 < 6} else="Goodbye World!" />);
+
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+  });
+
+  describe("when condition evaluates to false", () => {
+    describe("and 'else' prop was given", () => {
+      it("renders content given in 'then' prop", () => {
+        plainRender(<If condition={6 < 3} then="Hello World!" else="Goodbye World!" />);
+
+        screen.getByText("Goodbye World!");
+      });
+    });
+
+    describe("but 'else' prop was not given", () => {
+      it("renders nothing", () => {
+        const { container } = plainRender(<If condition={6 < 3} then="Hello World!" />);
+
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+  });
+});

web/src/components/core/index.js

@@ -25,6 +25,7 @@ export { default as Section } from "./Section";
 export { default as FormLabel } from "./FormLabel";
 export { default as Fieldset } from "./Fieldset";
 export { default as Em } from "./Em";
+export { default as If } from "./If";
 export { default as Installation } from "./Installation";
 export { default as InstallationFinished } from "./InstallationFinished";
 export { default as InstallationProgress } from "./InstallationProgress";

web/src/components/overview/UsersSection.jsx

@@ -20,28 +20,10 @@
  */
 
 import React, { useReducer, useEffect } from "react";
-import { Em, Section, SectionSkeleton } from "~/components/core";
+import { If, Em, Section, SectionSkeleton } from "~/components/core";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 
-/**
- * Internal component for simplifying conditional rendering.
- * @component
- *
- * Borrowed from the old  Michael J. Ryan’s comment at https://github.com/facebook/jsx/issues/65#issuecomment-255484351
- * See more options at https://blog.logrocket.com/react-conditional-rendering-9-methods/
- *
- * TODO: evaluate if it should be a core component or even if worth it using an specialized library
- *
- * @param {object} props
- * @param {boolean} props.condition
- * @param {JSX.Element} [props.then=null] - the content to be rendered when the condition is true
- * @param {JSX.Element} [props.else=null] - the content to be rendered when the condition is false
- */
-const If = ({ condition, then: positive = null, else: negative = null }) => {
-  return condition ? positive : negative;
-};
-
 const initialState = {
   busy: true,
   errors: [],