[release-calendar] Change tooltip to use hooks 🎣 and portals #813

ajwhatson · 2020-04-30T08:23:02Z

This creates a tooltip that utilizes react portals in order to live outside of the calendar component in which is was made.

This is an example of a tooltip living outside of its parent component.

Included:

installation of @popperjs/core (for the tooltip), moment (to assist in the format of time in tooltip), react-popper (so the tooltip can be rendered in the correct position)
creation of Tooltip and Hook which together manage the positioning of the tooltip. Tooltip replaces the event element which would otherwise be automatically rendered FullCalendar. It replaces it with the hook. Hook makes the connection between the replacement event element and the new EventCard. Hook also conceals the EventCard when someone clicks away from the element and does so with eventListeners.
creation of EventCard which renders rows of information about the release. Each row has a related icon to the left and information to the right. The release cards match the corresponding channels by displaying a thin top bar and transparent background of the channel color.
styling for eventCard
styling adjustments to calendar in order to overwrite the default button colors of FullCalendar. FullCalendar.io does not allow for customized styling other than full Bootstrap themes- that seemed like an overkill.
small adjustments to the calendar so that the tooltip will not be cut off when it's positioned very low on the screen
change of testData from the first release being named 1234567890123 to 2004252135000 which instead is a real release tag so as to test the link to the github release body. Link will create a new tab.
emojis for channel schedule
add getReleaseDates(requestedRelease: string) to client side that uses the already made getCurrentReleases() call on the server side. This will carry ReleaseDate[] which contains promotion channels and start dates so to populate the emoji schedule.
TODO: Add cherrypick attribute to releaseDates currently the code on EventCard is commented out
TODO: Place emojis in rtv square on ChannelTable

estherkim

Nice use of 🎣

release-calendar/src/client/components/EventCard.tsx

estherkim · 2020-04-30T15:23:03Z

release-calendar/src/client/components/EventCard.tsx

+                <div className={'content-row'} key={row.icon}>
+                  <div className={'icon'}>
+                    <i
+                      className='material-icons'


Is it possible to use emojis instead of icons? We usually use 🚄 for release

Also do you have a better idea for a Github emoji? 🖥is just sad

And! for LTS, what's better 🏙or 🏰? or other?

Hmm I think 🏙

For the GitHub release link, I'd put 🔗

release-calendar/src/client/components/EventCard.tsx

estherkim · 2020-05-01T22:42:39Z

release-calendar/src/client/components/EventCard.tsx

+                          </span>
+                        </div>
+                        <div className={'text'}>
+                          {match.text + moment(row.date).format('MMMM Do, hA')}


Instead of having a match.text field, this can serve as a template to remove duplication.

I'm not sure what you mean. Hm, if you're thinking that there could be something like
Promoted to Opt-in Experimental, Opt-In Beta on April 20th, 11 am
Promoted to Opt-in Experimental, Opt-In Beta on April 20th, 11 am
one line which represents Channel.OPT_IN_EXPERIMENTAL and the other Channel.OPT_IN_BETA? That wont happen because Channel.OPT_IN_BETA doesn't exist in the schedule template. There is the possibility of duplication if there had been a rollback and a release is getting reinstated to a channel it was already in. Is that what you're referring to? If so, I can brainstorm about adding a rollback line to divide the two promotions?

By template I mean removing the match.text field and putting here:
{match.title} was promoted ...

You don't have to have a single line for experimental/beta, if it makes it easier. 1 channel per line is okay.

release-calendar/src/client/components/EventCard.tsx

estherkim · 2020-05-01T22:45:15Z

release-calendar/src/client/components/TooltipHook.tsx

+        <div ref={node}>
+          <div
+            ref={setPopperElement}
+            style={{...{zIndex: 999}, ...styles.popper}}


Can this be moved to an SCSS file? Not sure what popper suggests

There's a couple of things I can do.

Change the CSSProperty in styles.popper directly.
styles.popper['zIndex'] = 999;

Keep what I have above
style={{...{zIndex: 999}, ...styles.popper}}

