feat: integrations onboarding #5497
Conversation
# Conflicts: # frontend/common/utils/utils.tsx
# Conflicts: # frontend/web/styles/_variables.scss
# Conflicts: # frontend/common/types/requests.ts # frontend/common/types/responses.ts
# Conflicts: # frontend/common/types/responses.ts
# Conflicts: # frontend/common/types/requests.ts # frontend/common/types/responses.ts # frontend/common/utils/utils.tsx # frontend/web/components/pages/HomeAside.tsx # frontend/web/components/pages/HomePage.js # frontend/web/project/api.js
flagsmith
bot
added
the
flagsmith flag
|
Flagsmith feature linked:
|
|
Flagsmith Feature
|
github-actions
bot
added
feature
| onClick={() => { | ||
| setShowCustomTool(false) | ||
| setSelected(selected.concat([customTool])) | ||
| }} |
There was a problem hiding this comment.
I'd just reset the state setCustomTool here so if you open it again it's empty
| </div> | ||
| </div> | ||
| <hr className='mb-5 mt-0' /> | ||
| <div className='sticky d-flex justify-content-end gap-4'> |
There was a problem hiding this comment.
I don't know why the stickiness is not working when on a sub category. So we don't see the buttons it can be a bit confusing if you have some time to get why
| const skip = () => | ||
| updateTools({ | ||
| tools: { | ||
| completed: true, | ||
| integrations: [], | ||
| }, | ||
| }).then(onComplete) | ||
| const submit = () => | ||
| updateTools({ | ||
| tools: { | ||
| completed: true, | ||
| integrations: selected, | ||
| }, | ||
| }).then(onComplete) |
There was a problem hiding this comment.
Are you fine with using async await syntax here ?
| onComplete: () => void | ||
| } | ||
|
|
||
| const integrationSummaries: IntegrationSummary[] = [ |
There was a problem hiding this comment.
Can we put them in a separate data/constant file to light up the file ?
| title: 'SumoLogic', | ||
| }, | ||
| ] | ||
| const categoryDescriptions: Record< |
| if (!integrationsData) { | ||
| return [] as typeof integrationSummaries | ||
| } | ||
| const parsed = Object.values(JSON.parse(integrationsData)).concat( |
There was a problem hiding this comment.
Can we find a more self-explanatory name like parsedCategories
| // Initialize search as an empty string | ||
| const [search, setSearch] = useState<string>('') | ||
| const integrationsData = Utils.getFlagsmithValue('integration_data') | ||
| const [category, setCategory] = useState<string>(ALL_CATEGORY) |
There was a problem hiding this comment.
We could rename it to selectedCategory, setSelectedCategory do not mix in case of using a map
| return sortBy(filtered, 'title') as typeof integrationSummaries | ||
| }, [integrationsData, category, search]) | ||
|
|
||
| const [selected, setSelected] = useState<string[]>([]) |
There was a problem hiding this comment.
Same if you don't mind to rename to something like selectedIntegrations
| if (isSelected) { | ||
| setSelected( | ||
| selected.filter( | ||
| (selectedItem) => selectedItem !== v.title, | ||
| ), | ||
| ) | ||
| } else { | ||
| setSelected(selected.concat(v.title)) | ||
| } |
There was a problem hiding this comment.
We might put it in its own handler above to have the logic isolated
# Conflicts: # frontend/common/types/requests.ts # frontend/common/types/responses.ts # frontend/e2e/tests/initialise-tests.ts # frontend/web/components/App.js # frontend/web/components/onboarding/GettingStartedResource.tsx # frontend/web/components/onboarding/data/onboarding.data.tsx # frontend/web/components/pages/CreateOrganisationPage.js # frontend/web/components/pages/GettingStartedPage.tsx # frontend/web/components/pages/HomeAside.tsx # frontend/web/components/pages/IntegrationsPage.tsx # frontend/web/styles/project/_project-nav.scss # frontend/web/styles/project/_utils.scss
github-actions
bot
added
feature
github-actions
bot
added
feature
…rations-onboarding
|
Flagsmith Feature
|
|
Flagsmith Feature
|
|
Flagsmith Feature Segment
|
github-actions
bot
added
feature
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature!Changes
How did you test this code?
Please describe.