Refactor tooltip links (#3743) #3775

traumschule · 2022-10-30T20:39:15Z

Fixes #3743
Except ExecutionRequirementsWarning.tsx where the link is part of a modal.

There are more in FundingDetailsStep.tsx. Are Fragments a better option than collating multiple paragraphs into one string (loosing newlines)?

For further refactoring texts can be pulled into dictionaries (#1989).

vercel · 2022-10-30T20:39:20Z

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

Name	Status	Preview	Updated
dao	✅ Ready (Inspect)	Visit Preview	Nov 25, 2022 at 8:52AM (UTC)
pioneer-2	✅ Ready (Inspect)	Visit Preview	Nov 25, 2022 at 8:52AM (UTC)
pioneer-2-storybook	✅ Ready (Inspect)	Visit Preview	Nov 25, 2022 at 8:52AM (UTC)

thesan

Nice refactor! Thanks

thesan

Actually the new link text and icon are a bit harder to spot now

Old one:

New One:

Please fix the link font size and logo color

traumschule · 2022-11-03T20:29:12Z

@oleksanderkorn the last commit broke types, can you please also see if there's an easy fix for the CSS. For example:

ERROR in src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx:39:6
TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | undefined'.
    37 |             tooltipText="The budget is the root resource pool for all token minting in the working group, and the size of the pool is denoted by budget."
    38 |             tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/key-concepts/staking#locks-1"
  > 39 |      tooltipLinkText="Learn more"
       |      ^^^^^^^^^^^^^^^

oleksanderkorn

@traumschule
Fixing type is simple:

tooltipLinkText?: React.ReactElement | string

Also, there are unused imports:

oleksanderkorn · 2022-11-07T10:51:16Z

@traumschule link was before inside the Tooltip Text, when I put it back the link name looks good.

For link to pick up the styles i had to add those two classes (i have no idea how it was working before)

oleksanderkorn · 2022-11-07T11:16:13Z

@traumschule here is the full patch:

index c5ffc06b..d055af7b 100644
--- a/packages/ui/src/accounts/components/StakeStep.tsx
+++ b/packages/ui/src/accounts/components/StakeStep.tsx
@@ -8,10 +8,8 @@ import { Account, LockType } from '@/accounts/types'
 import { CurrencyName } from '@/app/constants/currency'
 import { InputComponent, TokenInput } from '@/common/components/forms'
 import { getErrorMessage, hasError } from '@/common/components/forms/FieldError'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 import { formatTokenValue } from '@/common/model/formatters'
 import { VoteForCouncilEvent, VoteForCouncilMachineState } from '@/council/modals/VoteForCouncil/machine'
diff --git a/packages/ui/src/app/pages/Election/Election.tsx b/packages/ui/src/app/pages/Election/Election.tsx
index cc2696e2..2d8be6f1 100644
--- a/packages/ui/src/app/pages/Election/Election.tsx
+++ b/packages/ui/src/app/pages/Election/Election.tsx
@@ -4,12 +4,11 @@ import { useHistory } from 'react-router-dom'
 import { PageHeaderRow, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ButtonsGroup, CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import { MainPanel } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { BlockDurationStatistics, StatisticItem, Statistics } from '@/common/components/statistics'
-import { TextHuge, TextMedium } from '@/common/components/typography'
+import { TextHuge } from '@/common/components/typography'
 import { camelCaseToText } from '@/common/helpers'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
diff --git a/packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx b/packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx
index 85ef0d27..3910c24e 100644
--- a/packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx
+++ b/packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx
@@ -20,7 +20,6 @@ import { SuccessTransactionModal } from '@/bounty/modals/SuccessTransactionModal
 import { isFundingLimited } from '@/bounty/types/Bounty'
 import { Input, InputComponent, TokenInput } from '@/common/components/forms'
 import { getErrorMessage, hasError } from '@/common/components/forms/FieldError'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import {
   AmountButton,
   AmountButtons,
diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
index d170591b..f5f1a753 100644
--- a/packages/ui/src/common/components/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
@@ -4,11 +4,12 @@ import { usePopper } from 'react-popper'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { TextMedium } from '@/common/components/typography'
+
 import { BorderRad, Colors, Fonts, Transitions, ZIndex } from '../../constants'
 import { LinkSymbol, LinkSymbolStyle } from '../icons/symbols'
 
 import { DefaultTooltip } from './TooltipDefault'
-import { TextMedium } from '@/common/components/typography'
 
 export interface TooltipProps extends Omit<TooltipPopupProps, 'popUpHandlers' | 'position'> {
   absolute?: boolean
@@ -130,17 +131,21 @@ export const Tooltip = ({
                 forBig={forBig}
               >
                 {tooltipTitle && <TooltipPopupTitle>{tooltipTitle}</TooltipPopupTitle>}
-                <TooltipText>{tooltipText}</TooltipText>
-                {tooltipLinkURL &&
-                  (isExternalLink() ? (
-                    <TooltipExternalLink href={tooltipLinkURL} target="_blank">
-                      <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium> <LinkSymbol />
-                    </TooltipExternalLink>
-                  ) : (
-                    <TooltipLink to={tooltipLinkURL} target="_blank">
-                      <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium> <LinkSymbol />
-                    </TooltipLink>
-                  ))}
+                <TooltipText>
+                  {tooltipText}
+                  {tooltipLinkURL &&
+                    (isExternalLink() ? (
+                      <TooltipExternalLink href={tooltipLinkURL} target="_blank">
+                        <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium>
+                        <LinkSymbol />
+                      </TooltipExternalLink>
+                    ) : (
+                      <TooltipLink to={tooltipLinkURL} target="_blank">
+                        <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium>
+                        <LinkSymbol />
+                      </TooltipLink>
+                    ))}
+                </TooltipText>
               </TooltipPopupContainer>,
               document.body
             ))}
diff --git a/packages/ui/src/common/components/forms/InputComponent.tsx b/packages/ui/src/common/components/forms/InputComponent.tsx
index 51dc3dbd..ee2311d7 100644
--- a/packages/ui/src/common/components/forms/InputComponent.tsx
+++ b/packages/ui/src/common/components/forms/InputComponent.tsx
@@ -28,7 +28,7 @@ export type InputComponentProps = InputProps &
     message?: React.ReactElement | string
     tooltipText?: React.ReactElement | string
     tooltipTitle?: string
-    tooltipLinkText?: React.ReactElement
+    tooltipLinkText?: React.ReactElement | string
     tooltipLinkURL?: string
     className?: string
     children: React.ReactNode
diff --git a/packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx b/packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx
index 69b2a26c..8180ed14 100644
--- a/packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx
+++ b/packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx
@@ -15,10 +15,12 @@ export function LinkSymbol({ className, color }: SymbolProps) {
       className={className}
     >
       <path
+        className="blackPart"
         d="M1.1001 3.99998L2.0001 3.09998H12.8001V4.89998H2.9001V21.1H19.1001V11.2H20.9001V22L20.0001 22.9H2.0001L1.1001 22V3.99998Z"
         fill={color ?? Colors.Black[900]}
       />
       <path
+        className="primaryPart"
         d="M15.4999 1.09998H21.9999L22.8999 1.99998V8.49998H21.0999V4.17277L10.6363 14.6364L9.36353 13.3636L19.8271 2.89998H15.4999V1.09998Z"
         fill={color ?? Colors.Blue[500]}
       />
diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
index 84f655cf..d7ecfeba 100644
--- a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
+++ b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
@@ -21,7 +21,6 @@ import {
   ToggleCheckbox,
 } from '@/common/components/forms'
 import { Arrow } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
@@ -33,7 +32,6 @@ import {
   ScrolledModalContainer,
   TransactionInfoContainer,
 } from '@/common/components/Modal'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TransactionInfo } from '@/common/components/TransactionInfo'
 import { TextMedium } from '@/common/components/typography'
 import { definedValues } from '@/common/utils'
diff --git a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx
index ee6eabd6..32390dfe 100644
--- a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx
+++ b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx
@@ -4,7 +4,6 @@ import * as Yup from 'yup'
 
 import { ButtonPrimary } from '@/common/components/buttons'
 import { InputComponent, InputText, InputTextarea } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
@@ -14,7 +13,6 @@ import {
   ScrolledModalContainer,
   Row,
 } from '@/common/components/Modal'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium } from '@/common/components/typography'
 import { useKeyring } from '@/common/hooks/useKeyring'
 import { useYupValidationResolver } from '@/common/utils/validation'
diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx
index 6e04d27f..f311c8eb 100644
--- a/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx
+++ b/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx
@@ -5,12 +5,11 @@ import styled from 'styled-components'
 import { BadgeStatus } from '@/common/components/BadgeStatus'
 import { CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { TableListItem } from '@/common/components/List'
 import { GhostRouterLink } from '@/common/components/RouterLink'
 import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
 import { Subscription } from '@/common/components/typography/Subscription'
-import { TextSmall, TextMedium } from '@/common/components/typography/Text'
+import { TextSmall } from '@/common/components/typography/Text'
 import { Colors, Overflow } from '@/common/constants'
 import { camelCaseToText } from '@/common/helpers'
 import { toDDMMYY } from '@/common/utils/dates'
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetReferralCut.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetReferralCut.tsx
index 7ed4e0d8..37e2b793 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetReferralCut.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetReferralCut.tsx
@@ -2,10 +2,8 @@ import React from 'react'
 
 import { useApi } from '@/api/hooks/useApi'
 import { InputComponent, InputNumber } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue'
 
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
index 8e98ae9d..68f86447 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
@@ -3,10 +3,8 @@ import React from 'react'
 
 import { SelectStakingAccount } from '@/accounts/components/SelectAccount'
 import { InputComponent } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 
 interface StakingAccountStepProps {
@@ -36,7 +34,7 @@ export const StakingAccountStep = ({ requiredStake }: StakingAccountStepProps) =
             label="Select account for Staking"
             tooltipText="The budget is the root resource pool for all token minting in the working group, and the size of the pool is denoted by budget."
             tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/key-concepts/staking#locks-1"
-	    tooltipLinkText="Learn more"
+            tooltipLinkText="Learn more"
             inputSize="l"
             required
             name="stakingAccount.stakingAccount"

oleksanderkorn · 2022-11-07T11:35:33Z

@traumschule https://github.com/traumschule/pioneer/pull/3/files

traumschule · 2022-11-19T03:36:15Z

Rebased and fixed test warnings which caused other conflicts, reverted and leaving this to ongoing tests refactory.

oleksanderkorn

lgtm

WRadoslaw · 2022-11-24T12:52:21Z

packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx

    )
+    return <PageLayout lastBreadcrumb={id} main={Main} />


What's the purpose of this? Without useMemo on Main I don't see a reason

Reverted, even worse with useMemo

const Main = useMemo( () => ( ( <RowGapBlock gap={24}> <ContentWithSidePanel> <Loading /> </ContentWithSidePanel> </RowGapBlock> ), [] ) ) return <PageLayout lastBreadcrumb={id} main={Main} />

Why is it worse? Extracting Main to the new variable doesn't have any positive impact either on performance or code clarity. Going in-depth - this block of HTML is so small that extracting it to the new variable doesn't really improve code clarity, that's why I said that the only viable reason would be to keep it in useMemo to process it once and serve when needed, but in this case, this if block will be executed only once, so useMemo doesn't make much sense as well.

Summarizing there was no need to change this code at all

Worse as in more lines of code is what i meant: i tried useMemo and the code was longer = even worse, the opposite of my motivation to change it in the first place). Thanks for clarifying, totally agree.

traumschule · 2022-11-27T01:18:52Z

Again sorry for the mess mixing in unrelated fixes. The failing test is about forum changes, not touching that as well.

WRadoslaw

Nice job!

* Refactor tooltip links (Joystream#3743) * Add tooltipLinkText, default TooltipExternalLink formatting * PR Review fixes. * fix import * remove unused, mixed tabs and spaces * Fix handbook links revised (Joystream#2847) * Fix proposals trigger tooltipText (Joystream#2346) * style Co-authored-by: Joystream Stats <dev@joystreamstats.live> Co-authored-by: Oleksandr Korniienko <oleksanderkorn@gmail.com>

traumschule added community-dev issue suitable for community-dev pipeline jsg-code-review labels Oct 30, 2022

traumschule mentioned this pull request Oct 30, 2022

Invitation lock tooltip (#3479) #3740

Merged

vercel bot deployed to Preview – pioneer-2-storybook October 30, 2022 20:42 View deployment

vercel bot deployed to Preview – dao October 30, 2022 20:43 View deployment

vercel bot deployed to Preview – pioneer-2 October 30, 2022 20:43 View deployment

thesan approved these changes Nov 3, 2022

View reviewed changes

thesan requested changes Nov 3, 2022

View reviewed changes

traumschule added builders-wg-code-review and removed jsg-code-review labels Nov 3, 2022

traumschule requested a review from oleksanderkorn November 3, 2022 20:29

vercel bot deployed to Preview – pioneer-2-storybook November 3, 2022 20:30 View deployment

vercel bot had a problem deploying to Preview – pioneer-2 November 3, 2022 20:30 Failure

vercel bot had a problem deploying to Preview – dao November 3, 2022 20:31 Failure

traumschule mentioned this pull request Nov 4, 2022

Votes backup CTA on VoteForCouncilSuccessModal (#1633) #3797

Merged

oleksanderkorn suggested changes Nov 7, 2022

View reviewed changes

vercel bot deployed to Preview – pioneer-2-storybook November 7, 2022 12:10 View deployment

traumschule force-pushed the feature/tooltips-refactor-3743 branch from bc5d375 to 0ade12f Compare November 7, 2022 12:10

vercel bot deployed to Preview – pioneer-2-storybook November 7, 2022 12:15 View deployment

vercel bot had a problem deploying to Preview – pioneer-2 November 7, 2022 12:15 Failure

vercel bot had a problem deploying to Preview – dao November 7, 2022 12:16 Failure

vercel bot deployed to Preview – dao November 7, 2022 12:34 View deployment

vercel bot deployed to Preview – pioneer-2 November 7, 2022 12:34 View deployment

vercel bot deployed to Preview – pioneer-2-storybook November 7, 2022 12:34 View deployment

vercel bot deployed to Preview – pioneer-2-storybook November 7, 2022 13:10 View deployment

Joystream Stats added 3 commits November 19, 2022 01:38

remove unused, mixed tabs and spaces

c94e42f

Fix handbook links revised (Joystream#2847)

dd0fd73

Fix proposals trigger tooltipText (Joystream#2346)

d9d9308

traumschule force-pushed the feature/tooltips-refactor-3743 branch from 430290f to e8fa4ff Compare November 19, 2022 02:55

vercel bot had a problem deploying to Preview – dao November 19, 2022 02:59 Failure

vercel bot had a problem deploying to Preview – pioneer-2 November 19, 2022 02:59 Failure

traumschule force-pushed the feature/tooltips-refactor-3743 branch from e8fa4ff to d9d9308 Compare November 19, 2022 03:02

vercel bot deployed to Preview – pioneer-2 November 19, 2022 03:06 View deployment

vercel bot deployed to Preview – dao November 19, 2022 03:06 View deployment

vercel bot deployed to Preview – pioneer-2-storybook November 19, 2022 03:14 View deployment

traumschule added jsg-code-review and removed builders-wg-code-review labels Nov 19, 2022

traumschule requested a review from oleksanderkorn November 19, 2022 03:36

oleksanderkorn approved these changes Nov 19, 2022

View reviewed changes

traumschule requested a review from WRadoslaw November 24, 2022 11:43

WRadoslaw suggested changes Nov 24, 2022

View reviewed changes

style

18e4e0a

traumschule requested a review from WRadoslaw November 25, 2022 08:50

vercel bot deployed to Preview – pioneer-2-storybook November 25, 2022 08:51 View deployment

vercel bot deployed to Preview – pioneer-2 November 25, 2022 08:52 View deployment

vercel bot deployed to Preview – dao November 25, 2022 08:52 View deployment

WRadoslaw approved these changes Nov 28, 2022

View reviewed changes

thesan approved these changes Nov 30, 2022

View reviewed changes

thesan changed the base branch from dev to staging November 30, 2022 15:33

thesan merged commit 94effcc into Joystream:staging Nov 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor tooltip links (#3743) #3775

Refactor tooltip links (#3743) #3775

traumschule commented Oct 30, 2022 •

edited

Loading

vercel bot commented Oct 30, 2022 •

edited

Loading

thesan left a comment

thesan left a comment

traumschule commented Nov 3, 2022

oleksanderkorn left a comment •

edited

Loading

oleksanderkorn commented Nov 7, 2022 •

edited

Loading

oleksanderkorn commented Nov 7, 2022 •

edited

Loading

oleksanderkorn commented Nov 7, 2022

traumschule commented Nov 19, 2022

oleksanderkorn left a comment

WRadoslaw Nov 24, 2022

traumschule Nov 25, 2022

WRadoslaw Nov 25, 2022

traumschule Nov 25, 2022 •

edited

Loading

traumschule commented Nov 27, 2022

WRadoslaw left a comment

Refactor tooltip links (#3743) #3775

Refactor tooltip links (#3743) #3775

Conversation

traumschule commented Oct 30, 2022 • edited Loading

vercel bot commented Oct 30, 2022 • edited Loading

thesan left a comment

Choose a reason for hiding this comment

thesan left a comment

Choose a reason for hiding this comment

traumschule commented Nov 3, 2022

oleksanderkorn left a comment • edited Loading

Choose a reason for hiding this comment

oleksanderkorn commented Nov 7, 2022 • edited Loading

oleksanderkorn commented Nov 7, 2022 • edited Loading

oleksanderkorn commented Nov 7, 2022

traumschule commented Nov 19, 2022

oleksanderkorn left a comment

Choose a reason for hiding this comment

WRadoslaw Nov 24, 2022

Choose a reason for hiding this comment

traumschule Nov 25, 2022

Choose a reason for hiding this comment

WRadoslaw Nov 25, 2022

Choose a reason for hiding this comment

traumschule Nov 25, 2022 • edited Loading

Choose a reason for hiding this comment

traumschule commented Nov 27, 2022

WRadoslaw left a comment

Choose a reason for hiding this comment

traumschule commented Oct 30, 2022 •

edited

Loading

vercel bot commented Oct 30, 2022 •

edited

Loading

oleksanderkorn left a comment •

edited

Loading

oleksanderkorn commented Nov 7, 2022 •

edited

Loading

oleksanderkorn commented Nov 7, 2022 •

edited

Loading

traumschule Nov 25, 2022 •

edited

Loading