Add tour to ccdb #409

flacoman91 · 2022-08-18T23:01:59Z

Short description explaining the high-level reason for the pull request

Additions

Removals

Changes

Testing

Screenshots

Notes

Todos

Checklist

Changes are limited to a single goal (no scope creep)
Code can be automatically merged (no conflicts)
Code follows the standards laid out in the front end playbook
Passes all existing automated tests
New functions include new tests
New functions are documented (with a description, list of inputs, and expected output)
Placeholder code is flagged
Visually tested in supported browsers and devices
Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

add dependency save work

flacoman91 · 2022-08-19T01:50:43Z

@anselmbradford this is almost ready. I still have some things I need to work out in the Tour component.

Could you take over and assist with the styling?

flacoman91 · 2022-08-19T02:18:41Z

src/actions/trends.jsx

+ * @param {string} value the new payload from the tooltip
+ * @returns {string} a packaged payload to be used by Redux reducers
+ */
+export function tourToggled( value ) {


I would write a test for this, but it's unnecessary esp if we are going to convert to redux toolkit.

anselmbradford · 2022-08-22T15:36:00Z

src/components/Tour/Tour.jsx

+
+    // hacks to setup the page. we should figure out if we should
+    // have this in redux instead
+    if ( expand === 9 ) {


Should the 9 go into a constant?

I updated this so it's more scalable so we don't have to hardcode the number.

anselmbradford · 2022-08-22T15:36:07Z

src/components/Tour/Tour.jsx

+      document.querySelector( '.advanced-container button' ).click()
+    }
+
+    if ( expand === 16 ) {


Should the 16 go into a constant?

same as above.

src/components/Tour/Tour.jsx

anselmbradford · 2022-08-22T15:40:49Z

src/components/Tour/Tour.less

@@ -0,0 +1,16 @@
+// Intro.js styles
+@import (css) '../../../node_modules/intro.js/introjs.css';


Does @import (css) 'node_modules/intro.js/introjs.css'; work, by chance?

No. This may be part of the technical debt regarding our build tools.

anselmbradford · 2022-08-22T15:41:33Z

src/components/Tour/TourButton.less

@@ -0,0 +1,11 @@
+@import (less) "../../css/base.less";


This looks like it could be @import (reference) "../../css/base.less";

this one looks okay.

flacoman91 · 2022-08-23T00:02:43Z

Looks like the cookie test all of a sudden failing is a known issue
jsdom/jsdom#3419

…-tour # Conflicts: # src/__tests__/utils.spec.jsx

…-tour

anselmbradford · 2022-09-01T16:30:40Z

I'm getting an error on the end tour step

EDIT: Looked at this further and it happens when I navigate through the tour with the return key. If I click the End Tour button at the end it closes, but if I use the return key it errors as above and then is broken and clicking doesn't work anymore.

…-tour

flacoman91 · 2022-09-06T19:08:07Z

updates responding to GHE 2104 have been made.

flacoman91 · 2022-09-07T16:40:08Z

removed Date Range steps in trends and map as requested.

flacoman91 · 2022-09-07T19:47:12Z

Restored links and table of contents. made only "Index" a title heading

anselmbradford · 2022-09-15T20:56:33Z

src/components/RefineBar/Select.jsx

@@ -48,7 +48,7 @@ export class Select extends React.Component {
    const values = this.getValues()

    return (
-      <section className="cf-select">
+      <section className={'cf-select ' + this.props.id}>


Should this.props.id go in an id attribute instead of class?

Ah I see in the snapshot it gets repeated. Well, instead of super generic class names like size and sort, let's prefix this to be <section className={'cf-select cf-select__' + this.props.id}>

I had to add this here so that I could target these for highlighting in intro.js here

https://github.com/cfpb/ccdb5-ui/pull/409/files#diff-1f017f3f6619b22aabaa7855af7aa91b94892609d8f7f765b5d5c942c4565d98R60

I think it might be possible to update the document.querySelector call to look for attributes instead

Hm yea, that actually would be the best way. The prefixed class sets this up as a modifier on cf-select, which implies that cf-select__sort (or whatever) is modifying cf-select. In actuality it is being used as an ID. That's not a big deal, but it could send someone off to look for the modifying CSS. If you want, you should be able to do <section className="cf-select" data-tour={this.props.id}> and query it with document.querySelector('[data-tour="sort"]'), or document.querySelector('section[data-tour="sort"]').

anselmbradford · 2022-09-15T21:00:44Z

package.json

@@ -149,5 +149,9 @@
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {


I think we want everything on devDependencies, as I think dependencies end up in the npm package. Since the npm package is just delivering a built JS file, I don't think we want anything else there.

src/components/Tour/constants/tourStepsConstants.js

anselmbradford

You could update to use data- attributes, but otherwise looks good

flacoman91 · 2022-09-16T14:06:54Z

src/components/RefineBar/Select.jsx

@@ -44,19 +44,21 @@ export class Select extends React.Component {
  }

  render() {
-    const id = 'choose-' + this.props.id
+    const id = 'select-' + this.props.id


i just renamed this to select vs choose, since that makes more sense.

flacoman91 · 2022-09-16T14:47:46Z

You could update to use data- attributes, but otherwise looks good

I updated it here and also renamed the id to make it clearer.

flacoman91 added 7 commits August 16, 2022 12:56

hello tour!

8acf3b7

add dependency save work

save work. tour

77d193f

index poc

4eadfc1

indexes for all tabs

66fd683

save work

9fccee8

update snapshots and tests

908a5ac

remove console.log

035b2ed

flacoman91 requested a review from anselmbradford August 19, 2022 01:49

flacoman91 commented Aug 19, 2022

View reviewed changes

update stuff

5ffcdfe

anselmbradford reviewed Aug 22, 2022

View reviewed changes

src/components/Tour/Tour.jsx Outdated Show resolved Hide resolved

anselmbradford reviewed Aug 22, 2022

View reviewed changes

flacoman91 added 3 commits August 22, 2022 18:06

updated logic to make it moree scalable

3097245

update reference

4056177

fix unit tests

3350dea

flacoman91 added 5 commits August 22, 2022 20:13

removing unused parseCookies function

b6cbf78

Merge commit 'd7822e50723096917ebffefccc324b12be13ba29' into rad-ccdb…

ec7d689

…-tour # Conflicts: # src/__tests__/utils.spec.jsx

Merge commit 'b3d8bd86c19509b3b9f445e71b102db4a5654357' into rad-ccdb…

587c95f

…-tour

Merge commit 'f646b2d2e2bc0e977d2372651ad88261f0589d35' into rad-ccdb…

e25352f

…-tour

Merge commit '17e410cc5fea9165ae416ca35ef671ad77f875f8' into rad-ccdb…

d1056ad

…-tour

flacoman91 marked this pull request as ready for review August 26, 2022 18:33

flacoman91 changed the title ~~WIP: Add tour to ccdb~~ Add tour to ccdb Aug 26, 2022

flacoman91 and others added 2 commits August 26, 2022 14:38

eslint ignore nags

b2c934b

add dist resources

71fbf85

flacoman91 added 4 commits September 6, 2022 12:31

Merge commit '61e3c768579fd2e9c23207ca3dbad37d1fc804cc' into rad-ccdb…

6bb5abb

…-tour

remove links

4675c28

updating merge, update dist

304836a

respond tofeedback

c121824

flacoman91 added 2 commits September 6, 2022 15:09

updating bundle

3a101fd

removing date range step in trends and map

d1a1435

restore links, make Index a title, not link, update dist

e20287f

flacoman91 added 3 commits September 7, 2022 15:50

fix typo

104e6d6

update links to buttons

9986a81

merge and fix conf

39eb836

anselmbradford reviewed Sep 15, 2022

View reviewed changes

update selectors, snaps, buildss

7018d5a

anselmbradford reviewed Sep 16, 2022

View reviewed changes

src/components/Tour/constants/tourStepsConstants.js Outdated Show resolved Hide resolved

anselmbradford approved these changes Sep 16, 2022

View reviewed changes

flacoman91 added 2 commits September 16, 2022 09:59

updating cypress tests, ids, updating data-attributes

a8d3854

formatting

b1cc201

flacoman91 commented Sep 16, 2022

View reviewed changes

updating build dist

46ecbb5

flacoman91 merged commit a16855d into main Sep 16, 2022

flacoman91 deleted the rad-ccdb-tour branch September 16, 2022 14:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tour to ccdb #409

Add tour to ccdb #409

flacoman91 commented Aug 18, 2022

flacoman91 commented Aug 19, 2022

flacoman91 Aug 19, 2022

anselmbradford Aug 22, 2022

flacoman91 Aug 22, 2022

anselmbradford Aug 22, 2022

flacoman91 Aug 22, 2022

anselmbradford Aug 22, 2022

flacoman91 Aug 22, 2022

anselmbradford Aug 22, 2022

flacoman91 Aug 22, 2022

flacoman91 commented Aug 23, 2022 •

edited

anselmbradford commented Sep 1, 2022 •

edited

flacoman91 commented Sep 6, 2022

flacoman91 commented Sep 7, 2022

flacoman91 commented Sep 7, 2022

anselmbradford Sep 15, 2022

anselmbradford Sep 15, 2022

flacoman91 Sep 15, 2022

anselmbradford Sep 16, 2022

anselmbradford Sep 15, 2022

anselmbradford left a comment •

edited

flacoman91 Sep 16, 2022

flacoman91 commented Sep 16, 2022

		@@ -0,0 +1,16 @@
		// Intro.js styles
		@import (css) '../../../node_modules/intro.js/introjs.css';

Add tour to ccdb #409

Add tour to ccdb #409

Conversation

flacoman91 commented Aug 18, 2022

Additions

Removals

Changes

Testing

Screenshots

Notes

Todos

Checklist

flacoman91 commented Aug 19, 2022

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flacoman91 commented Aug 23, 2022 • edited

anselmbradford commented Sep 1, 2022 • edited

flacoman91 commented Sep 6, 2022

flacoman91 commented Sep 7, 2022

flacoman91 commented Sep 7, 2022

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

anselmbradford left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flacoman91 commented Sep 16, 2022

flacoman91 commented Aug 23, 2022 •

edited

anselmbradford commented Sep 1, 2022 •

edited

anselmbradford left a comment •

edited