Or declare zIndex: 999 in a different variable
const bringForward: React.CSSProperties = {zIndex: 999};
style={{...bringForward,...styles.popper}}

Popper doesn't have a suggestion for smaller changes to style like this. But when doing a full customized tooltip, they suggest the third (when I wouldn't use styles.popper at all).

Hmm, okay. We can leave this as is.

release-calendar/src/client/index.html

release-calendar/package.json

release-calendar/src/client/components/EventCard.tsx

release-calendar/src/client/components/TooltipHook.tsx

release-calendar/webpack.client.dev.config.js

estherkim · 2020-05-04T19:15:44Z

release-calendar/src/client/components/TooltipHook.tsx

+        <div ref={node}>
+          <div
+            ref={setPopperElement}
+            style={{...{zIndex: 999}, ...styles.popper}}


Hmm, okay. We can leave this as is.

release-calendar/package.json

release-calendar/src/client/models/view-models.ts

release-calendar/src/client/components/Tooltip.tsx

estherkim · 2020-05-05T14:41:54Z

release-calendar/src/client/components/ReleaseCard.tsx

+    },
+  ];
+
+  getTitle(search: Channel): string {


What if history was a dict with Channel as the key? Could be a lot cleaner here.

The best solution I can think to debug the channels with "-" not being accessible within the dictionary is to create an interface where the key is typed as a string. This will push the enum into a string under the hood, but it allows for normal dictionary sets and gets. If you are okay with here, then I could also make the channelsTitles a dictionary, which is currently a {channel: Channel, title: string}[]. We had used this structure because of the same weird "-" enum behavior. If I switched it, then I'd again have direct access to the titles I want instead of doing the find() loop I do now.

Can we revisit the dict idea? Hyphens should not be a problem. For example

const channelMap = { 'lts': 'lts', 'stable': 'stable', 'opt-in-beta': 'opt in beta', 'perc-beta': '1% beta', }; console.log(channels['opt-in-beta']); // opt in beta console.log(channels['perc-beta']); // 1% beta

Making channelsTitles a dictionary is a great idea :)

Also I totally misread your comment! My "revisit the dict idea" was not helpful haha. Nice workaround.

release-calendar/src/client/components/ReleaseCard.tsx

release-calendar/src/client/components/Tooltip.tsx

release-calendar/src/client/stylesheets/_base.scss

ajwhatson · 2020-05-05T20:51:35Z

getReleaseDates() will be renamed to getRelease() once the current getRelease is changed in a different pr

release-calendar/package.json

estherkim · 2020-05-05T23:25:31Z

release-calendar/src/client/api-service.ts

@@ -61,4 +61,10 @@ export class ApiService {
    );
    return new CurrentReleases(currentReleases);
  }
