Tooltip for deactivated AddProposalButton (#3909)

[traumschule]

#3909

Wrap TransactionButton in a tooltip when disabled. The placement prop seemed necessary to better orient the arrow.

Note ideally we don't want to hardcode constants, however there is no quick solution with useProposalConstants because it is designed to query proposalsCodex not proposalsEngine.activeProposalCount and can't be easily extended without changing its return type.
Waiting for the go-ahead.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dao	❌ Failed (Inspect)		💬 Add feedback	Jun 17, 2023 6:26am
pioneer-2	❌ Failed (Inspect)		💬 Add feedback	Jun 17, 2023 6:26am
pioneer-2-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 17, 2023 6:26am

[traumschule]

before

FAIL test/proposals/components/AddProposalButton.test.tsx (8.094 s)
 |   ● UI: AddProposalButton › Active proposals under proposal limit
 | 
 |     expect(element).not.toBeDisabled()
 | 
 |     Received element is disabled:
 |       <button class="ButtonPrimaryStyles-sc-1s7nmh2-1 bOBZxM" disabled="" />
 | 
 |       17 |     renderComponent()
 |       18 |
 |     > 19 |     expect(await getButton('Add new proposal')).not.toBeDisabled()

after

 PASS  test/proposals/components/AddProposalButton.test.tsx
  UI: AddProposalButton
    ✓ Active proposals under proposal limit (109 ms)
    ✓ Active proposals limit met (17 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total

[thesan]

That's a really nice solution but ATM the tooltip shows even when they're no current proposals:

on: https://dao-git-fork-traumschule-fix-add-proposal-button-3909-joystream.vercel.app/#/proposals/current?network-config=https://34.230.5.182.nip.io/network/config.json

[traumschule]

Now the default is to show the general info with handbook link from the start even without connection or wallet. Clicking the button will open the modal to create a membership.
Should be fine because even new users will notice the Connect Wallet button at some point when asked to fill the fields.

[thesan]

Suggested change

	if (!api?.isConnected || availableSlots > 0) {
	if (availableSlots > 0) {

[traumschule]

The new logic is that until connection is established and when there are slots the default tooltip is shown. Without the first condition a user would see the error "Max active proposals limit reached" during loading.

[thesan]

TransactionButton also renders a Tooltip when a transaction is pending. As a result in case of a pending transaction, this will result in the Tooltip beeing nested (I'm not sure what will actually be shown). To avoid this situation, TransactionButton could accept TooltipContentProp:

• If these are defined ⇒ display the Tooltip
• If a transaction is pending ⇒ display the: "Please wait until the current transaction is over" regardless of whether a different tooltip text was passed.

WDYT ?

[traumschule]

This makes sense.