Add deactivated AddProposalButton tooltip (Joystream#3909)

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

@@ -31,6 +31,7 @@ export interface TooltipPopupProps {
  forBig?: boolean
  hideOnComponentLeave?: boolean
  boundaryClassName?: string
+ placement?: string
 }
 
 export interface DarkTooltipInnerItemProps {
@@ -52,14 +53,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

@@ -3,6 +3,7 @@ import React, { useCallback } 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'
@@ -21,9 +22,9 @@ export const AddProposalButton = () => {
  () => api?.query.proposalsEngine.activeProposalCount(),
  [api?.isConnected]
  )
- const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals)
+ const areProposalSlotsAvailable = false //api && maxProposals && currentProposals?.lt(maxProposals)
 
- return (
+ const txButton = () => (
  <TransactionButton
  style="primary"
  size="medium"
@@ -34,4 +35,19 @@ export const AddProposalButton = () => {
  Add new proposal
  </TransactionButton>
  )
+
+ if (!areProposalSlotsAvailable)
+ return (
+ <Tooltip
+ tooltipTitle="MAX_ACTIVE_PROPOSALS"
+ tooltipText="The creation of new proposals is currently disabled because the number of deciding or gracing proposals is restricted to 20."
+ tooltipLinkText="Proposal System Constants"
+ tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/proposal-system#constants"
+ placement="bottom-end"
+ >
+ {txButton()}
+ </Tooltip>
+ )
+
+ return txButton()
 }