[fix] Fix the svg images imports across the app (#2929)

aimhubio · Jul 20, 2023 · 233737a · 233737a
1 parent aaae691
commit 233737a
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 52 deletions.
diff --git a/src/aimcore/web/ui/src/assets/logo.svg b/src/aimcore/web/ui/src/assets/logo.svg
diff --git a/src/aimcore/web/ui/src/components/IllustrationBlock/IllustrationBlock.tsx b/src/aimcore/web/ui/src/components/IllustrationBlock/IllustrationBlock.tsx
@@ -39,13 +39,7 @@ function IllustrationBlock({
       <div className='IllustrationBlock__container'>
         {showImage ? (
           <div className={`IllustrationBlock__${size}__img`}>
-            {image || (
-              <img
-                onLoad={onImgLoad}
-                src={Illustrations_List[type]}
-                alt='Illustration'
-              />
-            )}
+            {image || Illustrations_List[type]}
           </div>
         ) : null}
 

diff --git a/src/aimcore/web/ui/src/components/SideBar/SideBar.tsx b/src/aimcore/web/ui/src/components/SideBar/SideBar.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { IconBrandGithub, IconFileText } from '@tabler/icons-react';
 
-import logoImg from 'assets/logo.svg';
+import { ReactComponent as LogoImg } from 'assets/logo.svg';
 import { ReactComponent as DiscordIcon } from 'assets/icons/discord.svg';
 
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
@@ -53,7 +53,9 @@ function SideBar(): React.FunctionComponentElement<React.ReactNode> {
             isActive={(m, l) => false}
           >
             <SidebarLi>
-              <Box width={28} as='img' src={logoImg} alt='logo' />
+              <Box width={28} display='flex'>
+                <LogoImg />
+              </Box>
             </SidebarLi>
           </SidebarLink>
           <SidebarLiContainer className='ScrollBar__hidden'>

diff --git a/src/aimcore/web/ui/src/components/kit_v2/ControlsButton/ControlsButton.tsx b/src/aimcore/web/ui/src/components/kit_v2/ControlsButton/ControlsButton.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
-import ArrowDown from 'assets/icons/dropdown-arrow-down.svg';
-import ArrowUp from 'assets/icons/dropdown-arrow-up.svg';
-
-import Box from '../Box';
+import { ReactComponent as ArrowDown } from 'assets/icons/dropdown-arrow-down.svg';
+import { ReactComponent as ArrowUp } from 'assets/icons/dropdown-arrow-up.svg';
 
 import { IControlsButtonProps } from './ControlsButton.d';
 import {
@@ -112,7 +110,7 @@ const ControlsButton = React.forwardRef<
         ) : null}
         {
           <ArrowIcon rightIcon={!!rightIcon} size={size}>
-            <Box as='img' src={open ? ArrowUp : ArrowDown} />
+            {open ? <ArrowUp /> : <ArrowDown />}
           </ArrowIcon>
         }
         {rightIcon?.icon ? (

diff --git a/src/aimcore/web/ui/src/components/kit_v2/Select/Select.tsx b/src/aimcore/web/ui/src/components/kit_v2/Select/Select.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FixedSizeList as List } from 'react-window';
 
-import ArrowDown from 'assets/icons/dropdown-arrow-down.svg';
-import ArrowUp from 'assets/icons/dropdown-arrow-up.svg';
+import { ReactComponent as ArrowDown } from 'assets/icons/dropdown-arrow-down.svg';
+import { ReactComponent as ArrowUp } from 'assets/icons/dropdown-arrow-up.svg';
 
 import Popover from '../Popover';
 import Button from '../Button';
@@ -184,7 +184,7 @@ const Select = ({
                 disabled={disabled}
                 variant='outlined'
                 color='secondary'
-                rightIcon={<Box as='img' src={open ? ArrowUp : ArrowDown} />}
+                rightIcon={open ? <ArrowUp /> : <ArrowDown />}
                 {...triggerProps}
               >
                 <Text css={{ flex: '1' }} disabled={disabled}>

diff --git a/src/aimcore/web/ui/src/config/illustrationConfig/illustrationConfig.tsx b/src/aimcore/web/ui/src/config/illustrationConfig/illustrationConfig.tsx
@@ -1,7 +1,7 @@
-import emptyBookmarks from 'assets/illustrations/emptyBookmarks.svg';
-import emptySearch from 'assets/illustrations/emptySearch.svg';
-import exploreData from 'assets/illustrations/exploreData.svg';
-import wrongSearch from 'assets/illustrations/wrongSearch.svg';
+import { ReactComponent as EmptyBookmarks } from 'assets/illustrations/emptyBookmarks.svg';
+import { ReactComponent as EmptySearch } from 'assets/illustrations/emptySearch.svg';
+import { ReactComponent as ExploreData } from 'assets/illustrations/exploreData.svg';
+import { ReactComponent as WrongSearch } from 'assets/illustrations/wrongSearch.svg';
 
 import { DOCUMENTATIONS } from 'config/references';
 import { RequestStatusEnum } from 'config/enums/requestStatusEnum';
@@ -16,17 +16,17 @@ enum IllustrationsEnum {
   EmptyData = 'emptyData',
 }
 
-const Illustrations_List: { [key: string]: string } = {
-  [IllustrationsEnum.EmptyBookmarks]: emptyBookmarks,
-  [IllustrationsEnum.EmptySearch]: emptySearch,
-  [IllustrationsEnum.ExploreData]: exploreData,
-  [IllustrationsEnum.WrongSearch]: wrongSearch,
-  [IllustrationsEnum.EmptyData]: exploreData,
+const Illustrations_List: { [key: string]: React.ReactNode } = {
+  [IllustrationsEnum.EmptyBookmarks]: <EmptyBookmarks />,
+  [IllustrationsEnum.EmptySearch]: <EmptySearch />,
+  [IllustrationsEnum.ExploreData]: <ExploreData />,
+  [IllustrationsEnum.WrongSearch]: <WrongSearch />,
+  [IllustrationsEnum.EmptyData]: <EmptySearch />,
   // for base explorer statuses
-  [PipelineStatusEnum.Never_Executed]: exploreData,
-  [PipelineStatusEnum.Insufficient_Resources]: exploreData,
-  [PipelineStatusEnum.Empty]: emptySearch,
-  [PipelineStatusEnum.Failed]: wrongSearch,
+  [PipelineStatusEnum.Never_Executed]: <ExploreData />,
+  [PipelineStatusEnum.Insufficient_Resources]: <ExploreData />,
+  [PipelineStatusEnum.Empty]: <EmptySearch />,
+  [PipelineStatusEnum.Failed]: <WrongSearch />,
 };
 
 const Request_Illustrations = {

diff --git a/...b/ui/src/modules/BaseExplorer/components/Grouping/FacetGroupingItem/FacetGroupingItem.tsx b/...b/ui/src/modules/BaseExplorer/components/Grouping/FacetGroupingItem/FacetGroupingItem.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { IconGripVertical, IconX } from '@tabler/icons-react';
 import { Divider } from '@material-ui/core';
 
-import ArrowDown from 'assets/icons/dropdown-arrow-down.svg';
-import ArrowUp from 'assets/icons/dropdown-arrow-up.svg';
+import { ReactComponent as ArrowDown } from 'assets/icons/dropdown-arrow-down.svg';
+import { ReactComponent as ArrowUp } from 'assets/icons/dropdown-arrow-up.svg';
 
 import ErrorBoundary from 'components/ErrorBoundary';
 import {
@@ -232,7 +232,7 @@ function FacetGroupingItem({
                 variant='outlined'
                 css={{ '&:hover': {} }}
                 color='secondary'
-                rightIcon={<Box as='img' src={open ? ArrowUp : ArrowDown} />}
+                rightIcon={open ? <ArrowUp /> : <ArrowDown />}
               >
                 <Text>{`${group.fields.length || ''} selected field(s)`}</Text>
                 {group.fields.length > 0 && (

diff --git a/...eb/ui/src/modules/BaseExplorer/components/Grouping/GroupingPopover/useGroupingPopover.tsx b/...eb/ui/src/modules/BaseExplorer/components/Grouping/GroupingPopover/useGroupingPopover.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import { IconGripVertical, IconX } from '@tabler/icons-react';
 
-import ArrowDown from 'assets/icons/dropdown-arrow-down.svg';
-import ArrowUp from 'assets/icons/dropdown-arrow-up.svg';
+import { ReactComponent as ArrowDown } from 'assets/icons/dropdown-arrow-down.svg';
+import { ReactComponent as ArrowUp } from 'assets/icons/dropdown-arrow-up.svg';
 
 import {
   Box,
@@ -202,9 +202,7 @@ function useGroupingPopover(
                     variant='outlined'
                     css={{ '&:hover': {} }}
                     color='secondary'
-                    rightIcon={
-                      <Box as='img' src={open ? ArrowUp : ArrowDown} />
-                    }
+                    rightIcon={open ? <ArrowUp /> : <ArrowDown />}
                   >
                     <Text>{`${
                       group.fields.length || ''

diff --git a/src/aimcore/web/ui/src/pages/Board/components/BoardConsole.tsx b/src/aimcore/web/ui/src/pages/Board/components/BoardConsole.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import { IconCircleX } from '@tabler/icons-react';
 
-import ArrowDown from 'assets/icons/dropdown-arrow-down.svg';
-import ArrowUp from 'assets/icons/dropdown-arrow-up.svg';
+import { ReactComponent as ArrowDown } from 'assets/icons/dropdown-arrow-down.svg';
+import { ReactComponent as ArrowUp } from 'assets/icons/dropdown-arrow-up.svg';
 
 import ResizeElement, {
   ResizableElement,
@@ -122,7 +122,7 @@ function BoardConsoleOpener({ onClick, consoleElement }: any) {
           color='secondary'
           size='xs'
           onClick={handleClick}
-          icon={<Box as='img' src={isConsoleOpened ? ArrowDown : ArrowUp} />}
+          icon={isConsoleOpened ? <ArrowDown /> : <ArrowUp />}
         />
       </Tooltip>
     </Box>