diff --git a/src/components/AccountStatus/AccountStatus.tsx b/src/components/AccountStatus/AccountStatus.tsx index 8330a91d9..fb626f347 100644 --- a/src/components/AccountStatus/AccountStatus.tsx +++ b/src/components/AccountStatus/AccountStatus.tsx @@ -12,12 +12,14 @@ interface StaffStatusProps { isActive: boolean; }; disabled: boolean; + label: React.ReactNode; onChange: (event: React.ChangeEvent) => void; } const StaffStatus: React.StatelessComponent = ({ data, disabled, + label, onChange }) => { const intl = useIntl(); @@ -37,10 +39,7 @@ const StaffStatus: React.StatelessComponent = ({ diff --git a/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx b/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx index 769802621..e35971d50 100644 --- a/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx +++ b/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx @@ -8,11 +8,14 @@ import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import { makeStyles } from "@material-ui/styles"; +import Link from "@saleor/components/Link"; import React from "react"; import { FormattedMessage } from "react-intl"; export interface ServiceDefaultTokenProps { + apiUri: string; token: string; + onApiUriClick: () => void; onTokenClose: () => void; } @@ -28,6 +31,12 @@ const useStyles = makeStyles( right: -theme.spacing.unit, top: -theme.spacing.unit }, + content: { + display: "grid", + gridColumnGap: theme.spacing.unit * 3 + "px", + gridTemplateColumns: "1fr 60px", + marginBottom: theme.spacing.unit * 3 + }, copy: { marginTop: theme.spacing.unit, position: "relative", @@ -39,12 +48,6 @@ const useStyles = makeStyles( }, root: { boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)" - }, - text: { - display: "grid", - gridColumnGap: theme.spacing.unit * 3 + "px", - gridTemplateColumns: "1fr 60px", - marginBottom: theme.spacing.unit * 3 } }), { @@ -57,16 +60,30 @@ function handleCopy(token: string) { } const ServiceDefaultToken: React.FC = props => { - const { token, onTokenClose } = props; + const { apiUri, token, onApiUriClick, onTokenClose } = props; const classes = useStyles(props); return ( -
- - - +
+
+ + + + + + {apiUri} + + ) + }} + /> + +
diff --git a/src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx b/src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx index 3f9745ba7..dad65167a 100644 --- a/src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx +++ b/src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx @@ -10,8 +10,10 @@ import ServiceDetailsPage, { } from "./ServiceDetailsPage"; const props: ServiceDetailsPageProps = { + apiUri: "https://example.com/graphql/", disabled: false, errors: [], + onApiUriClick: () => undefined, onBack: () => undefined, onDelete: () => undefined, onSubmit: () => undefined, diff --git a/src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx b/src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx index 05bc918b7..e0db04a4b 100644 --- a/src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx +++ b/src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx @@ -28,12 +28,14 @@ export interface ServiceDetailsPageFormData { permissions: PermissionEnum[]; } export interface ServiceDetailsPageProps { + apiUri: string; disabled: boolean; errors: UserError[]; permissions: ShopInfo_shop_permissions[]; saveButtonBarState: ConfirmButtonTransitionState; service: ServiceDetails_serviceAccount; token: string; + onApiUriClick: () => void; onBack: () => void; onTokenDelete: (id: string) => void; onDelete: () => void; @@ -44,12 +46,14 @@ export interface ServiceDetailsPageProps { const ServiceDetailsPage: React.FC = props => { const { + apiUri, disabled, errors: formErrors, permissions, saveButtonBarState, service, token, + onApiUriClick, onBack, onDelete, onTokenClose, @@ -92,7 +96,9 @@ const ServiceDetailsPage: React.FC = props => { {token && ( <> @@ -122,6 +128,10 @@ const ServiceDetailsPage: React.FC = props => {
diff --git a/src/services/views/ServiceDetails/ServiceDetails.tsx b/src/services/views/ServiceDetails/ServiceDetails.tsx index b7414c1d3..6232f1c0e 100644 --- a/src/services/views/ServiceDetails/ServiceDetails.tsx +++ b/src/services/views/ServiceDetails/ServiceDetails.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; +import { API_URI } from "@saleor/config"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; @@ -207,9 +208,11 @@ export const ServiceDetails: React.StatelessComponent = ({ title={maybe(() => data.serviceAccount.name)} /> open(API_URI, "blank")} onBack={handleBack} onDelete={() => openModal("remove")} onSubmit={handleSubmit} diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx index 811e9aaa7..a2ab4bdb0 100644 --- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx +++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx @@ -107,6 +107,10 @@ const StaffDetailsPage: React.StatelessComponent = ({