Merge pull request #1861 from ethereum/fix-verticalIcons-badge

Fix vertical icons badge

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

@@ -57,6 +57,7 @@ export class VerticalIcons extends Plugin {
   unlinkContent (profile) {
     this.targetProfileForRemoval = profile
     this.removeIcon(profile)
+    this.renderComponent()
   }
 
   listenOnStatus (profile) {

apps/remix-ide/src/remixAppManager.js

@@ -8,7 +8,7 @@ const _paq = window._paq = window._paq || []
 const requiredModules = [ // services + layout views + system views
   'manager', 'config', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'gistHandler', 'layout', 'notification', 'permissionhandler']
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'gistHandler', 'layout', 'notification', 'permissionhandler', 'walkthrough']
 
 const dependentModules = ['git', 'hardhat', 'slither'] // module which shouldn't be manually activated (e.g git is activated by remixd)
 

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

@@ -7,7 +7,7 @@ import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeR
 import { BadgeStatus, IconProfile, IconStatus } from './Icon'
 
 interface BadgeProps {
-  badgeStatus: BadgeStatus
+  badgeStatus?: BadgeStatus
 }
 
 // eslint-disable-next-line no-undef

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

@@ -1,9 +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 } from 'react'
+import React, { Fragment } from 'react'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon from './Icon'
-import Badge from './Badge'
-import Icon, { IconStatus } from './Icon'
 
 interface DebuggerProps {
   verticalIconsPlugin: VerticalIcons
@@ -12,23 +10,7 @@ interface DebuggerProps {
   removeActive: () => void
 }
 
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: ''
-}
-
 function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) {
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-
-  useEffect(() => {
-    verticalIconsPlugin.on('debugger', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
-
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -49,9 +31,6 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
-              <Badge
-                badgeStatus={badgeStatus}
-              />
             </div>
           ))
         : null}

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

@@ -1,25 +1,15 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable no-use-before-define */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line no-use-before-define
 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'
-
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-  interface IconProps {
-    verticalIconPlugin: VerticalIcons
-    profile: IconProfile
-    contextMenuAction: (evt: any, profileName: string, documentation: string) => void
-    addActive: (profileName: string) => void
-    removeActive: () => void
-    badgeStatus?: BadgeStatus
-  }
 
 export interface IconStatus {
     key: string
     title: string
     type: string
+    pluginName?: string
   }
 
 export interface BadgeStatus extends IconStatus {
@@ -40,14 +30,29 @@ export interface IconProfile {
     tooltip?: string
   }
 
+  interface IconProps {
+    verticalIconPlugin: VerticalIcons
+    profile: IconProfile
+    contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+    addActive: (profileName: string) => void
+    removeActive: () => void
+  }
+
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: '',
+  pluginName: ''
+}
+
 function Icon ({
   profile,
   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
@@ -58,6 +63,7 @@ function Icon ({
   const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
       {} as { Documentation: string, CanDeactivate: boolean }
   )
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
   // @ts-ignore
   const [pageX, setPageX] = useState<number>(null)
   // @ts-ignore
@@ -84,6 +90,17 @@ function Icon ({
     setShowContext(false)
   }
 
+  useEffect(() => {
+    verticalIconPlugin.on(name, 'statusChanged', (iconStatus: IconStatus) => {
+      iconStatus.pluginName = name
+      const action: IconBadgeReducerAction = { type: name, payload: { status: iconStatus, verticalIconPlugin: verticalIconPlugin } }
+      dispatchStatusUpdate(action)
+    })
+    return () => {
+      verticalIconPlugin.off(name, 'statusChanged')
+    }
+  }, [])
+
   return (
     <Fragment>
       <div
@@ -111,9 +128,10 @@ function Icon ({
         ref={iconRef}
       >
         <img className="remixui_image" src={icon} alt={name} />
+        { badgeStatus && badgeStatus.pluginName === name ? (
           <Badge
-          badgeStatus={badgeStatus!}
+            badgeStatus={badgeStatus}
-        />
+          />) : null }
       </div>
       {showContext ? (
         <VerticalIconsContextMenu

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

@@ -1,9 +1,8 @@
 /* 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, { useEffect, useReducer } from 'react'
+import React from 'react'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon from './Icon'
-import Icon, { IconStatus } from './Icon'
 
 function customFilter (p: string) {
   if (p !== 'settings' && p !== 'pluginManager' &&
@@ -19,28 +18,7 @@ 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">
       {
@@ -56,7 +34,6 @@ 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,40 +26,45 @@ 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}
         itemContextAction={itemContextAction}
       />
+      {
+        scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+          ? (
             <Chevron
               divElementRef={scrollableRef}
               cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
             />
+          ) : null
+      }
     </Fragment>
   )
 }

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

@@ -34,10 +34,10 @@ function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addA
   }, [])
   return (
     <div id="settingsIcons" className="remixui_settings mb-0 flex-grow-0" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
-      <Chevron
+      { scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? (<Chevron
         divElementRef={scrollableRef}
         cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
-      />
+      />) : null }
       {Object.keys(verticalIconsPlugin.targetProfileForChange)
         .filter(p => p === 'settings')
         .map(p => (

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

@@ -1,9 +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 } from 'react'
+import React, { Fragment } from 'react'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon from './Icon'
-// import Badge from './Badge'
-import Icon, { IconStatus } from './Icon'
 
 interface SolidityProps {
   verticalIconsPlugin: VerticalIcons
@@ -11,22 +9,8 @@ interface SolidityProps {
   addActive: (name: string) => void
   removeActive: () => void
 }
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: ''
-}
 
 function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) {
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-
-  useEffect(() => {
-    verticalIconsPlugin.on('solidity', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -46,7 +30,6 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-                badgeStatus={badgeStatus}
               />
             </div>
           ))

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

@@ -1,9 +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 } from 'react'
+import React, { Fragment } from 'react'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon from './Icon'
-// import Badge from './Badge'
-import Icon, { IconStatus } from './Icon'
 
 interface SolidityStaticAnalysisProps {
   verticalIconsPlugin: VerticalIcons
@@ -12,21 +10,7 @@ interface SolidityStaticAnalysisProps {
   removeActive: () => void
 }
 
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: ''
-}
-
 function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) {
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-  useEffect(() => {
-    verticalIconsPlugin.on('solidityStaticAnalysis', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -46,7 +30,6 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-                badgeStatus={badgeStatus}
               />
             </div>
           ))

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 } from 'react'
+import React, { Fragment } from 'react'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon from './Icon'
-import Icon, { IconStatus } from './Icon'
 
 interface UdappProps {
   verticalIconsPlugin: VerticalIcons
@@ -11,23 +10,7 @@ interface UdappProps {
   removeActive: () => void
 }
 
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: ''
-}
-
 function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) {
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-
-  useEffect(() => {
-    verticalIconsPlugin.on('udapp', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
-
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -48,7 +31,6 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-                badgeStatus={badgeStatus}
               />
             </div>
           ))

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

@@ -31,7 +31,8 @@ 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
-  return { title, type: thisType, key, text }
+  const pluginName = status.pluginName
+  return { title, type: thisType, key, text, pluginName }
 }
 
 export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAction) {

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

@@ -113,11 +113,6 @@
     flex-basis: 50px;
   }
 
-  .remixui_requiredSection {
-    flex-basis: 180px;
-    flex-grow: 1;
-  }
-
   #menuitems {
     list-style: none;
     margin: 0px;

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

@@ -19,8 +19,6 @@ export interface RemixUiVerticalIconsPanelProps {
   verticalIconsPlugin: VerticalIcons
 }
 
-let scrollHeight: any
-
 const initialState = {
   scrollHeight: 0,
   clientHeight: 0,
@@ -36,7 +34,6 @@ export function RemixUiVerticalIconsPanel ({
 
   useEffect(() => {
     const evaluateScrollability = (evt: any) => {
-      console.log('resize event answered by dispatch!')
       dispatchScrollAction({
         type: 'resize',
         payload: {
@@ -80,7 +77,6 @@ export function RemixUiVerticalIconsPanel ({
   }
 
   function addActive (name: string) {
-    console.log('addactive has been called now.')
     if (name === 'home') return
     const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
     const invert = themeType === 'dark' ? 1 : 0
@@ -107,13 +103,9 @@ export function RemixUiVerticalIconsPanel ({
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
     })
-  }, [])
+    return () => {
-
+      themeModule.events.off('themeChanged')
-  useEffect(() => {
+    }
-    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
-    })
   }, [])
 
   useEffect(() => {