fix status change reducer and css for badges

apps/remix-ide/src/app/components/vertical-icons.js

@@ -63,88 +63,9 @@ export class VerticalIcons extends Plugin {
   }
 
   listenOnStatus (profile) {
-    // the list of supported keys. 'none' will remove the status
-    // const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
-    // const types = ['error', 'warning', 'success', 'info', '']
-    // const fn = (status) => {
-    //   if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
-    //   if (status.key === undefined) throw new Error('status key should be defined')
 
-    //   if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
-    //     throw new Error('key should contain either number or ' + this.keys.join())
-    //   }
-    //   this.setIconStatus(profile.name, status)
-    // }
-    // this.iconStatus[profile.name] = fn
-    // this.on(profile.name, this.iconStatus[profile.name])
   }
 
-  /**
-   * resolve a classes list for @arg key
-   * @param {Object} key
-   * @param {Object} type
-   */
-  // resolveClasses (key, type) {
-  //   let classes = 'remixui_status'
-
-  //   switch (key) {
-  //     case 'succeed':
-  //       classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     case 'edited':
-  //       classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     case 'loading':
-  //       classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     case 'failed':
-  //       classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     default: {
-  //       classes += ' badge badge-pill badge-' + type
-  //     }
-  //   }
-  //   return classes
-  // }
-
-  /**
-   * Set a new status for the @arg name
-   * @param {String} name
-   * @param {Object} status
-   */
-  // setIconStatus (name, status) {
-  //   const el = this.icons[name]
-  //   if (!el) return
-  //   const statusEl = el.querySelector('i')
-  //   if (statusEl) {
-  //     el.removeChild(statusEl)
-  //   }
-  //   if (status.key === 'none') return // remove status
-
-  //   let text = ''
-  //   let key = ''
-  //   if (typeof status.key === 'number') {
-  //     key = status.key.toString()
-  //     text = key
-  //   } else key = helper.checkSpecialChars(status.key) ? '' : status.key
-
-  //   let type = ''
-  //   if (status.type === 'error') {
-  //     type = 'danger' // to use with bootstrap
-  //   } else type = helper.checkSpecialChars(status.type) ? '' : status.type
-  //   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-
-  //   el.appendChild(`<i
-  //   title="${title}"
-  //     class="${this.resolveClasses(key, type)}"
-  //     aria-hidden="true"
-  //   >
-  //   ${text}
-  //   </i>`)
-
-  //   el.classList.add('remixui_icon')
-  // }
-
   /**
    * Remove an icon from the map
    * @param {ModuleProfile} profile The profile of the module

libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx

@@ -49,7 +49,7 @@ function Badge ({ badgeStatus }: BadgeProps) {
   }
 
   return (
-    <Fragment>
+    <>
       {
         badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? (
           <i
@@ -61,7 +61,7 @@ function Badge ({ badgeStatus }: BadgeProps) {
           </i>
         ) : null
       }
-    </Fragment>
+    </>
   )
 }
 

libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx

@@ -1,6 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
@@ -21,11 +21,10 @@ const initialState = {
 
 function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) {
   const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-  const ref = useRef<any>(null)
 
   useEffect(() => {
     verticalIconsPlugin.on('debugger', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
       dispatchStatusUpdate(action)
     })
   }, [])
@@ -50,14 +49,9 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
               <Badge
                 badgeStatus={badgeStatus}
               />
-                  ) : null
-              }
             </div>
           ))
         : null}

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -5,6 +5,7 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import Badge from './Badge'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -12,6 +13,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
     removeActive: () => void
+    badgeStatus?: BadgeStatus
   }
 
 export interface IconStatus {
@@ -43,7 +45,9 @@ function Icon ({
   verticalIconPlugin,
   contextMenuAction,
   addActive,
-  removeActive
+  removeActive,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  badgeStatus
 }: IconProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { tooltip, displayName, name, kind, icon, documentation } = profile
@@ -108,8 +112,10 @@ function Icon ({
         ref={iconRef}
       >
         <img className="remixui_image" src={icon} alt={name} />
+        <Badge
+          badgeStatus={badgeStatus!}
+        />
       </div>
-
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}

libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React from 'react'
+import React, { useEffect, useReducer } from 'react'
-import Icon from './Icon'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon, { IconStatus } from './Icon'
 
 function customFilter (p: string) {
   if (p !== 'settings' && p !== 'pluginManager' &&
@@ -18,7 +19,28 @@ interface OtherIconsProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+
+  useEffect(() => {
+    Object.keys(verticalIconsPlugin.targetProfileForChange)
+      .filter(customFilter)
+      .forEach(p =>
+        verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => {
+          const action: IconBadgeReducerAction = {
+            type: verticalIconsPlugin.targetProfileForChange[p].name,
+            payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin }
+          }
+          dispatchStatusUpdate(action)
+        }))
+  }, [])
   return (
     <div id="otherIcons">
       {
@@ -34,6 +56,7 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
               key={
                 verticalIconsPlugin.targetProfileForChange[p].displayName
               }
+              badgeStatus={badgeStatus}
             />
           ))}
     </div>

libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx

@@ -26,31 +26,31 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Solidity
+      <PluginManager
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Udapp
+      <Solidity
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <SolidityStaticAnalysis
+      <Udapp
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Debugger
+      <SolidityStaticAnalysis
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <PluginManager
+      <Debugger
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}

libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx

@@ -2,7 +2,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
 // eslint-disable-next-line no-use-before-define
 import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-import Badge from './Badge'
+// import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
 
 interface SolidityProps {
@@ -26,7 +26,6 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
       const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
       dispatchStatusUpdate(action)
     })
-    console.log('solidity icon useEffect handled no issues')
   }, [])
   return (
     <Fragment>
@@ -47,15 +46,8 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-              />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
                 badgeStatus={badgeStatus}
               />
-                  ) : null
-              }
             </div>
           ))
         : null}

libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx

@@ -2,7 +2,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
 // eslint-disable-next-line no-use-before-define
 import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-import Badge from './Badge'
+// import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
 
 interface SolidityStaticAnalysisProps {
@@ -34,7 +34,7 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
         ? Object.keys(verticalIconsPlugin.targetProfileForChange)
           .filter(p => p === 'solidityStaticAnalysis')
           .map(p => (
-            <div id="analysisIcons" key={
+            <div id="analysisIcons" className="remixui_iconContainer" key={
               verticalIconsPlugin.targetProfileForChange[p].displayName
             }>
               <Icon
@@ -46,15 +46,8 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-              />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
                 badgeStatus={badgeStatus}
               />
-                  ) : null
-              }
             </div>
           ))
         : null}

libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx

@@ -1,8 +1,7 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
 
 interface UdappProps {
@@ -21,11 +20,10 @@ const initialState = {
 
 function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) {
   const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-  const ref = useRef<any>(null)
 
   useEffect(() => {
     verticalIconsPlugin.on('udapp', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
       dispatchStatusUpdate(action)
     })
   }, [])
@@ -50,15 +48,8 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-              />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
                 badgeStatus={badgeStatus}
               />
-                  ) : null
-              }
             </div>
           ))
         : null}

libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts

@@ -9,22 +9,12 @@ export type IconBadgeReducerAction = {
   readonly payload: any
 }
 
-// const fn = (status: IconStatus) => {
-//   if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
-//   if (status.key === undefined) throw new Error('status key should be defined')
-
-//   if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
-//     throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
-//   }
-// }
-
 /**
    * Set a new status for the @arg name
    * @param {String} name
    * @param {Object} status
    */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-// if (!ref.current) return
 function setIconStatus (name: string, status: IconStatus) {
   if (status.key === 'none') return { ...status, text: '' } // remove status
 
@@ -41,7 +31,6 @@ function setIconStatus (name: string, status: IconStatus) {
     thisType = 'danger' // to use with bootstrap
   } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type!
   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-  console.log(`new status for ${name} is :`, { title, type: thisType, key, text })
   return { title, type: thisType, key, text }
 }
 
@@ -49,7 +38,6 @@ export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAc
   const { status, ref, verticalIconPlugin } = action.payload
   if (Object.keys(verticalIconPlugin.targetProfileForChange).includes(action.type)) {
     const setStatus = setIconStatus(action.type, status)
-    console.log(`from reducer of ${action.type} :`, { setStatus })
     return setStatus
   }
   return state

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -44,10 +44,11 @@
     bottom: 0;
   }
   .remixui_status {
-    /* position: relative; */
+    position: relative;
     bottom: 0;
     right: 0;
-    align-self: flex-end;
+    left: 12px;
+    top: -13px;
   }
   .remixui_statusCheck {
     font-size: 1.2em;
@@ -114,6 +115,10 @@
     flex-grow: 1;
   }
 
+  .remixui_iconContainer {
+
+  }
+
   #menuitems {
     list-style: none;
     margin: 0px;