Merge pull request #24 from UncoderIO/ui-fix-3

Add UI improvements

Author: alex-bredikhin

uncoder-os/.env.common

@@ -0,0 +1 @@
+MODULE_VERSION=1.1.0

uncoder-os/.gitignore

@@ -20,3 +20,4 @@ yarn-error.log*
 # .env
 
 /.idea
+.editorconfig

uncoder-os/configs/webpack.common.js

@@ -19,7 +19,25 @@ const rules = [
         onlyCompileBundledFiles: true,
       },
     }],
-    exclude: /node_modules/,
+    exclude: [/node_modules/, /workers/],
+  },
+  {
+    test: /\.worker\.ts$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: 'no-fallback',
+        },
+      },
+      'babel-loader',
+      {
+        loader: 'ts-loader',
+        options: {
+          onlyCompileBundledFiles: true,
+        },
+      }],
+    exclude: [/node_modules/],
   },
   {
     test: /\.svg$/,

uncoder-os/configs/webpack.compile.js

@@ -12,7 +12,7 @@ const plugins = [
     name: 'uncoder',
     filename: 'remoteEntry.js',
     exposes: {
-      './UncoderEditor': './src/pages/UncoderEditor/bootstrap',
+      './UncoderEditor': './src/pages/UncoderEditor/bootstrap.tsx',
     },
     shared: packageJson.dependencies,
   }),

uncoder-os/package.json

@@ -16,7 +16,9 @@
     "react": "^18",
     "react-ace": "^10.1.0",
     "react-dom": "^18",
+    "react-error-boundary": "^4.0.11",
     "react-redux": "^8.1.3",
+    "react-tooltip": "^5.24.0",
     "redux": "^4.2.1",
     "simplebar-react": "^3.2.4"
   },
@@ -63,6 +65,7 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^5.10.0",
+    "worker-loader": "^3.0.8"
   }
 }

uncoder-os/src/App.tsx

@@ -0,0 +1,11 @@
+import React, { FC, Suspense } from 'react';
+import { MainPage } from './pages/MainPage';
+import { Spinner } from './components/Spinner';
+
+const App: FC = () => (
+    <Suspense fallback={<Spinner />}>
+      <MainPage />
+    </Suspense>
+);
+
+export default App;

uncoder-os/src/assets/svg/GridIcon.svg

@@ -14,8 +14,11 @@
   font-weight: 400
   font-size: 14px
   color: $textDarkBlue
+  text-decoration: none
   transition: background-color .1s
   cursor: pointer
+  &:hover
+    text-decoration: none
   &:disabled,
   &.disabled
     &,
@@ -58,3 +61,5 @@
     font-size: 16px
     &.button--icon
       min-width: 30px
+  &--inline
+    display: inline-flex

uncoder-os/src/assets/svg/LittleDownIcon.svg

@@ -0,0 +1,17 @@
+import React, { AnchorHTMLAttributes, FC } from 'react';
+
+import './Button.sass';
+
+type ButtonLinkPropsType = AnchorHTMLAttributes<Element> & {
+  classes?: string;
+};
+
+export const ButtonLink: FC<ButtonLinkPropsType> = ({
+  children,
+  classes = '',
+  ...otherProps
+}) => (
+  <a className={`button ${classes}`} {...otherProps}>
+    {children}
+  </a>
+);

uncoder-os/src/components/Buttons/Button/Button.sass

@@ -1 +1,2 @@
 export { Button } from './Button';
+export { ButtonLink } from './ButtonLink';

uncoder-os/src/components/Buttons/Button/ButtonLink.tsx

@@ -0,0 +1,8 @@
+@import ../../../assets/sass/helpers/variables
+
+.button--upper
+  &:disabled, &:disabled:hover
+    border-color: $borderDisabled
+    background-color: $iconDisabled
+    box-shadow: none
+    z-index: 1

uncoder-os/src/components/Buttons/Button/index.ts

@@ -1,9 +1,26 @@
 import React, { FC } from 'react';
 import { Button } from '../Button';
+import { Tooltip } from '../../Tooltip';
 import { useTranslateButton } from './useTranslateButton';
 
