Refactor(Grid): convert Grid instances to PF4 #126

jenny-s51 · 2022-07-19T21:29:34Z

What's included

...
Towards #96 - I did a bunch of investigation here and a lot of testing/modifying code -- it looks like we won't be able to convert a lot Grid occurrences without some pretty heavy refactoring... probably makes sense to update #96 with this info and then figure out the best approach to divide and conquer all those instances!

In some the create/edit modals we are using Grid to apply similar formatting as a horizontal Form component, so we need do some refactoring from Grid.Row, Grid.Column to use the isHorizontal variant of Form instead of this Grid-based approach. I tried to do this to see if it would work out of the box, and it doesn't, so I made a list of things we can start with below.

Some things we'd need to refactor:

Remove instances of Grid within modals and just use Form
Form.FormGroup to FormGroup
Form.FormControl to FormControl
Setting label on all FormGroups instead of using renderFormLabel()

Currently investigating Grid.Row syntax within some select menus...

How to test

Example

...
Before:

After:

Updates issue/story

cdcabrera · 2022-07-20T14:37:01Z

@jenny-s51

We can finish up this PR, but the grid work has the appearance of needing to be performed as a clean up task.

That task would be associated with larger grouping components, which in some cases would cause Grid to simply be removed without any issue. For instance with one or two of the Empty-State conversions we removed grid entirely.

The preferred method, moving forward, for grid conversions is to

Either work at a slightly higher level, like in the case of this PR, the table/listing conversions first, then work on grid as a follow up
- Mostly so we don't end up removing grid entirely after we spent effort converting it,
- Or using a completely different component like <List />, which seems more appropriate for this PR
- And partially because reusing the old css classes to define how the padding/margins/spacing inside a PF4 Grid behaves inside PF3 work would also, most likely, go away with any PF4 parent component conversion
Or work below grid, like buttons, smaller components

As for the form work, that seems to highlight something similar to the Empty-State work, and grid could simply be considered a removal clean up task in that case. This work has a story #104 and Discovery-153

Form.FormGroup to FormGroup
Form.FormControl to FormControl
Setting label on all FormGroups instead of using renderFormLabel()

As for select menus, I'm in the process now of converting both select lists, dropdowns, and the toolbar components now. If there's something related to those conversions please send it over. However, we haven't noticed anything to do with grid.row so we're curious where this is located

jenny-s51 · 2022-07-20T15:21:24Z

Thank you for your helpful feedback and clarification @cdcabrera ! Implementing this grid work as a clean up task definitely makes sense and sounds like a good plan.

I'm happy to update this PR with whatever changes you think are best! Just wanted to get a green-light from you first before swapping components around. I think using a List instead would probably make sense in a few places, specifically in the areas shown in the screenshots above! WDYT?

dropdownSelect.js is currently implemented using this Grid.Row and Grid.Col syntax -- https://github.com/quipucords/quipucords-ui/blob/master/src/components/dropdownSelect/dropdownSelect.js#L168-L175

Looks like it can ultimately be refactored to the multi variant of select!.

cdcabrera

Update grid to list in a couple of spots
Possibly forgo the grid update on scanhostlist since it's a wrapper of wrappers, plus has a max-height setting we maybe should apply to other lists
Update unit test snapshots

src/components/credentials/credentialListItem.js

src/components/sources/sourceCredentialsList.js

src/components/scanHostList/scanHostList.js

jenny-s51

❗️ Updated the screenshots based on most recent changes.