+
+  async getReleaseDates(requestedRelease: string): Promise<Release> {


rename getReleaseDates because it's not getting releaseDates anymore.

Oh, I just saw your comment. Okay.

release-calendar/src/client/components/ReleaseCard.tsx

estherkim · 2020-05-05T23:44:19Z

release-calendar/src/client/components/ReleaseCard.tsx

+    },
+  ];
+
+  getTitle(search: Channel): string {


Can we revisit the dict idea? Hyphens should not be a problem. For example

const channelMap = { 'lts': 'lts', 'stable': 'stable', 'opt-in-beta': 'opt in beta', 'perc-beta': '1% beta', }; console.log(channels['opt-in-beta']); // opt in beta console.log(channels['perc-beta']); // 1% beta

release-calendar/src/client/components/Tooltip.tsx

release-calendar/src/client/components/Hook.tsx

ajwhatson added 4 commits April 27, 2020 20:49

EventCard

149c777

switch to Popup

46cc0cc

look at this

81e5c41

react portal and hooks

1dda851

ajwhatson added the Category: Release Calendar label Apr 30, 2020

ajwhatson self-assigned this Apr 30, 2020

ajwhatson requested a review from estherkim April 30, 2020 08:23

googlebot added the cla: yes label Apr 30, 2020

ajwhatson changed the title ~~[release-calendar] Change tooltip to use hooks and portals~~ [release-calendar] Change tooltip to use hooks 🎣 and portals Apr 30, 2020

estherkim reviewed Apr 30, 2020

View reviewed changes

ajwhatson added 4 commits April 30, 2020 12:39

history of release

d5fdbd2

emoji schedule

88a032f

Merge branch 'master' into eventCard

04e4559

remove file-loader

0d4d5b2

ajwhatson added this to In progress in Release Calendar Apr 30, 2020

ajwhatson added 3 commits May 1, 2020 09:30

Merge branch 'master' into eventCard

96f3c19

releaseDates

39e5d85

merge

d46573e

ajwhatson requested a review from estherkim May 1, 2020 20:28

estherkim reviewed May 1, 2020

View reviewed changes

ajwhatson added 4 commits May 1, 2020 23:05

Merge branch 'master' into eventCard

6743588

small edits before doing timezone

08989a8

timezone

7aa9447

link

71f7345

ajwhatson requested a review from estherkim May 4, 2020 16:18

estherkim reviewed May 4, 2020

View reviewed changes

ajwhatson and others added 3 commits May 4, 2020 15:14

1 component per file

b011471

Merge branch 'master' into eventCard

3c23e23

use of ChannelTitles

881cecb

ajwhatson requested a review from estherkim May 4, 2020 23:39

estherkim reviewed May 5, 2020

View reviewed changes

ajwhatson added 3 commits May 5, 2020 11:18

remove curly

576fe74

merge

e068a47

History interface

55499e2

ajwhatson requested review from danielrozenberg and estherkim May 5, 2020 20:53

filter out eventApi

9280aeb

estherkim reviewed May 5, 2020

View reviewed changes

release-calendar/src/client/components/Tooltip.tsx Show resolved Hide resolved

release-calendar/src/client/components/Hook.tsx Show resolved Hide resolved

ajwhatson added 2 commits May 5, 2020 18:04

dict

1a5c1cd

small changes

979780d

ajwhatson requested a review from estherkim May 6, 2020 02:14

estherkim approved these changes May 6, 2020

View reviewed changes

danielrozenberg approved these changes May 6, 2020

View reviewed changes

ajwhatson merged commit a433d09 into ampproject:master May 6, 2020

Release Calendar automation moved this from In progress to Done May 6, 2020

ajwhatson deleted the eventCard branch May 6, 2020 19:08

ajwhatson linked an issue May 7, 2020 that may be closed by this pull request

[release-calendar] add links from github #765

Closed

ajwhatson mentioned this pull request May 7, 2020

[release-calendar] 🐛Single release event bug 🐛 #828

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[release-calendar] Change tooltip to use hooks 🎣 and portals #813

[release-calendar] Change tooltip to use hooks 🎣 and portals #813

ajwhatson commented Apr 30, 2020 •

edited

estherkim left a comment

estherkim Apr 30, 2020

ajwhatson May 1, 2020

ajwhatson May 1, 2020

estherkim May 1, 2020

estherkim May 1, 2020

estherkim May 1, 2020

ajwhatson May 2, 2020 •

edited

estherkim May 4, 2020

estherkim May 1, 2020

ajwhatson May 2, 2020

estherkim May 4, 2020

estherkim May 4, 2020

estherkim May 5, 2020

ajwhatson May 5, 2020 •

edited

estherkim May 5, 2020

estherkim May 6, 2020

estherkim May 6, 2020

ajwhatson commented May 5, 2020 •

edited

estherkim May 5, 2020

estherkim May 5, 2020

ajwhatson May 6, 2020

estherkim May 5, 2020

[release-calendar] Change tooltip to use hooks 🎣 and portals #813

[release-calendar] Change tooltip to use hooks 🎣 and portals #813

Conversation

ajwhatson commented Apr 30, 2020 • edited

estherkim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajwhatson May 2, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajwhatson May 5, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajwhatson commented May 5, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajwhatson commented Apr 30, 2020 •

edited

ajwhatson May 2, 2020 •

edited

ajwhatson May 5, 2020 •

edited

ajwhatson commented May 5, 2020 •

edited