[NEW] Create marketplace app details page new header #24880
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
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.
Created a standalone component for the app header on the app details page called AppDetailsHeader.tsx in order to improve readability and code organization.
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.
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
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.
Implemented a tooltip component for the Bundle Chip using the PositionAnimated and Tooltip fuselage components together with the onMouseEnter and onMouseLeave react events.
Added some non-translated strings to the i18n dictionary and removed a console.log. 1. Non-translated strings on the code;
Added the dynamic translation string to the last updated metadata 1. Non translated string on the metadata section of the app details header
ujorgeleite
suggested changes
Mar 21, 2022
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
ujorgeleite
approved these changes
Mar 24, 2022
casalsgh
pushed a commit
that referenced
this pull request
May 23, 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 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>
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)
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;
Demo gif:
Issue(s)
Steps to test or reproduce
Further comments