refactor(grid): remove sm prop PR feedback from David add optional chaining fix(i18n): discovery-8 partial context into keys (quipucords#124) feat(wizard): discovery-153 pf4 wizard wrapper (quipucords#124) * confirmationModal, pass isContentOnly * modal, add isContentOnly, removes padding * wizard, consistent pf4 wrapper, allow modal sizing refactor(addSourceWizard): discovery-153, pf4 wizard (quipucords#124) * locale, wizard form strings * addSourceWizard, Constants, restructure steps * addSourceWizardStepThree, add empty-state * styling, restructure pf3 styling wizard form refactor(scanHostList): discovery-148, pf4 empty-state (quipucords#125) refactor(grid): update scanHostList.js refactor(grid): update tests refactor(Grid): fix icon syntax + update tests

codecov-commenter · 2022-07-25T20:07:25Z

Codecov Report

❗ No coverage uploaded for pull request base (dev@f2db5c3). Click here to learn what that means.
The diff coverage is n/a.

@@          Coverage Diff           @@
##             dev     #126   +/-   ##
======================================
  Coverage       ?   73.84%           
======================================
  Files          ?       97           
  Lines          ?     3082           
  Branches       ?      842           
======================================
  Hits           ?     2276           
  Misses         ?      716           
  Partials       ?       90

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f2db5c3...a3d362d. Read the comment docs.

cdcabrera

Very close, and thank you for updating the test snapshots, they help with reviews!

src/components/credentials/credentials.js

src/components/scanHostList/scanHostList.js

src/components/credentials/credentialListItem.js

cdcabrera · 2022-07-26T21:40:24Z

@jenny-s51 looks good! everything is working, nothing needs to change on the code side!

Go ahead and update the build output checks/snapshots, after that we'll merge

$ yarn build
$ yarn test:integration-dev

author CD Cabrera <ccabrera@redhat.com> 1654528943 -0400 committer jenny-s51 <jshandel@redhat.com> 1659366125 -0400 fix(build): base dep package updates (quipucords#80) * build, base deps for dev functionality * build, stage, review, use pre-built image * testing, dist test, lint updates * styling, flip to sass, remove legacy css chore(build): node, workflow, docs, and tooling refs (quipucords#80) fix(build): npm updates (quipucords#80) fix(build): update react (quipucords#80) * build, update react 17, pf deps * testing, snapshots, console check fix(i18n): component loading (quipucords#80) chore(build): github badge, remove travis (quipucords#81) chore(build): post clean up, remove unused css copy (quipucords#84) fix(build): npm updates (quipucords#83) refactor(services): discovery-8 minor config restructure (quipucords#82) * service config, allow opts, fallback xhr timeout * api calls, config wrapper function, named imports refactor(redux): discovery-8 middleware, hooks, restructure (quipucords#82) * helpers, aggregatedError func for redux hooks * redux actions, named exports * redux hooks, useReactRedux * redux middleware, middleware export, multi-actions * store, move middleware, named export fix(build): npm update, redux middleware (quipucords#82) fix(build): discovery-8 allow repo locale files (quipucords#85) * docs, merge repo locale with docs locale files * helpers, expand noopTranslate, annotations * i18n, snapshot translate uses * i18nHelpers, translate helper, expand testing * testing, hook testing funcs fix(build): allow running review, stage parallel (quipucords#86) * build, parallel images, container names, domains * build, npm script, docker stop feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86) * build, pf4 npm updates * style, move base css files to index.scss * style, apply core pf4, overrides.scss fix(style): discovery-8 css, scss vars for color (quipucords#86) fix(testing): use i18n unit, remove integration check (quipucords#87) fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87) refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87) * aboutModal, pf4 component conversion * locales, about modal strings chore(build): do not start with stored data, db volumes (quipucords#107) chore(build): activate eslint jsdoc (quipucords#110) fix(pf4-style): expose scss variables (quipucords#110) feat(modal): discovery-148 pf4 modal wrapper (quipucords#110) * locales, modal default string * modal, consistent pf4 wrapper, allow backdrop disable refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88) * locale, button strings for modals * authentication, apply pf4 modal * confirmationModal, refactor using pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons * credentials, pf4 modal * mergeReportsDialog, pf modal, buttons * scans, pf4 modal * sources, pf4 modal refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108) refactor(authentication): discovery-148 pf4 alert, locale (quipucords#112) fix(confirmationModal): expand behavior, allow children (quipucords#113) refactor(authentication): discovery-148 replace empty-state (quipucords#113) refactor(credentials): discovery-148 pf4 empty-state (quipucords#116) * locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state refactor(refreshTimeButton): discovery-149 pf4 button, icon (quipucords#114) refactor(scans): discovery-148 pf4 empty-state (quipucords#117) * locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state fix(build): base dep package updates (quipucords#80) * build, base deps for dev functionality * build, stage, review, use pre-built image * testing, dist test, lint updates * styling, flip to sass, remove legacy css chore(build): node, workflow, docs, and tooling refs (quipucords#80) fix(build): npm updates (quipucords#80) fix(build): update react (quipucords#80) * build, update react 17, pf deps * testing, snapshots, console check fix(i18n): component loading (quipucords#80) chore(build): github badge, remove travis (quipucords#81) chore(build): post clean up, remove unused css copy (quipucords#84) fix(build): npm updates (quipucords#83) fix(build): npm update, redux middleware (quipucords#82) fix(build): discovery-8 allow repo locale files (quipucords#85) * docs, merge repo locale with docs locale files * helpers, expand noopTranslate, annotations * i18n, snapshot translate uses * i18nHelpers, translate helper, expand testing * testing, hook testing funcs fix(build): allow running review, stage parallel (quipucords#86) * build, parallel images, container names, domains * build, npm script, docker stop feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86) * build, pf4 npm updates * style, move base css files to index.scss * style, apply core pf4, overrides.scss fix(style): discovery-8 css, scss vars for color (quipucords#86) fix(testing): use i18n unit, remove integration check (quipucords#87) fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87) refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87) * aboutModal, pf4 component conversion * locales, about modal strings chore(build): do not start with stored data, db volumes (quipucords#107) chore(build): activate eslint jsdoc (quipucords#110) fix(pf4-style): expose scss variables (quipucords#110) feat(modal): discovery-148 pf4 modal wrapper (quipucords#110) * locales, modal default string * modal, consistent pf4 wrapper, allow backdrop disable refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88) * locale, button strings for modals * authentication, apply pf4 modal * confirmationModal, refactor using pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons * credentials, pf4 modal * mergeReportsDialog, pf modal, buttons * scans, pf4 modal * sources, pf4 modal refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108) fix(confirmationModal): expand behavior, allow children (quipucords#113) refactor(authentication): discovery-148 replace empty-state (quipucords#113) refactor(credentials): discovery-148 pf4 empty-state (quipucords#116) * locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state refactor(scans): discovery-148 pf4 empty-state (quipucords#117) * locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state refactor(toastNotificationsList): discovery-148, pf4 alert (quipucords#115) * build, dotenv toast timeout * components, adjust alertType to alert variant * helpers, expose toast timeout * toastNotificationsList, pf4 alert, alertGroup * toastNotificationsReducer, adjust pause, resume fix(testing): expand toastNotificationsList snapshots (quipucords#115) refactor(sources): discovery-148 pf4 empty-state (quipucords#120) * locale, add empty-state strings * sources, pf4 empty-state refactor(creds,sources,scans): discovery-149 emptyState grid (quipucords#121) * credentials, sources, scansEmptyState, remove grid fix(i18n): discovery-8 partial context into keys (quipucords#124) feat(wizard): discovery-153 pf4 wizard wrapper (quipucords#124) * confirmationModal, pass isContentOnly * modal, add isContentOnly, removes padding * wizard, consistent pf4 wrapper, allow modal sizing refactor(addSourceWizard): discovery-153, pf4 wizard (quipucords#124) * locale, wizard form strings * addSourceWizard, Constants, restructure steps * addSourceWizardStepThree, add empty-state * styling, restructure pf3 styling wizard form refactor(scanHostList): discovery-148, pf4 empty-state (quipucords#125) refactor(pagination): wip refactor(pagination): use PF4 component refactor(pagination): update snapshots refactor(pagination): update test refactor(pagination): update test refactor(creds,sources,scans): discovery-149 pf4 grid, list (quipucords#126) * credentialsListItem, grid to list, tooltip * credentials, removed grid * scanHostList, grid to list * scanSourceList nested list with icon * sourceCredentialsList, list with icon refactor(dropdownSelect): discovery-152 pf4 select, dropdown (quipucords#127) * addSourceWizardStepTwo, options, pf4 select list * createCredentialDialog, pf4 select list * dropdownSelect, use Curiosity pf4 select wrapper * locale, option strings refactor(dropdownSelect): discovery-152 pf4 dropdown (quipucords#130) feat(addCredentialType): discovery-152 button selector (quipucords#130) refactor(credentials): discovery-152, pf4 dropdown (quipucords#130) * credentials, pf4 button, addCredentialType * credentialsEmptyState, addCredentialType * locale, cred strings

author CD Cabrera <ccabrera@redhat.com> 1654528943 -0400 committer jenny-s51 <jshandel@redhat.com> 1659366125 -0400 fix(build): base dep package updates (quipucords#80) * build, base deps for dev functionality * build, stage, review, use pre-built image * testing, dist test, lint updates * styling, flip to sass, remove legacy css chore(build): node, workflow, docs, and tooling refs (quipucords#80) fix(build): npm updates (quipucords#80) fix(build): update react (quipucords#80) * build, update react 17, pf deps * testing, snapshots, console check fix(i18n): component loading (quipucords#80) chore(build): github badge, remove travis (quipucords#81) chore(build): post clean up, remove unused css copy (quipucords#84) fix(build): npm updates (quipucords#83) refactor(services): discovery-8 minor config restructure (quipucords#82) * service config, allow opts, fallback xhr timeout * api calls, config wrapper function, named imports refactor(redux): discovery-8 middleware, hooks, restructure (quipucords#82) * helpers, aggregatedError func for redux hooks * redux actions, named exports * redux hooks, useReactRedux * redux middleware, middleware export, multi-actions * store, move middleware, named export fix(build): npm update, redux middleware (quipucords#82) fix(build): discovery-8 allow repo locale files (quipucords#85) * docs, merge repo locale with docs locale files * helpers, expand noopTranslate, annotations * i18n, snapshot translate uses * i18nHelpers, translate helper, expand testing * testing, hook testing funcs fix(build): allow running review, stage parallel (quipucords#86) * build, parallel images, container names, domains * build, npm script, docker stop feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86) * build, pf4 npm updates * style, move base css files to index.scss * style, apply core pf4, overrides.scss fix(style): discovery-8 css, scss vars for color (quipucords#86) fix(testing): use i18n unit, remove integration check (quipucords#87) fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87) refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87) * aboutModal, pf4 component conversion * locales, about modal strings chore(build): do not start with stored data, db volumes (quipucords#107) chore(build): activate eslint jsdoc (quipucords#110) fix(pf4-style): expose scss variables (quipucords#110) feat(modal): discovery-148 pf4 modal wrapper (quipucords#110) * locales, modal default string * modal, consistent pf4 wrapper, allow backdrop disable refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88) * locale, button strings for modals * authentication, apply pf4 modal * confirmationModal, refactor using pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons * credentials, pf4 modal * mergeReportsDialog, pf modal, buttons * scans, pf4 modal * sources, pf4 modal refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108) refactor(authentication): discovery-148 pf4 alert, locale (quipucords#112) fix(confirmationModal): expand behavior, allow children (quipucords#113) refactor(authentication): discovery-148 replace empty-state (quipucords#113) refactor(credentials): discovery-148 pf4 empty-state (quipucords#116) * locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state refactor(refreshTimeButton): discovery-149 pf4 button, icon (quipucords#114) refactor(scans): discovery-148 pf4 empty-state (quipucords#117) * locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state fix(build): base dep package updates (quipucords#80) * build, base deps for dev functionality * build, stage, review, use pre-built image * testing, dist test, lint updates * styling, flip to sass, remove legacy css chore(build): node, workflow, docs, and tooling refs (quipucords#80) fix(build): npm updates (quipucords#80) fix(build): update react (quipucords#80) * build, update react 17, pf deps * testing, snapshots, console check fix(i18n): component loading (quipucords#80) chore(build): github badge, remove travis (quipucords#81) chore(build): post clean up, remove unused css copy (quipucords#84) fix(build): npm updates (quipucords#83) fix(build): npm update, redux middleware (quipucords#82) fix(build): discovery-8 allow repo locale files (quipucords#85) * docs, merge repo locale with docs locale files * helpers, expand noopTranslate, annotations * i18n, snapshot translate uses * i18nHelpers, translate helper, expand testing * testing, hook testing funcs fix(build): allow running review, stage parallel (quipucords#86) * build, parallel images, container names, domains * build, npm script, docker stop feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86) * build, pf4 npm updates * style, move base css files to index.scss * style, apply core pf4, overrides.scss fix(style): discovery-8 css, scss vars for color (quipucords#86) fix(testing): use i18n unit, remove integration check (quipucords#87) fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87) refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87) * aboutModal, pf4 component conversion * locales, about modal strings chore(build): do not start with stored data, db volumes (quipucords#107) chore(build): activate eslint jsdoc (quipucords#110) fix(pf4-style): expose scss variables (quipucords#110) feat(modal): discovery-148 pf4 modal wrapper (quipucords#110) * locales, modal default string * modal, consistent pf4 wrapper, allow backdrop disable refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88) * locale, button strings for modals * authentication, apply pf4 modal * confirmationModal, refactor using pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons * credentials, pf4 modal * mergeReportsDialog, pf modal, buttons * scans, pf4 modal * sources, pf4 modal refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108) fix(confirmationModal): expand behavior, allow children (quipucords#113) refactor(authentication): discovery-148 replace empty-state (quipucords#113) refactor(credentials): discovery-148 pf4 empty-state (quipucords#116) * locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state refactor(scans): discovery-148 pf4 empty-state (quipucords#117) * locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state refactor(toastNotificationsList): discovery-148, pf4 alert (quipucords#115) * build, dotenv toast timeout * components, adjust alertType to alert variant * helpers, expose toast timeout * toastNotificationsList, pf4 alert, alertGroup * toastNotificationsReducer, adjust pause, resume fix(testing): expand toastNotificationsList snapshots (quipucords#115) refactor(sources): discovery-148 pf4 empty-state (quipucords#120) * locale, add empty-state strings * sources, pf4 empty-state refactor(creds,sources,scans): discovery-149 emptyState grid (quipucords#121) * credentials, sources, scansEmptyState, remove grid fix(i18n): discovery-8 partial context into keys (quipucords#124) feat(wizard): discovery-153 pf4 wizard wrapper (quipucords#124) * confirmationModal, pass isContentOnly * modal, add isContentOnly, removes padding * wizard, consistent pf4 wrapper, allow modal sizing refactor(addSourceWizard): discovery-153, pf4 wizard (quipucords#124) * locale, wizard form strings * addSourceWizard, Constants, restructure steps * addSourceWizardStepThree, add empty-state * styling, restructure pf3 styling wizard form refactor(scanHostList): discovery-148, pf4 empty-state (quipucords#125) refactor(pagination): wip refactor(pagination): use PF4 component refactor(pagination): update snapshots refactor(pagination): update test refactor(pagination): update test refactor(creds,sources,scans): discovery-149 pf4 grid, list (quipucords#126) * credentialsListItem, grid to list, tooltip * credentials, removed grid * scanHostList, grid to list * scanSourceList nested list with icon * sourceCredentialsList, list with icon refactor(dropdownSelect): discovery-152 pf4 select, dropdown (quipucords#127) * addSourceWizardStepTwo, options, pf4 select list * createCredentialDialog, pf4 select list * dropdownSelect, use Curiosity pf4 select wrapper * locale, option strings refactor(dropdownSelect): discovery-152 pf4 dropdown (quipucords#130) feat(addCredentialType): discovery-152 button selector (quipucords#130) refactor(credentials): discovery-152, pf4 dropdown (quipucords#130) * credentials, pf4 button, addCredentialType * credentialsEmptyState, addCredentialType * locale, cred strings refactor(pagination): update snapshots

fix(build): base dep package updates (quipucords#80) * build, base deps for dev functionality * build, stage, review, use pre-built image * testing, dist test, lint updates * styling, flip to sass, remove legacy css chore(build): node, workflow, docs, and tooling refs (quipucords#80) fix(build): npm updates (quipucords#80) fix(build): update react (quipucords#80) * build, update react 17, pf deps * testing, snapshots, console check fix(i18n): component loading (quipucords#80) chore(build): github badge, remove travis (quipucords#81) chore(build): post clean up, remove unused css copy (quipucords#84) fix(build): npm updates (quipucords#83) refactor(services): discovery-8 minor config restructure (quipucords#82) * service config, allow opts, fallback xhr timeout * api calls, config wrapper function, named imports refactor(redux): discovery-8 middleware, hooks, restructure (quipucords#82) * helpers, aggregatedError func for redux hooks * redux actions, named exports * redux hooks, useReactRedux * redux middleware, middleware export, multi-actions * store, move middleware, named export fix(build): npm update, redux middleware (quipucords#82) fix(build): discovery-8 allow repo locale files (quipucords#85) * docs, merge repo locale with docs locale files * helpers, expand noopTranslate, annotations * i18n, snapshot translate uses * i18nHelpers, translate helper, expand testing * testing, hook testing funcs fix(build): allow running review, stage parallel (quipucords#86) * build, parallel images, container names, domains * build, npm script, docker stop feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86) * build, pf4 npm updates * style, move base css files to index.scss * style, apply core pf4, overrides.scss fix(style): discovery-8 css, scss vars for color (quipucords#86) fix(testing): use i18n unit, remove integration check (quipucords#87) fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87) refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87) * aboutModal, pf4 component conversion * locales, about modal strings chore(build): do not start with stored data, db volumes (quipucords#107) chore(build): activate eslint jsdoc (quipucords#110) fix(pf4-style): expose scss variables (quipucords#110) feat(modal): discovery-148 pf4 modal wrapper (quipucords#110) * locales, modal default string * modal, consistent pf4 wrapper, allow backdrop disable refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88) * locale, button strings for modals * authentication, apply pf4 modal * confirmationModal, refactor using pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons * credentials, pf4 modal * mergeReportsDialog, pf modal, buttons * scans, pf4 modal * sources, pf4 modal refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108) refactor(authentication): discovery-148 pf4 alert, locale (quipucords#112) fix(confirmationModal): expand behavior, allow children (quipucords#113) refactor(authentication): discovery-148 replace empty-state (quipucords#113) refactor(credentials): discovery-148 pf4 empty-state (quipucords#116) * locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state refactor(refreshTimeButton): discovery-149 pf4 button, icon (quipucords#114) refactor(scans): discovery-148 pf4 empty-state (quipucords#117) * locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state fix(build): base dep package updates (quipucords#80) * build, base deps for dev functionality * build, stage, review, use pre-built image * testing, dist test, lint updates * styling, flip to sass, remove legacy css chore(build): node, workflow, docs, and tooling refs (quipucords#80) fix(build): npm updates (quipucords#80) fix(build): update react (quipucords#80) * build, update react 17, pf deps * testing, snapshots, console check fix(i18n): component loading (quipucords#80) chore(build): github badge, remove travis (quipucords#81) chore(build): post clean up, remove unused css copy (quipucords#84) fix(build): npm updates (quipucords#83) fix(build): npm update, redux middleware (quipucords#82) fix(build): discovery-8 allow repo locale files (quipucords#85) * docs, merge repo locale with docs locale files * helpers, expand noopTranslate, annotations * i18n, snapshot translate uses * i18nHelpers, translate helper, expand testing * testing, hook testing funcs fix(build): allow running review, stage parallel (quipucords#86) * build, parallel images, container names, domains * build, npm script, docker stop feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86) * build, pf4 npm updates * style, move base css files to index.scss * style, apply core pf4, overrides.scss fix(style): discovery-8 css, scss vars for color (quipucords#86) fix(testing): use i18n unit, remove integration check (quipucords#87) fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87) refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87) * aboutModal, pf4 component conversion * locales, about modal strings chore(build): do not start with stored data, db volumes (quipucords#107) chore(build): activate eslint jsdoc (quipucords#110) fix(pf4-style): expose scss variables (quipucords#110) feat(modal): discovery-148 pf4 modal wrapper (quipucords#110) * locales, modal default string * modal, consistent pf4 wrapper, allow backdrop disable refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88) * locale, button strings for modals * authentication, apply pf4 modal * confirmationModal, refactor using pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons * credentials, pf4 modal * mergeReportsDialog, pf modal, buttons * scans, pf4 modal * sources, pf4 modal refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108) fix(confirmationModal): expand behavior, allow children (quipucords#113) refactor(authentication): discovery-148 replace empty-state (quipucords#113) refactor(credentials): discovery-148 pf4 empty-state (quipucords#116) * locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state refactor(scans): discovery-148 pf4 empty-state (quipucords#117) * locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state refactor(toastNotificationsList): discovery-148, pf4 alert (quipucords#115) * build, dotenv toast timeout * components, adjust alertType to alert variant * helpers, expose toast timeout * toastNotificationsList, pf4 alert, alertGroup * toastNotificationsReducer, adjust pause, resume fix(testing): expand toastNotificationsList snapshots (quipucords#115) refactor(sources): discovery-148 pf4 empty-state (quipucords#120) * locale, add empty-state strings * sources, pf4 empty-state refactor(creds,sources,scans): discovery-149 emptyState grid (quipucords#121) * credentials, sources, scansEmptyState, remove grid fix(i18n): discovery-8 partial context into keys (quipucords#124) feat(wizard): discovery-153 pf4 wizard wrapper (quipucords#124) * confirmationModal, pass isContentOnly * modal, add isContentOnly, removes padding * wizard, consistent pf4 wrapper, allow modal sizing refactor(addSourceWizard): discovery-153, pf4 wizard (quipucords#124) * locale, wizard form strings * addSourceWizard, Constants, restructure steps * addSourceWizardStepThree, add empty-state * styling, restructure pf3 styling wizard form refactor(scanHostList): discovery-148, pf4 empty-state (quipucords#125) refactor(pagination): wip refactor(pagination): use PF4 component refactor(pagination): update snapshots refactor(pagination): update test refactor(pagination): update test refactor(creds,sources,scans): discovery-149 pf4 grid, list (quipucords#126) * credentialsListItem, grid to list, tooltip * credentials, removed grid * scanHostList, grid to list * scanSourceList nested list with icon * sourceCredentialsList, list with icon refactor(dropdownSelect): discovery-152 pf4 select, dropdown (quipucords#127) * addSourceWizardStepTwo, options, pf4 select list * createCredentialDialog, pf4 select list * dropdownSelect, use Curiosity pf4 select wrapper * locale, option strings refactor(dropdownSelect): discovery-152 pf4 dropdown (quipucords#130) feat(addCredentialType): discovery-152 button selector (quipucords#130) refactor(credentials): discovery-152, pf4 dropdown (quipucords#130) * credentials, pf4 button, addCredentialType * credentialsEmptyState, addCredentialType * locale, cred strings refactor(pagination): update snapshots

* credentialsListItem, grid to list, tooltip * credentials, removed grid * scanHostList, grid to list * scanSourceList nested list with icon * sourceCredentialsList, list with icon

jenny-s51 changed the title ~~Grid conversion~~ Refactor(Grid): convert Grid instances to PF4 Jul 19, 2022

cdcabrera requested changes Jul 20, 2022

View reviewed changes

src/components/credentials/credentialListItem.js Outdated Show resolved Hide resolved

src/components/sources/sourceCredentialsList.js Outdated Show resolved Hide resolved

src/components/scanHostList/scanHostList.js Outdated Show resolved Hide resolved

jenny-s51 commented Jul 21, 2022

View reviewed changes

jenny-s51 force-pushed the gridConversion branch 3 times, most recently from df8c0f3 to c421dd1 Compare July 25, 2022 18:10

jenny-s51 force-pushed the gridConversion branch from fae3382 to 13a4310 Compare July 25, 2022 20:03

refactor(grid): tooltip area

99590ff

cdcabrera requested changes Jul 25, 2022

View reviewed changes

src/components/credentials/credentials.js Outdated Show resolved Hide resolved

src/components/scanHostList/scanHostList.js Outdated Show resolved Hide resolved

src/components/credentials/credentialListItem.js Show resolved Hide resolved

jenny-s51 added 2 commits July 26, 2022 15:01

refactor(grid): PR feedback from David

7c53f54

refactor(grid): more PR feedback, update tests

39f959c

refactor(grid): more PR feedback, update tests

a3d362d

cdcabrera approved these changes Jul 27, 2022

View reviewed changes

cdcabrera merged commit eb3ec2d into quipucords:dev Jul 27, 2022

cdcabrera added the pf4 Tracking for pf4 refactors label Jul 27, 2022

cdcabrera added this to Review in 2022 Refactor via automation Jul 27, 2022

cdcabrera moved this from Review to Done in 2022 Refactor Aug 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor(Grid): convert Grid instances to PF4 #126

Refactor(Grid): convert Grid instances to PF4 #126

jenny-s51 commented Jul 19, 2022 •

edited

cdcabrera commented Jul 20, 2022 •

edited

jenny-s51 commented Jul 20, 2022 •

edited

cdcabrera left a comment

jenny-s51 left a comment •

edited

codecov-commenter commented Jul 25, 2022 •

edited

cdcabrera left a comment

cdcabrera commented Jul 26, 2022 •

edited

Refactor(Grid): convert Grid instances to PF4 #126

Refactor(Grid): convert Grid instances to PF4 #126

Conversation

jenny-s51 commented Jul 19, 2022 • edited

What's included

How to test

Example

Updates issue/story

cdcabrera commented Jul 20, 2022 • edited

jenny-s51 commented Jul 20, 2022 • edited

cdcabrera left a comment

Choose a reason for hiding this comment

jenny-s51 left a comment • edited

Choose a reason for hiding this comment

codecov-commenter commented Jul 25, 2022 • edited

Codecov Report

cdcabrera left a comment

Choose a reason for hiding this comment

cdcabrera commented Jul 26, 2022 • edited

jenny-s51 commented Jul 19, 2022 •

edited

cdcabrera commented Jul 20, 2022 •

edited

jenny-s51 commented Jul 20, 2022 •

edited

jenny-s51 left a comment •

edited

codecov-commenter commented Jul 25, 2022 •

edited

cdcabrera commented Jul 26, 2022 •

edited