Tooltip for deactivated AddProposalButton (#3909)

packages/ui/src/common/components/Tooltip/Tooltip.tsx

@@ -33,6 +33,7 @@ export interface TooltipPopupProps {
   forBig?: boolean
   hideOnComponentLeave?: boolean
   boundaryClassName?: string
+  placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
 }
 
 export interface DarkTooltipInnerItemProps {
@@ -54,14 +55,15 @@ export const Tooltip = ({
   offset,
   hideOnComponentLeave,
   boundaryClassName,
+  placement = 'bottom-start',
 }: TooltipProps) => {
   const [isTooltipActive, setTooltipActive] = useState(tooltipOpen)
   const [referenceElementRef, setReferenceElementRef] = useState<HTMLElement | null>(null)
   const [popperElementRef, setPopperElementRef] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
 
   const { styles, attributes } = usePopper(referenceElementRef, popperElementRef, {
-    placement: 'bottom-start',
+    placement,
     modifiers: [
       {
         name: 'offset',

packages/ui/src/proposals/components/AddProposalButton.tsx

@@ -1,37 +1,44 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import { useApi } from '@/api/hooks/useApi'
 import { TransactionButton } from '@/common/components/buttons/TransactionButton'
 import { PlusIcon } from '@/common/components/icons/PlusIcon'
+import { Tooltip } from '@/common/components/Tooltip'
 import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue'
 import { useModal } from '@/common/hooks/useModal'
 import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal'
 
 export const AddProposalButton = () => {
+  const { api } = useApi()
   const { showModal } = useModal()
-  const addNewProposalModal = useCallback(() => {
-    showModal<AddNewProposalModalCall>({
-      modal: 'AddNewProposalModal',
-    })
-  }, [])
+  const addProposalModal = useCallback(() => showModal<AddNewProposalModalCall>({ modal: 'AddNewProposalModal' }), [])
 
-  const { api } = useApi()
-  const maxProposals = api?.consts.proposalsEngine.maxActiveProposalLimit
-  const currentProposals = useFirstObservableValue(
-    () => api?.query.proposalsEngine.activeProposalCount(),
-    [api?.isConnected]
-  )
-  const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals)
+  const maxProposals = useMemo(() => api?.consts.proposalsEngine.maxActiveProposalLimit, [api?.isConnected])
+  const proposals = useFirstObservableValue(() => api?.query.proposalsEngine.activeProposalCount(), [api?.isConnected])
+  const availableSlots = useMemo(() => Number(maxProposals) - Number(proposals), [proposals, maxProposals])
+
+  const tooltipProps = useMemo(() => {
+    if (!api?.isConnected) return { tooltipText: 'Connecting to api' }
+    if (availableSlots ?? 0)
+      return {
+        tooltipTitle: 'Max active proposals limit reached',
+        tooltipText: `The creation of proposals is currently disabled because the number of deciding or gracing proposals reached the limit of ${maxProposals}.`,
+        tooltipLinkText: 'Proposal System Constants',
+        tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system#constants',
+      }
+    return {
+      tooltipText: 'Use the proposal engine to suggest a change to the Council.',
+      tooltipLinkText: 'Learn about the Proposal System',
+      tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system',
+    }
+  }, [api?.isConnected, availableSlots])
 
   return (
-    <TransactionButton
-      style="primary"
-      size="medium"
-      onClick={addNewProposalModal}
-      disabled={!areProposalSlotsAvailable}
-    >
-      <PlusIcon />
-      Add new proposal
-    </TransactionButton>
+    <Tooltip placement="bottom-end" {...tooltipProps}>
+      <TransactionButton style="primary" size="medium" onClick={addProposalModal} disabled={!availableSlots}>
+        <PlusIcon />
+        Add new proposal
+      </TransactionButton>
+    </Tooltip>
   )
 }