feat: auto deploy storybook to github pages

.github/workflows/deploy.yml

@@ -0,0 +1,23 @@
+on:
+  push:
+    branches:
+      - "master" 
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.build-publish.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+    - id: build-publish
+      uses: bitovi/[email protected]
+      with:
+        path: storybook-static
+        install_command: yarn install
+        build_command: yarn build-storybook

README.md

@@ -1,10 +1,12 @@
 # EDC - device catalog search
 
-### Note
+## Note
 
-- Add a new file in the [`/src/devices/`](/src/devices/) folder with the version number. You can generate the export file using [_export_devices_csv.py_](https://github.ibm.com/omnio/omnio_server/blob/master/omnio_db/management/commands/export_devices_csv.py) management command.
+- Add or update a file in the [`/src/devices/`](src/devices/) folder with the specific version number. You can generate the export file using [_export_devices_csv.py_](https://github.ibm.com/omnio/omnio_server/blob/master/omnio_db/management/commands/export_devices_csv.py) management command.
+- Add a link to the newly added file in [`src/constants/globalContants.js`](src/constants/globalContants.js#L5)
+- Push the code changes to github. This repositary auto deploys the storybook changes into [`https://ibm-watson-iot.github.io/maximo-asset-monitor-device-library-search`](https://ibm-watson-iot.github.io/maximo-asset-monitor-device-library-search/)
 
-### Prerequisites
+## Prerequisites
 
 - [Node.js](https://nodejs.org/en/download/) - the required version is specified in the [`.nvmrc`](/.nvmrc)
   - If you're on macOS or using WSL on Windows, we recommend using [`nvm`](https://github.com/nvm-sh/nvm) as your version manager for Node.
@@ -13,14 +15,14 @@
 
 You'll also need a code editor to make changes. There are many to choose from but we suggest to use [VSCode](https://code.visualstudio.com/).
 
-### Install dependencies
+## Install dependencies
 
 ```bash
 # install the dependencies
 yarn install
 ```
 
-### Build and start the development server
+## Build and start the development server
 
 ```bash
 # run the server
@@ -29,7 +31,7 @@ yarn start
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-### Adding a dependency
+## Adding a dependency
 
 ```bash
 # To add dependencies to the project

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "edc-device-catalog-search",
+  "name": "edc-device-library-search",
   "version": "9.0.0",
   "private": true,
-  "homepage": "https://github.ibm.com/omnio/edgeconfig-device-search.git",
+  "homepage": "https://github.com/ibm-watson-iot/maximo-asset-monitor-device-library-search.git",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -66,4 +66,4 @@
     "typescript": "^5.4.5",
     "web-vitals": "^3.5.2"
   }
-}
+}

src/Search.jsx

@@ -2,24 +2,16 @@ import { StatefulTable, Tag, Link, Dropdown } from "carbon-addons-iot-react";
 
 import Papa from "papaparse";
 import { useMemo, useEffect, useState } from "react";
-import csvFile9_0_X from "./devices/9.0.x.csv";
-import csvFile8_11_X from "./devices/8.11.x.csv";
 
 import "carbon-addons-iot-react/css/carbon-addons-iot-react.css";
-import { MANUFACTURER, VERSIONS } from "./constants/globalContants";
+import {
+  MANUFACTURER,
+  PROTOCOLS_TAG_COLOR,
+  SLACK_CONTACT_LINK,
+  VERSIONS,
+} from "./constants/globalContants";
 import ManufacturerCell from "./components/ManufacturerCell";
 
-const SLACK_CONTACT_LINK = "https://ibm-ai-apps.slack.com/archives/CA60S5T88";
-
-const PROTOCOLS_TAG_COLOR = {
-  modbus: "green",
-  "ethernet-ip": "teal",
-  "S7 PLC": "blue",
-  bacnet: "magenta",
-  MTConnect: "purple",
-  "json-over-http": "cool-grey",
-};
-
 const renderProtocolTags = ({ value }) => {
   if (value) {
     const outputArray = [...new Set(value.split(" | "))];
@@ -91,19 +83,14 @@ const columns = [
   },
 ];
 
-const versionFileMap = {
-  "9.0.x": csvFile9_0_X,
-  "8.11.x": csvFile8_11_X,
-};
-
 export default function Search() {
   const [devices, setDevicesData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [version, setVersion] = useState(VERSIONS["9.0.x"]);
+  const [version, setVersion] = useState(Object.keys(VERSIONS)[0]);
 
   useEffect(() => {
     async function fetchData() {
-      await Papa.parse(versionFileMap[version], {
+      await Papa.parse(VERSIONS[version], {
         download: true,
         header: true,
         skipEmptyLines: true,
@@ -147,7 +134,7 @@ export default function Search() {
     <StatefulTable
       id="search-table"
       data-test="search-table"
-      secondaryTitle="Device library search"
+      secondaryTitle="Maximo Asset Monitor : Device library search"
       columns={columns}
       data={tabledata}
       actions={{
@@ -213,7 +200,7 @@ export default function Search() {
               onChange={({ selectedItem }) => {
                 setVersion(selectedItem);
               }}
-              items={Object.values(VERSIONS)}
+              items={Object.keys(VERSIONS)}
               initialSelectedItem={version}
             />
           ),