Changed Icons endpoint for prod environment

src/app/components/IconsList/IconsList.tsx

@@ -3,6 +3,7 @@ import { useAppDispatch } from "../../hooks"
 import { notify } from "../../store"
 import { Pagination, Search } from ".."
 import Helper from "../../utils/helper"
+import { ICON_ROOT } from "../../config/constants"
 import "./IconsList.component.scss"
 
 interface IconsListProps {
@@ -22,7 +23,7 @@ const IconTile = (props: IconTileProps): JSX.Element => {
     <span
       className="ar-IconTile d-inline-block mx-2 mb-3 border"
       onClick={() => {
-        const iconLink = `http://localhost:8080/icon/${icon.group}/${icon.name}`
+        const iconLink = `${ICON_ROOT}/${icon.group}/${icon.name}`
         navigator.clipboard.writeText(iconLink)
         onClick && onClick(icon)
       }}

src/app/components/atoms/Alert/Alert.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react"
 import Icon from "../Icon"
+import API_CONFIG from "../../../config/api-config"
 import "./Alert.component.scss"
+import { ICON_ROOT } from "../../../config/constants"
 
 type AlertType = "success" | "warning" | "error" | "information"
 export interface AlertProps {
@@ -53,6 +55,7 @@ const Alert = (props: AlertProps): JSX.Element => {
     default:
       icon = "vsc/VscInfo"
   }
+
   return (
     <div
       className={`ar-Alert position-fixed d-flex ${position || "top-center"}${
@@ -60,7 +63,7 @@ const Alert = (props: AlertProps): JSX.Element => {
       } ${type || "information"}${showClass ? " " + showClass : ""}`}
     >
       <span className="ar-Alert__icon d-inline-block p-2">
-        <Icon src={`http://localhost:8080/icon/${icon}`} />
+        <Icon src={`${ICON_ROOT}/${icon}`} />
       </span>
       <span className="ar-Alert__text d-inline-block p-2 me-2">
         {message || "This is a dummy alert"}
@@ -74,7 +77,7 @@ const Alert = (props: AlertProps): JSX.Element => {
           }}
         >
           <Icon
-            src={`http://localhost:8080/icon/io5/IoClose${
+            src={`${ICON_ROOT}/io5/IoClose${
               type === "success" ? "/white" : ""
             }`}
           />

src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx

@@ -1,5 +1,6 @@
 import { Alert, Icon } from "../.."
 import Helper from "../../../utils/helper"
+import { ICON_ROOT } from "../../../config/constants"
 import "./BrowserIncompatibility.component.scss"
 
 interface BrowserIncompatibilityProps {
@@ -11,7 +12,7 @@ const BrowserIncompatibility = (
   props: BrowserIncompatibilityProps,
 ): JSX.Element => {
   const { applicationName, moreLink } = props
-  const demoDummyLink = "http://localhost:3000/armco-design-system/docs/devices"
+  const demoDummyLink = "http://notabuck.com/armco-design-system/docs/devices"
   const demoAppName = '"My Awesome App"'
   const helpLink = moreLink || demoDummyLink
   const app = applicationName || demoAppName
@@ -19,7 +20,7 @@ const BrowserIncompatibility = (
   return (
     <div className="ar-BrowserIncompatibility p-3 flex-center flex-column">
       <Icon
-        src={`http://localhost:8080/icon/vsc/VscRunErrors/black/10rem${heroIconSize}`}
+        src={`${ICON_ROOT}/vsc/VscRunErrors/black/10rem${heroIconSize}`}
         size={heroIconSize}
         containerClasses="mb-3"
       />

src/app/components/atoms/Button/Button.tsx

@@ -1,6 +1,7 @@
 import { MouseEventHandler } from "react"
-import "./Button.component.scss"
 import Icon from "../Icon"
+import { ICON_ROOT } from "../../../config/constants"
+import "./Button.component.scss"
 
 interface ButtonProps {
   classes?: string
@@ -22,7 +23,7 @@ const Button = (props: ButtonProps) => {
     >
       {icon && (
         <span className="ar-Button__icon">
-          <Icon src={`http://localhost:8080/icon/${icon}/white`} />
+          <Icon src={`${ICON_ROOT}/${icon}/white`} />
         </span>
       )}
       {content || "Button"}

src/app/components/atoms/Icon/Icon.tsx

@@ -1,4 +1,5 @@
 import { MouseEventHandler } from "react"
+import { ICON_ROOT } from "../../../config/constants"
 import "./Icon.component.scss"
 
 interface IconProps {
@@ -36,13 +37,13 @@ const Icon = (props: IconProps): JSX.Element | null => {
   if (src) {
     let srcPart = src
     if (src.startsWith("http")) {
-      if (src.indexOf("http://localhost:8080/icon") > -1) {
-        srcPart = src.substring("http://localhost:8080/icon/".length)
+      if (src.indexOf(ICON_ROOT) > -1) {
+        srcPart = src.substring(`${ICON_ROOT}/`.length)
       } else {
         console.error(
           "Malformed source provided, format should be <source>/<icon-name",
         )
-        qualifiedSrc = "http://localhost:8080/icon/tb/TbError404"
+        qualifiedSrc = `${ICON_ROOT}/tb/TbError404`
       }
     }
     const iconInfo = srcPart.split("/")
@@ -50,7 +51,7 @@ const Icon = (props: IconProps): JSX.Element | null => {
       console.error(
         "Malformed source provided, format should be <source>/<icon-name",
       )
-      qualifiedSrc = "http://localhost:8080/icon/tb/TbError404"
+      qualifiedSrc = `${ICON_ROOT}/tb/TbError404`
     } else {
       if (iconInfo[2]) {
         inferredColor = iconInfo[2]
@@ -58,13 +59,13 @@ const Icon = (props: IconProps): JSX.Element | null => {
       if (iconInfo[3]) {
         inferredSize = iconInfo[3]
       }
-      qualifiedSrc = "http://localhost:8080/icon/" + srcPart
+      qualifiedSrc = `${ICON_ROOT}/` + srcPart
     }
   } else {
-    qualifiedSrc = "http://localhost:8080/icon/tb/TbError404"
+    qualifiedSrc = `${ICON_ROOT}/tb/TbError404`
   }
 
-  const demoDummyIconSrc = "http://localhost:8080/icon/si/SiHappycow"
+  const demoDummyIconSrc = `${ICON_ROOT}/si/SiHappycow`
   qualifiedSrc = !src ? (demo ? demoDummyIconSrc : qualifiedSrc) : qualifiedSrc
   let appendables = ""
   appendables += !inferredColor

src/app/components/atoms/TreeList/TreeList.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react"
 import { Icon, Search } from "../.."
+import { ICON_ROOT } from "../../../config/constants"
 import "./TreeList.component.scss"
 
 interface TreeListProps {
@@ -88,8 +89,8 @@ const TreeListItem = (props: TreeListItemProps): JSX.Element => {
       >
         {children ? (
           <Icon
+            src={`${ICON_ROOT}/md/MdKeyboardArrowRight`}
             containerClasses={`me-1${iconHovered ? " hover-highlight" : ""}`}
-            src="http://localhost:8080/icon/md/MdKeyboardArrowRight"
             onMouseEnter={() => setIconHovered(true)}
             onMouseLeave={() => setIconHovered(false)}
             onClick={(e) => {

src/app/components/molecules/Search/Search.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, useState } from "react"
 import { Button, Icon, TextInput } from "../.."
 import Helper from "../../../utils/helper"
+import { ICON_ROOT } from "../../../config/constants"
 import "./Search.component.scss"
 
 interface BaseSearchProps {
@@ -72,7 +73,7 @@ const Search = (props: SearchProps): JSX.Element => {
         type="text"
       />
       <Button
-        content={<Icon src="http://localhost:8080/icon/ai/AiOutlineSearch" />}
+        content={<Icon src={`${ICON_ROOT}/ai/AiOutlineSearch`} />}
         classes={`search-button bg-transparent form-component${
           focusClass ? " border-bottom-0" : ""
         }`}

src/app/config/api-config.ts

@@ -5,7 +5,7 @@ const API_CONFIG: ApiConfig = {
   },
   STATIC_HOST: {
     development: "http://localhost:8080",
-    production: "https://armco.tech/api/static",
+    production: "https://static.armco.tech",
   },
 }
 

src/app/config/constants.ts

@@ -1 +1,5 @@
-export const ICON_ROOT="http://localhost:8080/icon"
+import API_CONFIG from "./api-config"
+
+export const ICON_ROOT = `${
+  API_CONFIG.STATIC_HOST[process.env.NODE_ENV as "production" | "development"]
+}/icon`