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/mocks/mockAPI.js

@@ -21,7 +21,7 @@ export function mockAPI() {
   cy.intercept("GET", /.*\/deployments\/\d+/, getDeployment).as("getDeployment")
   cy.intercept("GET", /.*\/deployments\/jobs\/\d+/, getDeploymentJob).as("getDeploymentJob")
   cy.intercept("GET", /.*\/deployments\/jobs\/\d+\/log/, auth(getDeploymentJobLog)).as("getDeploymentJobLog")
-  
+
   // commands
   cy.intercept("GET", /.*\/deployments\/commands/, getCommandList).as("getCommandList")
 
@@ -33,11 +33,13 @@ export function mockAPI() {
 }
 
 function getParameters(req, pattern) {
-  const match = matchPath({
-    path: "/api/v1" + pattern,
-    exact: true,
-    strict: false
-  }, new URL(req.url).pathname);
+  const match = matchPath(
+    new URL(req.url).pathname,
+    {
+      path: "/api/v1" + pattern,
+      exact: true,
+      strict: false
+    });
   return match?.params;
 }
 
@@ -58,7 +60,7 @@ function isLoggedIn(req) {
 }
 
 function auth(routeHandler) {
-  return function(req) {
+  return function (req) {
     if (isLoggedIn(req)) {
       routeHandler(req);
     }
@@ -84,7 +86,7 @@ function userInfo(req) {
 }
 
 function renew(req) {
-  req.reply({token: "FADEDEAD"});
+  req.reply({ token: "FADEDEAD" });
 }
 
 function listIOCs(req) {
@@ -96,7 +98,7 @@ function getIOC(req) {
   const params = getParameters(req, "/iocs/:id")
   const data = require("./fixtures/IOCDetails.json")
   const d = data.find(x => x.id === parseInt(params.id));
-  const response = d ? d : {statusCode: 404};
+  const response = d ? d : { statusCode: 404 };
   req.reply(response);
 }
 
@@ -104,7 +106,7 @@ function getDeployment(req) {
   const params = getParameters(req, "/deployments/:id")
   const data = require("./fixtures/DeploymentInfoDetails.json");
   const d = data.find(x => x.id === parseInt(params.id));
-  const response = d ? d : {statusCode: 404};
+  const response = d ? d : { statusCode: 404 };
   req.reply(response);
 }
 
@@ -112,7 +114,7 @@ function getDeploymentJob(req) {
   const params = getParameters(req, "/deployments/jobs/:id");
   const data = require("./fixtures/AwxJobDetails.json");
   const d = data.find(x => x.id === parseInt(params.id));
-  const response = d ? d : {statusCode: 404};
+  const response = d ? d : { statusCode: 404 };
   req.reply(response);
 }
 
@@ -122,7 +124,7 @@ function getDeploymentJobLog(req) {
   const index = jobDetailsData.findIndex(x => x.id === parseInt(params.id))
   const logData = require("./fixtures/AwxJobLog.json");
   const d = logData[index];
-  const response = d ? d : {statusCode: 404};
+  const response = d ? d : { statusCode: 404 };
   req.reply(response);
 }
 
@@ -135,7 +137,7 @@ function getCSEntryHostWithStatus(req) {
   const params = getParameters(req, "/hosts/with-status/:id")
   const data = require("./fixtures/CSEntryHostWithStatus.json");
   const d = data.find(x => x.csEntryHost.id === parseInt(params.id));
-  const response = d ? d : {statusCode: 404};
+  const response = d ? d : { statusCode: 404 };
   req.reply(response);
 }