+import './TranslateButton.sass';
+
 export const TranslateButton: FC = () => {
-  const { onClickHandler } = useTranslateButton();
+  const { isActive, disabledMessage, onClickHandler } = useTranslateButton();
+
+  if (!isActive) {
+    return (
+      <Tooltip anchor="translate-button-disabled" content={disabledMessage} positionStrategy="fixed">
+        <Button
+          classes="button--upper button--semi button--green button--m"
+          children="Translate"
+          aria-label="translate"
+          type="button"
+          disabled={!isActive}
+        />
+      </Tooltip>
+    );
+  }
 
   return (
     <Button

uncoder-os/src/components/Buttons/TranslateButton/TranslateButton.sass

@@ -2,20 +2,30 @@ import { translateIocsFromInputEditor, translateTextFromInputEditor } from '../.
 import { useDispatch, useSelector } from 'react-redux';
 import { Dispatch } from '@reduxjs/toolkit';
 import { inputEditorPlatformCodeSelector } from '../../../reduxData/inputEditor';
+import { EditorValueTypes } from '../../../types/editorValueTypes';
+import { iocSettingsSelector } from '../../../reduxData/iocSettings';
 
 export const useTranslateButton = () => {
-  const parser = useSelector(inputEditorPlatformCodeSelector);
   const dispatch = useDispatch<Dispatch<any>>();
+  const parser = useSelector(inputEditorPlatformCodeSelector);
+  const { includeIocTypes } = useSelector(iocSettingsSelector);
+
   const onClickHandler = async () => {
-    if (parser === 'ioc') {
+    if (parser === EditorValueTypes.ioc) {
       dispatch(translateIocsFromInputEditor());
       return;
     }
 
     dispatch(translateTextFromInputEditor());
   };
 
+  const isActive = includeIocTypes.length > 0 || parser !== 'ioc';
+
+  const disabledMessage = 'IOC Types is not specified';
+
   return {
+    isActive,
+    disabledMessage,
     onClickHandler,
   };
 };

uncoder-os/src/components/Buttons/TranslateButton/TranslateButton.tsx

@@ -1,2 +1,2 @@
-export { Button } from './Button';
+export { Button, ButtonLink } from './Button';
 export * from './TranslateButton';

uncoder-os/src/components/Buttons/TranslateButton/useTranslateButton.ts

@@ -27,13 +27,13 @@ export const DropdownIocSettingsMenu: FC = () => {
       {
         iocTypesFields.map((field) => (
           <div className="ioc-settings-menu-list__item m-r-16 m-b-6" key={field.name}>
-            <Checkbox label={field.label} checked={field.checked} name={field.name}/>
+            <Checkbox label={field.label} checked={field.checked} name={field.name} readOnly/>
           </div>
         ))
       }
       {
         (iocTypeErrorMessage?.length) && (
-          <HelperText children={iocTypeErrorMessage} />
+          <HelperText children={iocTypeErrorMessage}/>
         )
       }
     </div>
@@ -44,13 +44,13 @@ export const DropdownIocSettingsMenu: FC = () => {
       {
         hashTypesFields.map((field) => (
           <div className="ioc-settings-menu-list__item m-r-16 m-b-6" key={field.name}>
-            <Checkbox label={field.label} checked={field.checked} name={field.name}/>
+            <Checkbox label={field.label} checked={field.checked} name={field.name} readOnly/>
           </div>
         ))
       }
     </div>
     <div className="ioc-settings-menu__label m-b-10">
-      <Label label="IOCs per query" />
+      <Label label="IOCs per query"/>
     </div>
     <div className="ioc-settings-menu__slider m-b-12">
       <RangeSlider
@@ -63,7 +63,7 @@ export const DropdownIocSettingsMenu: FC = () => {
       />
     </div>
     <div className="ioc-settings-menu__label m-b-10">
-      <Label label="Exceptions" />
+      <Label label="Exceptions"/>
     </div>
     <div className="ioc-settings-menu-list__textarea m-b-8">
       <Textarea

uncoder-os/src/components/Buttons/index.ts

@@ -15,7 +15,7 @@ export const ReplaceSettingsMenu: FC<DropdownDefaultMenuPropsType> = ({ width =
     replaceSettings,
     isSelectAll,
   } = useReplaceSettings();
-  console.log(replaceSettings);
+
   return (
     <div className="dropdown-menu-checkbox-list" style={{ width }}>
       <div className="dropdown-menu-checkbox-list__item">
@@ -25,7 +25,12 @@ export const ReplaceSettingsMenu: FC<DropdownDefaultMenuPropsType> = ({ width =
         {
           replaceSettings.map((field) => (
             <div className="dropdown-menu-checkbox-list__item" key={field.name}>
-              <Checkbox label={field.label} checked={field.checked} name={field.name}/>
+              <Checkbox
+                label={field.label}
+                checked={field.checked}
+                name={field.name}
+                readOnly={true}
+              />
             </div>
           ))
         }

uncoder-os/src/components/Dropdown/DropdownLayouts/DropdownIocSettingsMenu/DropdownIocSettingsMenu.tsx

@@ -21,11 +21,10 @@ const replaceSettings = [
     checked: false,
   },
 ];
+
 export const useReplaceSettings = () => {
-  const {
-    iocParsingRules,
-  } = useSelector(iocSettingsSelector);
   const dispatch = useDispatch<Dispatch<any>>();
+  const { iocParsingRules } = useSelector(iocSettingsSelector);
 
   const onChangeReplaceSettings = (event: ChangeEvent<HTMLInputElement>) => {
     const { checked, name } = event.target;

uncoder-os/src/components/Dropdown/DropdownLayouts/ReplaceSettingsMenu/ReplaceSettingsMenu.tsx

@@ -0,0 +1,18 @@
+@import ../../assets/sass/helpers/variables
+
+.error-boundary-page
+  min-height: calc(100vh - 236px)
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+  &__wrap
+    text-align: center
+  &__title
+    font-size: 32px
+    font-weight: 600
+  &__description
+    h3
+      font-size: 14px
+      font-weight: 400
+      color: $textSubdued

uncoder-os/src/components/Dropdown/DropdownLayouts/ReplaceSettingsMenu/useReplaceSettings.ts

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { ButtonLink } from '../Buttons';
+
+import { ReactComponent as LittleDownIcon } from '../../assets/svg/LittleDownIcon.svg';
+
+import './ErrorBoundaryFallback.sass';
+
+interface IErrorBoundaryFallbackPropsType extends FallbackProps {}
+
+export const ErrorBoundaryFallback: FC <IErrorBoundaryFallbackPropsType> = () => (
+  <div className="error-boundary-page">
+    <div className="error-boundary-page__wrap">
+      <div className="error-boundary-page__body">
+        <div className="error-boundary-page__icon m-b-32">
+          <LittleDownIcon />
+        </div>
+        <h1 className="error-boundary-page__title m-b-16">
+          Something Went Wrong
+        </h1>
+        <div className="error-boundary-page__description m-b-24">
+          <h3 className="m-b-16">
+            Please, try again or reach out to us
+            on <a className="link link--underline link--green" href="https://discord.com/invite/yYd47bA2XV" target="_blank">Discord</a>.
+          </h3>
+        </div>
+        <div className="error-boundary-page__button">
+          <ButtonLink className="button button--upper button--semi button--green button--m button--inline" href="/">
+            TRY AGAIN
+          </ButtonLink>
+        </div>
+      </div>
+    </div>
+  </div>
+);

uncoder-os/src/components/ErrorBoundaryFallback/ErrorBoundaryFallback.sass

@@ -0,0 +1 @@
+export { ErrorBoundaryFallback } from './ErrorBoundaryFallback';

uncoder-os/src/components/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { useInputEditorFileUploadButton } from './useInputEditorFileUploadButton';
 import { FileUploader } from '../FileUploader';
 import { Button } from '../../Buttons';
+import { Tooltip } from '../../Tooltip';
 import { ReactComponent as UploadIcon } from '../../../assets/svg/UploadIcon.svg';
 
 export const InputEditorFileUploadButton: FC = () => {
@@ -12,9 +13,11 @@ export const InputEditorFileUploadButton: FC = () => {
       handleFile={uploadHandler}
       accept=".csv,.json,.txt"
     >
-      <Button classes="button--icon button--xs button--default button--bg m-r-6" aria-label="input-upload" type="button">
-        <UploadIcon />
-      </Button>
+      <Tooltip content="Upload IOCs" positionStrategy="fixed">
+        <Button classes="button--icon button--xs button--default button--bg m-r-6" aria-label="input-upload" type="button">
+          <UploadIcon />
+        </Button>
+      </Tooltip>
     </FileUploader>
   );
 };