-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add contextual links to some list views and Playground panel (#5312)
* add contextual links * contextual links * add tracking * changesets * i18n fix * remove fragment * type fix * small UI fixes --------- Co-authored-by: Paweł Chyła <chyla1988@gmail.com>
- Loading branch information
Showing
15 changed files
with
298 additions
and
22 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "saleor-dashboard": patch | ||
| --- | ||
|
|
||
| You can now see contextual links to documentation in product, webhooks, order, staff members lists and Graphql Playground panel. |
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
41 changes: 41 additions & 0 deletions
41
src/components/AppLayout/ContextualLinks/ContextualLine.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { Box, Paragraph, TextProps } from "@saleor/macaw-ui-next"; | ||
| import React from "react"; | ||
|
|
||
| const Root = ({ children, ...rest }: TextProps) => ( | ||
| <Paragraph | ||
| width="100%" | ||
| color="default2" | ||
| fontWeight="medium" | ||
| fontSize={2} | ||
| paddingBottom={2} | ||
| paddingTop={1} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </Paragraph> | ||
| ); | ||
|
|
||
| const ContextualLineLink = ({ | ||
| href, | ||
| children, | ||
| onClick, | ||
| }: { | ||
| href: string; | ||
| children: React.ReactNode; | ||
| onClick?: () => void; | ||
| }) => ( | ||
| <Box | ||
| as="a" | ||
| textDecoration="underline" | ||
| href={href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| onClick={onClick} | ||
| > | ||
| {children} | ||
| </Box> | ||
| ); | ||
|
|
||
| export const ContextualLine = Object.assign(Root, { | ||
| Link: ContextualLineLink, | ||
| }); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { defineMessages } from "react-intl"; | ||
|
|
||
| export const contextualLinks = defineMessages({ | ||
| devModePanel: { | ||
| defaultMessage: "Learn more about {apiReference} and view {apiGuide}", | ||
| id: "zRIsjN", | ||
| }, | ||
| apiReference: { | ||
| defaultMessage: "API reference", | ||
| id: "Zvo5iu", | ||
| }, | ||
| apiGuide: { | ||
| defaultMessage: "API guide", | ||
| id: "BA4leV", | ||
| }, | ||
| webhooks: { | ||
| defaultMessage: "Learn more about {extendingSaleor}", | ||
| id: "zT1CvH", | ||
| }, | ||
| extendingSaleor: { | ||
| defaultMessage: "extending Saleor with Webhooks", | ||
| id: "B8PvdI", | ||
| }, | ||
| staffMembers: { | ||
| defaultMessage: "Learn more about {userPermissions}", | ||
| id: "19o9WS", | ||
| }, | ||
| userPermissions: { | ||
| defaultMessage: "User permissions", | ||
| id: "5M+hLZ", | ||
| }, | ||
| orders: { | ||
| defaultMessage: "Learn more about {orderManagement}", | ||
| id: "tl1/1E", | ||
| }, | ||
| orderManagement: { | ||
| defaultMessage: "order management", | ||
| id: "91vQMc", | ||
| }, | ||
| products: { | ||
| defaultMessage: "Learn more about {productConfigurations}", | ||
| id: "C9cgck", | ||
| }, | ||
| productConfigurations: { | ||
| defaultMessage: "product configurations", | ||
| id: "dVk241", | ||
| }, | ||
| }); |
95 changes: 95 additions & 0 deletions
95
src/components/AppLayout/ContextualLinks/useContextualLink.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { useAnalytics } from "@dashboard/components/ProductAnalytics/useAnalytics"; | ||
| import { | ||
| API_GUIDE_DOCS, | ||
| API_REFERENCE_DOCS, | ||
| EXTENDING_WITH_WEBHOOKS_DOCS_URL, | ||
| ORDER_MANAGEMENT_DOCS_URL, | ||
| PRODUCT_CONFIGURATION_DOCS_URL, | ||
| USER_PERMISSIONS_DOCS_URL, | ||
| } from "@dashboard/links"; | ||
| import * as React from "react"; | ||
| import { useIntl } from "react-intl"; | ||
|
|
||
| import { ContextualLine } from "./ContextualLine"; | ||
| import { contextualLinks } from "./messages"; | ||
|
|
||
| type SubtitleType = | ||
| | "extending_saleor" | ||
| | "product_list" | ||
| | "order_list" | ||
| | "dev_panel" | ||
| | "webhooks_events" | ||
| | "staff_members"; | ||
|
|
||
| const EVENT = "contextual_link_clicked"; | ||
|
|
||
| export const useContextualLink = (type: SubtitleType) => { | ||
| const { trackEvent: track } = useAnalytics(); | ||
| const intl = useIntl(); | ||
| const trackEvent = (type: string) => track(EVENT, { type }); | ||
|
|
||
| switch (type) { | ||
| case "staff_members": | ||
| return intl.formatMessage(contextualLinks.staffMembers, { | ||
| userPermissions: ( | ||
| <ContextualLine.Link | ||
| href={USER_PERMISSIONS_DOCS_URL} | ||
| onClick={() => trackEvent("user_permissions_docs")} | ||
| > | ||
| {intl.formatMessage(contextualLinks.userPermissions)} | ||
| </ContextualLine.Link> | ||
| ), | ||
| }); | ||
| case "extending_saleor": | ||
| return intl.formatMessage(contextualLinks.webhooks, { | ||
| extendingSaleor: ( | ||
| <ContextualLine.Link | ||
| href={EXTENDING_WITH_WEBHOOKS_DOCS_URL} | ||
| onClick={() => trackEvent("extending_saleor_docs")} | ||
| > | ||
| {intl.formatMessage(contextualLinks.extendingSaleor)} | ||
| </ContextualLine.Link> | ||
| ), | ||
| }); | ||
| case "dev_panel": | ||
| return intl.formatMessage(contextualLinks.devModePanel, { | ||
| apiReference: ( | ||
| <ContextualLine.Link | ||
| href={API_REFERENCE_DOCS} | ||
| onClick={() => trackEvent("api_reference_docs")} | ||
| > | ||
| {intl.formatMessage(contextualLinks.apiReference)} | ||
| </ContextualLine.Link> | ||
| ), | ||
| apiGuide: ( | ||
| <ContextualLine.Link href={API_GUIDE_DOCS} onClick={() => trackEvent("api_guide_docs")}> | ||
| {intl.formatMessage(contextualLinks.apiGuide)} | ||
| </ContextualLine.Link> | ||
| ), | ||
| }); | ||
| case "order_list": | ||
| return intl.formatMessage(contextualLinks.orders, { | ||
| orderManagement: ( | ||
| <ContextualLine.Link | ||
| href={ORDER_MANAGEMENT_DOCS_URL} | ||
| onClick={() => trackEvent("order_management_docs")} | ||
| > | ||
| {intl.formatMessage(contextualLinks.orderManagement)} | ||
| </ContextualLine.Link> | ||
| ), | ||
| }); | ||
| case "product_list": | ||
| return intl.formatMessage(contextualLinks.products, { | ||
| productConfigurations: ( | ||
| <ContextualLine.Link | ||
| href={PRODUCT_CONFIGURATION_DOCS_URL} | ||
| onClick={() => trackEvent("product_configuration_docs")} | ||
| > | ||
| {intl.formatMessage(contextualLinks.productConfigurations)} | ||
| </ContextualLine.Link> | ||
| ), | ||
| }); | ||
| default: | ||
| return null; | ||
| } | ||
| }; |
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
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
Oops, something went wrong.