Add storybook and tests ICSHWI-9199

This merge requests adds Storybook (https://storybook.js.org/) to our application.

Storybook provides a way for us to visually document our components and the various states they can be in. This is very helpful when discussing visual changes. It also provides a method for us to set up components for testing.

In this merge request:

• Dependencies and configuration are added for storybook
• Storybook stories are added for the table components in our application
• Cypress component tests are added which make use of the table component stories
• Gitlab-CI is updated to build the storybook static web page and store it as an artifact

To check out the storybook, you can download and extract the artifact from the "build-storybook" job in the pipeline and open index.html. You should see something like this:

src/components/IOC/IOCTable.spec.js

+import React from "react";
+import { mount } from "@cypress/react";
+import { composeStories } from "@storybook/testing-react";
+import * as stories from "./IOCTable.stories";
+
+const {AfterAsync} = composeStories(stories)
+const textColumns = ["IOC Name", "Host", "Network", "Owner", "Git reference"];
+const columns = ["Status"].concat(textColumns);
+const firstRowData = ["Active", "VacS-RFQ:SC-IOC-130", "vacs-accv-vm-ioc", "ChannelAccess-FEB", "krisztianloki", "1.0.0"]
+
+
+describe("HostTable", () => {
+  context("Populated Table", () => {
+    beforeEach(() => {
+      mount(<AfterAsync />)
+    })
+
+    it ("Has the correct columns", () => {
+      cy.get(".p-column-title").each(($el, index) => {
+        console.log(index, columns[index]);
+        cy.wrap($el).contains(columns[index], {matchCase: false});
+      })
+    })
+    
+    it ("Truncates all text content", () => {
+      cy.get("tbody > tr").first()
+        .find(".MuiTypography-noWrap")
+        .should("have.length", textColumns.length)
+    })
+
+    it ("Displays correct content in first row", () => {
+      cy.get("tbody > tr").first()
+        .find("td")
+        .each(($el, index) => {
+          if (index === 0) {
+            const iconTitle = firstRowData[index]
+            cy.wrap($el).find(`svg[title=${iconTitle}]`)
+          }
+          else {
+            cy.wrap($el).find("p").should($el => {
+              const text = $el.text().trim().toLowerCase()
+              const expected = firstRowData[index].trim().toLowerCase()
+              cy.expect(text).to.equal(expected);
+            })
+          }
+        })
+    })
+  })
+})