[NEW] Marketplace new app details page #24711
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I've implemented the visual part of the new tab navigation layout for the app details page. E.G.: a tab component with 3 tab items(Details, Logs and Settings) on the app details page. Will be implementing the logical part of this next.
I've changed the settings page max-width so that it fits better with figma.
I've implemented the necessary logic for the app details page tabs component to change the page content based on the selected tab. Also, I've created an AppDetailsPageHeader to improve readability in the AppDetailsPage component.
Fixed a typo on the AppDetailsPageHeader on which the AppMenu component was receiving a unexistent prop. Also, implemented a helper function to improve readability of the Tabs.item onClick function. Wrong prop being sent to the AppMenu component which caused the logs not to be shown correctly
Executed a meteor npm install to update the installed package.json dependencies and solve type errors that were breaking the build tests.
rique223
changed the title
ujorgeleite
previously requested changes
Mar 8, 2022
Solved the problems pointed out in the reviews on GitHub. Changed some variable names for readability, changed some conditional blocks for brevity, and added some extra measures to avoid null exceptions. -should prefix on
* feat: ✨ Change visible logic for app details tab navigation Changed the way the enabled tab flags work instead of just disabling the logs and settings tabs when an app is not installed it will not render the tabs at all. * refactor: ♻️ Componentize app details header Created a standalone component for the app header on the app details page called AppDetailsHeader.tsx in order to improve readability and code organization. * feat: 🚧 Create first part of new header style Some changes on the app header layout, added placeholder description, changed "metadata" layout, created placeholder chip for bundles and changed title size. Will be implementing the rest of the header soon. * feat: 🚧 Create second part of new app details header style Created the logic for the bundle's chips, integrated the app description to the header, and implemented the date formating to track the last time an app update happened * feat: 🚧 Create third part of new app details header Implemented the new Button + Data badge price display, implemented new install button titles based on app purchase type, implemented new +* information in the price section of tier-based subscription apps, implemented new enabled/disabled statuses based on the data badge component, and made so that the data badge doesn't show on the AppsTable using the isAppDetailsPage flag. * feat: ✨ Create fourth and last part of new app details page header Implemented a tooltip component for the Bundle Chip using the PositionAnimated and Tooltip fuselage components together with the onMouseEnter and onMouseLeave react events. * fix: 🐛 Fix non-translated strings on app details header Added some non-translated strings to the i18n dictionary and removed a console.log. 1. Non-translated strings on the code; * fix: 🐛 Solving more translation problems Added the dynamic translation string to the last updated metadata 1. Non translated string on the metadata section of the app details header * refactor: ♻️ Componentize app details header bundle chips Created a standalone component for the bundle chips of the app details header and solved a little typo in the i18n entry for the chips text. 1. Typo in i18n dictionary
…ab-navigation-app-details
Re-added missing entries to the i18n dictionary that were deleted during merge procedures.
Changed the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions toChanged the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions to fit better with the new container. fit better with the new container.
Changed the design for the page header of the app details page from a title on the left with a save and back button on the right to an back arrow icon on the left side of the title with the save button still on the right. Also changed the title of the page from App details to Back.
* fix: 🐛 Fix missing entry on i18n dictionary Added a missing entry to the i18n dictionary that was lost on a branch merge. 1. Missing translation entry * feat: ✨ Implement markdown parser on the app details page description Implemented the MarkdownText.tsx component on the app details page description. Also changed the App class type so that it would bring the detailedDescription object and changed some of the app details page content layout to better follow the proposed design. * Eslint * refactor: ♻️ Change MarkdownText use to detailedDescription.rendered Changed the method of rendering markdown on the app details page description, now it uses the dangerouslysetinnerhtml prop of the description box component. * refactor: ♻️ Refactoring some code for reviews Changed some booleans orders and removed an unnecessary eslint exception
Added some missing entries to the i18n dictionary that were removed during a conflict fix.
…ab-navigation-app-details
Re add some entries that were removed on merge
…ab-navigation-app-details
dougfabris
force-pushed
the
feat/marketplace-tab-navigation-app-details
branch
from
f1db468 to
a5569c7
Compare
* feat: 🚧 Create visual part of new slider component anchor
Implemented the visual part of the new slider anchor, will be integrating it with the API soon.
* feat: 🚧 Finish probable visual part of app details carousel
Finished what probably will be the visual part of the new app details page carousel, with mocked data, since the screenshots endpoint doesn't exist yet. Also created a preamptive function for fetching the screenshots for when the endpoint is ready for usage. Also tried a first iteration of arrow navigation on the carousel, will be finishing it soon.
* Eslint
* feat: ✨ Finish new carousel ui
Finished the new app details page carousel ui, now it counts with a hover transition on the screenshots preview image, auto passing of screenshots also on the preview, keyboard arrow navigation, and closing with the ESC key on the slider. Besides that, I've refactored some code for maintainability.
* Eslint
* feat: ✨ Integrate carousel with /screenshots endpoint
Integrated the new carousel component with the newly exposed apps/${appId}/screenshots endpoint and removed the mock data. Now only the apps with registered screenshots will show them on the component. If the app doesn't have screenshots, it shows nothing where the carousel should be.
* refactor: ♻️ Solve reviews
Refactored the way rendering works for the screenshot list inside of the ScreenshotCarousel for maintainability's sake.
* chore: fix merge
* chore: fix lint
* fix: rest externalComponents
* fix: 🐛 Solve useEndpoint typos
Solved some typos on some useEndpoint endpoints, refactored the way the screenshots are received and deleted some useless code.
Co-authored-by: dougfabris <devfabris@gmail.com>
…ab-navigation-app-details
ggazzo
requested changes
May 23, 2022
dougfabris
force-pushed
the
feat/marketplace-tab-navigation-app-details
branch
from
8029b94 to
5f0183e
Compare
Refactored the AppDetailsPage tab selection logic, changed some routing logic to work with it, changed lastUpdated on AppDetailsHeader to not have undefined error.
dougfabris
force-pushed
the
feat/marketplace-tab-navigation-app-details
branch
from
21e6318 to
ff9f8a2
Compare
ggazzo
approved these changes
May 23, 2022
ggazzo
added a commit
that referenced
this pull request
May 24, 2022
* feat: ✨ Implement tab navigation on app details page I've implemented the visual part of the new tab navigation layout for the app details page. E.G.: a tab component with 3 tab items(Details, Logs and Settings) on the app details page. Will be implementing the logical part of this next. * refactor: ♻️ Change settings page style I've changed the settings page max-width so that it fits better with figma. * feat: ✨ Implement tab navigation on app details page(Logic) I've implemented the necessary logic for the app details page tabs component to change the page content based on the selected tab. Also, I've created an AppDetailsPageHeader to improve readability in the AppDetailsPage component. * Updated package-lock with new package.json * fix: 🐛 Fix logs not showing bug Fixed a typo on the AppDetailsPageHeader on which the AppMenu component was receiving a unexistent prop. Also, implemented a helper function to improve readability of the Tabs.item onClick function. Wrong prop being sent to the AppMenu component which caused the logs not to be shown correctly * fix: 🐛 Install necessary type dependencies Executed a meteor npm install to update the installed package.json dependencies and solve type errors that were breaking the build tests. * refactor: ♻️ Solve reviews Solved the problems pointed out in the reviews on GitHub. Changed some variable names for readability, changed some conditional blocks for brevity, and added some extra measures to avoid null exceptions. -should prefix on * [NEW] Create marketplace app details page new header (#24880) * feat: ✨ Change visible logic for app details tab navigation Changed the way the enabled tab flags work instead of just disabling the logs and settings tabs when an app is not installed it will not render the tabs at all. * refactor: ♻️ Componentize app details header Created a standalone component for the app header on the app details page called AppDetailsHeader.tsx in order to improve readability and code organization. * feat: 🚧 Create first part of new header style Some changes on the app header layout, added placeholder description, changed "metadata" layout, created placeholder chip for bundles and changed title size. Will be implementing the rest of the header soon. * feat: 🚧 Create second part of new app details header style Created the logic for the bundle's chips, integrated the app description to the header, and implemented the date formating to track the last time an app update happened * feat: 🚧 Create third part of new app details header Implemented the new Button + Data badge price display, implemented new install button titles based on app purchase type, implemented new +* information in the price section of tier-based subscription apps, implemented new enabled/disabled statuses based on the data badge component, and made so that the data badge doesn't show on the AppsTable using the isAppDetailsPage flag. * feat: ✨ Create fourth and last part of new app details page header Implemented a tooltip component for the Bundle Chip using the PositionAnimated and Tooltip fuselage components together with the onMouseEnter and onMouseLeave react events. * fix: 🐛 Fix non-translated strings on app details header Added some non-translated strings to the i18n dictionary and removed a console.log. 1. Non-translated strings on the code; * fix: 🐛 Solving more translation problems Added the dynamic translation string to the last updated metadata 1. Non translated string on the metadata section of the app details header * refactor: ♻️ Componentize app details header bundle chips Created a standalone component for the bundle chips of the app details header and solved a little typo in the i18n entry for the chips text. 1. Typo in i18n dictionary * fix: 🐛 Re-add missing translation entries to the i18n dictionary Re-added missing entries to the i18n dictionary that were deleted during merge procedures. * feat: ✨ Change logs from page to tab (#24952) Changed the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions toChanged the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions to fit better with the new container. fit better with the new container. * feat: ✨ Change app details page header design (#24997) Changed the design for the page header of the app details page from a title on the left with a save and back button on the right to an back arrow icon on the left side of the title with the save button still on the right. Also changed the title of the page from App details to Back. * Eslint * [NEW] Description tab marketplace (#25153) * fix: 🐛 Fix missing entry on i18n dictionary Added a missing entry to the i18n dictionary that was lost on a branch merge. 1. Missing translation entry * feat: ✨ Implement markdown parser on the app details page description Implemented the MarkdownText.tsx component on the app details page description. Also changed the App class type so that it would bring the detailedDescription object and changed some of the app details page content layout to better follow the proposed design. * Eslint * refactor: ♻️ Change MarkdownText use to detailedDescription.rendered Changed the method of rendering markdown on the app details page description, now it uses the dangerouslysetinnerhtml prop of the description box component. * refactor: ♻️ Refactoring some code for reviews Changed some booleans orders and removed an unnecessary eslint exception * fix: 🐛 Fix missing entries to i18n dictionary Added some missing entries to the i18n dictionary that were removed during a conflict fix. * fix: 🐛 Re-add removed i18n dictionaries Re add some entries that were removed on merge * chore: fix ts * [NEW] Carousel component app details (#25338) * feat: 🚧 Create visual part of new slider component anchor Implemented the visual part of the new slider anchor, will be integrating it with the API soon. * feat: 🚧 Finish probable visual part of app details carousel Finished what probably will be the visual part of the new app details page carousel, with mocked data, since the screenshots endpoint doesn't exist yet. Also created a preamptive function for fetching the screenshots for when the endpoint is ready for usage. Also tried a first iteration of arrow navigation on the carousel, will be finishing it soon. * Eslint * feat: ✨ Finish new carousel ui Finished the new app details page carousel ui, now it counts with a hover transition on the screenshots preview image, auto passing of screenshots also on the preview, keyboard arrow navigation, and closing with the ESC key on the slider. Besides that, I've refactored some code for maintainability. * Eslint * feat: ✨ Integrate carousel with /screenshots endpoint Integrated the new carousel component with the newly exposed apps/${appId}/screenshots endpoint and removed the mock data. Now only the apps with registered screenshots will show them on the component. If the app doesn't have screenshots, it shows nothing where the carousel should be. * refactor: ♻️ Solve reviews Refactored the way rendering works for the screenshot list inside of the ScreenshotCarousel for maintainability's sake. * chore: fix merge * chore: fix lint * fix: rest externalComponents * fix: 🐛 Solve useEndpoint typos Solved some typos on some useEndpoint endpoints, refactored the way the screenshots are received and deleted some useless code. Co-authored-by: dougfabris <devfabris@gmail.com> * fix: reviews Refactored the AppDetailsPage tab selection logic, changed some routing logic to work with it, changed lastUpdated on AppDetailsHeader to not have undefined error. Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com> Co-authored-by: dougfabris <devfabris@gmail.com>
ggazzo
added a commit
that referenced
this pull request
May 30, 2022
* feat: ✨ Implement tab navigation on app details page I've implemented the visual part of the new tab navigation layout for the app details page. E.G.: a tab component with 3 tab items(Details, Logs and Settings) on the app details page. Will be implementing the logical part of this next. * refactor: ♻️ Change settings page style I've changed the settings page max-width so that it fits better with figma. * feat: ✨ Implement tab navigation on app details page(Logic) I've implemented the necessary logic for the app details page tabs component to change the page content based on the selected tab. Also, I've created an AppDetailsPageHeader to improve readability in the AppDetailsPage component. * Updated package-lock with new package.json * fix: 🐛 Fix logs not showing bug Fixed a typo on the AppDetailsPageHeader on which the AppMenu component was receiving a unexistent prop. Also, implemented a helper function to improve readability of the Tabs.item onClick function. Wrong prop being sent to the AppMenu component which caused the logs not to be shown correctly * fix: 🐛 Install necessary type dependencies Executed a meteor npm install to update the installed package.json dependencies and solve type errors that were breaking the build tests. * refactor: ♻️ Solve reviews Solved the problems pointed out in the reviews on GitHub. Changed some variable names for readability, changed some conditional blocks for brevity, and added some extra measures to avoid null exceptions. -should prefix on * [NEW] Create marketplace app details page new header (#24880) * feat: ✨ Change visible logic for app details tab navigation Changed the way the enabled tab flags work instead of just disabling the logs and settings tabs when an app is not installed it will not render the tabs at all. * refactor: ♻️ Componentize app details header Created a standalone component for the app header on the app details page called AppDetailsHeader.tsx in order to improve readability and code organization. * feat: 🚧 Create first part of new header style Some changes on the app header layout, added placeholder description, changed "metadata" layout, created placeholder chip for bundles and changed title size. Will be implementing the rest of the header soon. * feat: 🚧 Create second part of new app details header style Created the logic for the bundle's chips, integrated the app description to the header, and implemented the date formating to track the last time an app update happened * feat: 🚧 Create third part of new app details header Implemented the new Button + Data badge price display, implemented new install button titles based on app purchase type, implemented new +* information in the price section of tier-based subscription apps, implemented new enabled/disabled statuses based on the data badge component, and made so that the data badge doesn't show on the AppsTable using the isAppDetailsPage flag. * feat: ✨ Create fourth and last part of new app details page header Implemented a tooltip component for the Bundle Chip using the PositionAnimated and Tooltip fuselage components together with the onMouseEnter and onMouseLeave react events. * fix: 🐛 Fix non-translated strings on app details header Added some non-translated strings to the i18n dictionary and removed a console.log. 1. Non-translated strings on the code; * fix: 🐛 Solving more translation problems Added the dynamic translation string to the last updated metadata 1. Non translated string on the metadata section of the app details header * refactor: ♻️ Componentize app details header bundle chips Created a standalone component for the bundle chips of the app details header and solved a little typo in the i18n entry for the chips text. 1. Typo in i18n dictionary * fix: 🐛 Re-add missing translation entries to the i18n dictionary Re-added missing entries to the i18n dictionary that were deleted during merge procedures. * feat: ✨ Change logs from page to tab (#24952) Changed the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions toChanged the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions to fit better with the new container. fit better with the new container. * feat: ✨ Change app details page header design (#24997) Changed the design for the page header of the app details page from a title on the left with a save and back button on the right to an back arrow icon on the left side of the title with the save button still on the right. Also changed the title of the page from App details to Back. * Eslint * [NEW] Description tab marketplace (#25153) * fix: 🐛 Fix missing entry on i18n dictionary Added a missing entry to the i18n dictionary that was lost on a branch merge. 1. Missing translation entry * feat: ✨ Implement markdown parser on the app details page description Implemented the MarkdownText.tsx component on the app details page description. Also changed the App class type so that it would bring the detailedDescription object and changed some of the app details page content layout to better follow the proposed design. * Eslint * refactor: ♻️ Change MarkdownText use to detailedDescription.rendered Changed the method of rendering markdown on the app details page description, now it uses the dangerouslysetinnerhtml prop of the description box component. * refactor: ♻️ Refactoring some code for reviews Changed some booleans orders and removed an unnecessary eslint exception * fix: 🐛 Fix missing entries to i18n dictionary Added some missing entries to the i18n dictionary that were removed during a conflict fix. * fix: 🐛 Re-add removed i18n dictionaries Re add some entries that were removed on merge * chore: fix ts * [NEW] Carousel component app details (#25338) * feat: 🚧 Create visual part of new slider component anchor Implemented the visual part of the new slider anchor, will be integrating it with the API soon. * feat: 🚧 Finish probable visual part of app details carousel Finished what probably will be the visual part of the new app details page carousel, with mocked data, since the screenshots endpoint doesn't exist yet. Also created a preamptive function for fetching the screenshots for when the endpoint is ready for usage. Also tried a first iteration of arrow navigation on the carousel, will be finishing it soon. * Eslint * feat: ✨ Finish new carousel ui Finished the new app details page carousel ui, now it counts with a hover transition on the screenshots preview image, auto passing of screenshots also on the preview, keyboard arrow navigation, and closing with the ESC key on the slider. Besides that, I've refactored some code for maintainability. * Eslint * feat: ✨ Integrate carousel with /screenshots endpoint Integrated the new carousel component with the newly exposed apps/${appId}/screenshots endpoint and removed the mock data. Now only the apps with registered screenshots will show them on the component. If the app doesn't have screenshots, it shows nothing where the carousel should be. * refactor: ♻️ Solve reviews Refactored the way rendering works for the screenshot list inside of the ScreenshotCarousel for maintainability's sake. * chore: fix merge * chore: fix lint * fix: rest externalComponents * fix: 🐛 Solve useEndpoint typos Solved some typos on some useEndpoint endpoints, refactored the way the screenshots are received and deleted some useless code. Co-authored-by: dougfabris <devfabris@gmail.com> * fix: reviews Refactored the AppDetailsPage tab selection logic, changed some routing logic to work with it, changed lastUpdated on AppDetailsHeader to not have undefined error. Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com> Co-authored-by: dougfabris <devfabris@gmail.com>
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed changes (including videos or screenshots)
Change the app details page layout for the new marketplace UI. General Task: MKP12 - New UI - App Detail Page
MKP12 - Tab Navigation
New tab navigation layout for the app details page. Now the app details page is divided into three sections, details, logs, and settings, that can each be accessed through a Tabs fuselage component.
Demo gif:
MKP12 - Header
Implemented a new header for the marketplaces app details page.
-Changed the size of the app name;
-Implemented the app description field on the header;
-Changed the "metadata" section of the header(The part with the version and author information) now it also shows the last time the app was updated;
-Created a chip that will show when an app is part of one or more bundles and inform which are the bundles;
-Implemented a tooltip for the bundle chips;
-Created a new button + data badge component to substitute the current App Status;
-Changed the title of the "purchase button". Now it shows different text based on the "purchase type" of the app;
-Created a new Pricing & Status display which shows the price when the app is not bought/installed and shows the app status(Enabled/Disabled) when it is bought/installed;
-Changed the way the tabs are rendered, now if the app is not installed(and consequently doesn't have logs and settings tab) it will not render these tabs;
Demo gif:
MKP12 - Configuration Tab
Delivered together with the tab-navigation task. Changed the app settings from the details of the app to the new settings tab.
Demo image:
MKP12 - Log Tab
Changed the place of the app logs from the page to the new logs tab. Also changed some styles of the logs accordions to fit better with the new container.
Before:
After
MKP12 - Page Header
Changed the design for the page header of the app details page from a title on the left with a save and back button on the right to a back arrow icon on the left side of the title with the save button still on the right. Also changed the title of the page from App details to Back.
Edit: After some design reconsideration, the page title was changed to App Info.
Demo gif:
MKP12 - Detail Tab
Implemented markdown on the description section of the app details page, now the description will show the detailedDescription.rendered (as rendered JSX) information in case it exists and show the description (a.k.a. short description) information in case it doesn't. Unfortunately, as of right now no app has a visual example of a markdown description and because of that, I will not be able to provide a demo image/gif for this PR.
MKP12 - Slider Component
Created an image carousel component on the app details page. This component receives images from the apps/appId/screenshots endpoint and shows them on the content section of the app details of any apps that have screenshots registered, if the app has no screenshots it simply shows nothing where the carousel should be. This component is complete with keyboard arrow navigation on the "open" carousel, hover highlight on the carousel preview and close on esc press.
Demo gif:
Issue(s)
Steps to test or reproduce
Further comments