\n \n\n {tokens.map((line, lineNumber) => {\n const { className: linePropClassName } = getLineProps({\n line,\n key: lineNumber,\n });\n\n return (\n // eslint-disable-next-line react/jsx-key\n \n {lineNumber + 1}\n {line.map((token, key) => (\n // eslint-disable-next-line react/jsx-key\n \n ))}\n \n );\n })}\n \n )}\n \n ) : (\n \n \n {theme.direction === 'rtl' ? \n {theme.direction === 'rtl' ? \n = Math.ceil(count / rowsPerPage) - 1}\n aria-label=\"next page\"\n >\n {theme.direction === 'rtl' ? = Math.ceil(count / rowsPerPage) - 1}\n aria-label=\"last page\"\n >\n {theme.direction === 'rtl' ?
\n );\n}\n\nconst useStylesCommentsTable = makeStyles((theme: Theme) =>\n createStyles({\n table: {\n minWidth: 200,\n },\n tableCell: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiCommentCreator,\n paddingRight: theme.spacing(1),\n },\n tableCellContent: {\n paddingRight: theme.spacing(1),\n ...theme.custom.apiOverviewPage.tabs.overview.apiCommentsCellContent\n },\n commentDeleteBtn: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiCommentsDeleteButton\n },\n cmntDelConfirmText: {\n padding: theme.spacing(2),\n ...theme.custom.apiOverviewPage.tabs.overview.apiCommentDeleteConfirmText\n },\n commentDelConfirm: {\n margin: '5px',\n }\n }));\n\ninterface ApiCommentsTableProps {\n commentsReducer: ApiCommentsReducer,\n userReducer: UserReducer,\n apiReducer: ApiReducer,\n deleteComment: (apiId: string, organizationId: string, commentId: string) => Promise\n {getTimeDurationForDate(row.createdTime)}\n {\n deleteButtonDisplay &&\n (
\n handleDeletePopoverClick(event, row.id)}\n >\n \n \n \n
\n )\n }\n \n \n {apiLoading || apiThumbnailLoading || !apiThumbnail ? (\n \n {renderSkeleton('rect', 97, 97)}\n \n ) : (\n \n \n )}\n \n \n \n {apiLoading ? (\n renderSkeleton(\"rect\", \"50%\", 24)\n ) : (\n <>\n \n {renderApiTypeMessage(api)}\n {api.lifeCycleStatus === 'PROTOTYPED' && (\n \n \n {apiName}\n \n \n )}\n\n {apiLoading ? (\n renderSkeleton('text', '50%', 20)\n ) : (\n \n \n \n )}\n \n \n \n {isThirdPartyApi(api) ? (\n \n \n \n {externalAPISandboxURL ? (\n \n \n {apiLoading ? (\n renderSkeleton('rect', 340, 48)\n ) : (\n \n \n ) : (\n <>\n {api && getEndpointUrls(api)?.length > 0 ? (\n \n \n \n {enableCustomDomainView ? (\n \n \n {apiLoading ? (\n renderSkeleton(\"rect\", 340, 48)\n ) : (\n \n \n ) : (\n \n {apiLoading ? (\n renderSkeleton('rect', 616, 60)\n ) : (\n \n \n \n \n )}\n \n )}\n \n )}\n \n \n \n \n \n \n \n \n {apiLoading\n ? renderSkeleton('rect', '100%', 48)\n : apiOverview || (\n \n \n \n \n {!apiLoading && !isGraphqlApi(api) && (\n \n \n {getAPIType(api) === API_TYPE_WS ? (\n \n \n ) : (\n \n \n )}\n \n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiReducer: state.apiReducer,\n commentsReducer: state.apiCommentsReducer,\n userReducer: state.userReducer,\n graphqlResponse: state.graphqlReducer,\n };\n};\n\nconst mapDispatchToProps = {\n postComment: postComment,\n dispatchFetchGraphqlResponse: fetchGraphqlResponse,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ApiInformation);\n\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { useIntl } from 'react-intl';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Rating from '@material-ui/lab/Rating';\nimport Box from '@material-ui/core/Box';\n\nimport * as Utils from '../../../data/utils';\nimport { postRating } from '../../../data/operations';\nimport { ApiReducer, RatingsReducer, ApiRating, ApplicationState, UserReducer } from '../../../data/interfaces';\nimport {trackAPIRatingChange} from \"../../../util/app-insights\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 225,\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(2),\n },\n}));\n\ninterface ApiHoverRatingProps {\n apiReducer: ApiReducer,\n ratingsReducer: RatingsReducer,\n userReducer: UserReducer,\n postRating: (apiId: string, organizationId: string, rating: ApiRating) => Promise\n
\n )}\n \n \n {endpointUrls &&\n endpointUrls?.length > 0 &&\n selectedEndpoint && (\n (\n \n {selectedEnv && (\n \n {selectedEnv} :\n \n )}\n {selectedVisibility && (\n \n {selectedVisibility}\n \n )}\n {isSelectedEpSandbox && (\n \n Sandbox\n \n )}\n {value} \n \n )}\n >\n {endpointUrls?.map((endpoint: EndpointInfo) => {\n return (\n \n \n \n {endpoint.choreoEnvironmentName} :\n \n {endpoint.accessibilityType && (\n \n {getVisibilityFromAccessibilityType(\n endpoint.accessibilityType\n )}\n \n )}\n {endpoint.isSandbox && endpoint.isCritical && (\n \n {\"Sandbox\"}\n \n )}\n \n {endpoint.url}\n \n \n \n );\n })}\n \n )}\n \n
\n \n
\n )}\n \n {/* TODO (Shanakama) folowing selection will be chnaged in near future with the new design changes */}\n \n {endpointUrls &&\n endpointUrls?.length > 0 &&\n selectedEndpoint && (\n (\n \n {selectedEnv && (\n \n {selectedEnv} :\n \n )}\n {selectedVisibility && (\n \n {selectedVisibility}\n \n )}\n {isSelectedEpSandbox && (\n \n Sandbox\n \n )}\n \n {value}\n \n \n )}\n >\n {endpointUrls?.map(\n (endpoint: EndpointInfo) => {\n return (\n \n \n \n {endpoint.choreoEnvironmentName} :\n \n\n {endpoint.accessibilityType && (\n \n {getVisibilityFromAccessibilityType(\n endpoint.accessibilityType\n )}\n \n )}\n {endpoint.isSandbox && endpoint.isCritical && (\n \n {\"Sandbox\"}\n \n )}\n \n {endpoint.url}\n \n \n \n );\n })}\n \n )}\n \n
\n )}\n \n {\n setHover(newHover);\n }}\n />\n {value !== null && {labels[hover !== -1 ? hover : value]} }\n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n ratingsReducer: state.ratingsReducer,\n apiReducer: state.apiReducer,\n userReducer: state.userReducer\n }\n}\n\nconst mapDispatchToProps = {\n postRating: postRating,\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ApiHoverRating);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport Rating from '@material-ui/lab/Rating';\nimport Popover from '@material-ui/core/Popover';\n\nimport ApiHoverRating from './ApiHoverRating';\nimport CustomIcons from '../../../icons/CustomIcons';\nimport OutlineButton from '../../../elements/OutlineButton';\n\nimport * as Utils from '../../../data/utils';\nimport { ApiReducer, ApplicationState, RatingsReducer, UserReducer } from '../../../data/interfaces';\nimport {PATH_SEPARATOR} from \"../../../data/constants\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n gridText: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiRatingBox\n },\n textVCenter1: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiRatingTextCover\n },\n textVCenter2: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiRatingStars\n },\n rectangle: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiRatingRectangle\n },\n ratingButton: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiRatingButton\n },\n ratingPopover: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n ratingText: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiRatingText\n }\n}));\n\ninterface ApiRatingProps {\n apiReducer: ApiReducer,\n ratingsReducer: RatingsReducer,\n userReducer: UserReducer,\n hideTryOut?: boolean;\n disableTryOut?: boolean;\n}\n\nfunction ApiRating({ apiReducer, ratingsReducer, userReducer, hideTryOut, disableTryOut }: ApiRatingProps) {\n const intl = useIntl();\n const classes = useStyles();\n const { api } = apiReducer;\n const { ratings } = ratingsReducer;\n const { apimTokenObtained, selectedOrg } = userReducer;\n const selectedOrgHandleName= selectedOrg.handle;\n const [anchorEl, setAnchorEl] = React.useState\n \n \n \n \n \n \n \n \n \n \n \n \n \n {ratingValue} ({ratingCount}) \n \n \n \n \n {\n apimTokenObtained ?\n \n \n \n }\n \n \n \n \n {(!hideTryOut && apimTokenObtained) &&\n \n \n }\n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiReducer: state.apiReducer,\n ratingsReducer: state.ratingsReducer,\n userReducer: state.userReducer,\n }\n}\n\nexport default connect(mapStateToProps)(ApiRating);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React, { useEffect } from 'react';\nimport { connect } from 'react-redux';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useSnackbar } from 'notistack';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport { ListItemAvatar, ListItemText } from '@material-ui/core';\n\nimport CustomIcons from '../../../icons/CustomIcons';\n\nimport * as Utils from '../../../data/utils';\nimport * as Constants from '../../../data/constants';\nimport { ApiReducer, ApplicationState, Document, DocumentsReducer, UserReducer } from '../../../data/interfaces';\nimport { PATH_SEPARATOR } from \"../../../data/constants\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n apiDocsTitle: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiDocumentsTitleBox\n },\n apiInfoTitleHead: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiDocumentsTitleText,\n },\n docsList: {\n minWidth: '320px',\n overflowWrap: 'break-word',\n textAlign: 'left',\n },\n listItemText: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiDocumentPropertyText,\n },\n}));\n\ninterface ApiDocumentationProps {\n organizationHandle: string,\n apiReducer: ApiReducer,\n documentsReducer: DocumentsReducer,\n}\n\nfunction ApiDocumentation({ organizationHandle, apiReducer, documentsReducer}: ApiDocumentationProps) {\n const intl = useIntl();\n const classes = useStyles();\n const { enqueueSnackbar } = useSnackbar();\n const { api } = apiReducer;\n const { loading: docsLoading, documents, error: documentsError } = documentsReducer;\n const history = useHistory();\n let docsList: Document[] = [];\n\n if (Utils.isValidData(documents)) {\n docsList = documents.list;\n }\n\n useEffect(() => {\n if (documentsError) {\n enqueueSnackbar(\"Error while retrieving documents\", { variant: 'error' })\n }\n }, [documentsReducer]);\n\n const handleDocItemClick = (documentId: string) => {\n if (api.id && documentId) {\n history.push(PATH_SEPARATOR + organizationHandle + Constants.RESOURCE_API + \"/\"\n + api.id + Constants.RESOURCE_API_DOCUMENTS + \"/\" + documentId);\n }\n }\n\n return (\n \n \n \n \n \n \n \n \n \n {\n docsLoading ?\n Utils.renderSkeleton(\"rect\", \"100%\", 48)\n :\n \n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiReducer: state.apiReducer,\n documentsReducer: state.documentsReducer\n }\n}\n\nexport default connect(mapStateToProps)(ApiDocumentation);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { FormattedMessage } from 'react-intl';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport Chip from '@material-ui/core/Chip';\n\nimport { isValidData, renderSkeleton } from '../../../data/utils';\nimport { ApiReducer, ApplicationState } from '../../../data/interfaces';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n apiDocsTitle: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiTagsTitleBox\n },\n apiInfoTitleHead: {\n ...theme.custom.apiOverviewPage.tabs.overview.apiTagsTitleText\n },\n chip: {\n margin: theme.spacing(0.5),\n ...theme.custom.apiOverviewPage.tabs.overview.apiTagsChip\n },\n}));\n\ninterface ApiTagsProps {\n apiReducer: ApiReducer\n}\n\nfunction ApiTags({ apiReducer }: ApiTagsProps) {\n const classes = useStyles();\n const { loading: apiLoading, api } = apiReducer;\n let tagsData: string[] = [];\n\n if (isValidData(api)) {\n tagsData = api.tags;\n }\n\n return (\n - \n {\n docsList.length === 0 ?\n \n
\n \n \n \n \n \n \n \n \n {\n apiLoading ?\n renderSkeleton(\"rect\", \"100%\", 25)\n :\n tagsData.length === 0 ?\n \n \n \n );\n })\n }\n \n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiReducer: state.apiReducer\n }\n}\n\nexport default connect(mapStateToProps)(ApiTags);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n appBarSpacer: theme.mixins.toolbar,\n content: {\n flexGrow: 1,\n height: '100vh',\n overflow: 'auto',\n ...theme.custom.apiOverviewPage.tabs.overview.styles\n },\n container: {\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(4),\n maxWidth: '1480px',\n },\n componentPadding: {\n paddingLeft: theme.spacing(7),\n paddingRight: theme.spacing(10),\n [theme.breakpoints.down('sm')]:{\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3), \n },\n [theme.breakpoints.up('lg')]:{\n paddingLeft: 'auto',\n paddingRight: 'auto', \n }\n }\n}));\n","export default __webpack_public_path__ + \"static/media/copy.ecfc163b.svg\";","/*\n * Copyright (c) 2023, WSO2 LLC. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 LLC. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport { IconButton, Typography } from '@material-ui/core';\nimport ScopesCopyIcon from '../../../../icons/copy.svg';\nimport React, { useState } from 'react';\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Zoom from \"@material-ui/core/Zoom\";\nimport DarkTooltip from \"../../../../elements/DarkTooltip\";\nimport { FormattedMessage } from \"react-intl\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n copyAllScopes: {\n ...theme.custom.apiOverviewPage.tabs.overview.copyAllScopes\n },\n copyScopesText: {\n ...theme.custom.apiOverviewPage.tabs.overview.copyScopesText\n },\n}));\n\ninterface CopyCommandProps {\n copyCmd: string;\n}\n\nexport default function CopyCommand(props: CopyCommandProps) {\n const classes = useStyles();\n const { copyCmd } = props;\n const [copiedTooltipVisible, setCopiedTooltipVisible] = useState(false);\n\n const handleCopyClick = (event: any) => {\n navigator.clipboard.writeText(copyCmd);\n setCopiedTooltipVisible(true);\n setTimeout(() => {\n setCopiedTooltipVisible(false);\n }, 2000);\n };\n\n return (\n \n \n \n \n \n
\n \n {subVersions.map(subVersion => (\n
\n event.stopPropagation()}>\n \n \n {subVersion.version}\n \n \n
\n )}\n \n - \n {subVersion.subscriptionList\n .filter(\n sub => !sub.appName.startsWith(DEFAULT_APP_INTERNAL_PREFIX))\n .map(sub => (\n
- \n
\n \n {\n apiLoading || !apiThumbnail ?\n \n {renderSkeleton(\"rect\", 49, 49)}\n \n :\n \n \n }\n \n \n {\n apiLoading ?\n \n {renderSkeleton(\"rect\", 100, 20)}\n \n :\n \n {apiName}\n \n }\n\n {\n apiLoading ?\n \n {renderSkeleton(\"rect\", 100, 20)}\n \n :\n \n \n }\n \n \n \n {\n apiLoading ?\n renderSkeleton(\"rect\", 280, 49)\n :\n \n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiReducer: state.apiReducer,\n ratingsReducer: state.ratingsReducer,\n }\n}\n\nexport default connect(mapStateToProps)(ApiInfoBar);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React, {useState} from 'react';\n\nimport TextField, { TextFieldProps } from '@material-ui/core/TextField';\nimport { makeStyles} from '@material-ui/core/styles';\nimport { IconButton, InputAdornment, Zoom } from '@material-ui/core';\nimport Visibility from '@material-ui/icons/VisibilityOutlined';\nimport VisibilityOff from '@material-ui/icons/VisibilityOffOutlined';\n\nimport CustomIcons from '../icons/CustomIcons';\nimport DarkTooltip from './DarkTooltip';\n\nconst useStyles = makeStyles((theme) => ({\n accessTokenField: { \n '& .MuiFilledInput-root': {\n borderRadius: `${theme.spacing(0.5)}px`,\n backgroundColor: theme.palette.common.white,\n paddingLeft: 10,\n fontSize: 12,\n color: '#8D91A3',\n letterSpacing: 1,\n },\n '& .MuiFilledInput-input': {\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5), \n },\n '& .MuiFilledInput-underline:after': {\n display: \"none\"\n },\n },\n outline: {\n \"&&&:before\": {\n borderBottom: \"none\"\n },\n \"&&:after\": {\n borderBottom: \"none\"\n }\n },\n iconBtn: {\n color: theme.palette.grey[500]\n },\n copyIcon: {\n cursor: \"pointer\"\n },\n copy: {\n padding: 0,\n '&:hover': {\n backgroundColor: \"transparent\"\n }\n },\n copyIconButton: {\n color: theme.palette.grey[500],\n height: `${theme.spacing(5.625)}px`,\n width: `${theme.spacing(5.625)}px`,\n padding: 0\n },\n}));\n\nexport interface PasswordCopyFieldProps {\n value: string,\n onChange?: ((event: React.ChangeEvent\n
\n );\n}\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n encodeVisible: {\n cursor: 'pointer',\n textDecoration: 'underline'\n },\n greyOutlinedButton: {\n left: 0,\n fontFamily: 'GilmerMedium',\n fontSize: '12px',\n lineHeight: '14px',\n color: '#40404B',\n height: theme.spacing(5),\n width: theme.spacing(10)\n },\n dialog: {\n borderRadius: theme.spacing(1.5)\n },\n dialogTitle: {\n textAlign: \"center\",\n paddingBottom: theme.spacing(0),\n marginBottom: theme.spacing(2),\n marginTop: theme.spacing(1.5)\n },\n titleText: {\n lineHeight: '64px',\n fontFamily: 'GilmerBold',\n color: '#222228',\n fontSize: '29px'\n },\n action: {\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3),\n paddingTop: theme.spacing(0.5),\n paddingBottom: theme.spacing(2)\n },\n curlDescription: {\n fontFamily: 'Gilmer',\n fontSize: '15px',\n lineHeight: '24px',\n color: '#8D91A3',\n textAlign: 'center'\n },\n copyButton: {\n marginTop: theme.spacing(3)\n },\n contentWrapper: {\n display: 'flex'\n },\n code: {\n padding: theme.spacing(1),\n paddingLeft: theme.spacing(3),\n marginTop: theme.spacing(3),\n background: theme.palette.grey[200],\n color: '#da2316',\n flex: 1\n },\n command: {\n color: '#2b62b0'\n }\n}));\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React, { useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport {\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n DialogTitle,\n IconButton,\n Typography,\n Zoom,\n} from '@material-ui/core';\n\nimport GreyOutlinedButton from '../../../elements/GreyOutlinedButton';\nimport { useStyles } from './style';\nimport Settings from '../../../conf/settings';\nimport CustomIcons from '../../../icons/CustomIcons';\nimport DarkTooltip from '../../../elements/DarkTooltip';\n\ninterface CurlDialogProps {\n curlOpen: boolean;\n base64Encoded: string;\n externalIDPToken: string;\n tokenEndpoint?: string;\n onClose: () => void;\n}\n\nfunction CurlDialog(curlOpenProps: CurlDialogProps) {\n const classes = useStyles();\n const intl = useIntl();\n const { curlOpen, base64Encoded, externalIDPToken, tokenEndpoint, onClose } = curlOpenProps;\n\n const [showReal, setShowReal] = useState(false);\n const [copiedTooltipVisible, setCopiedTooltipVisible] = useState(false);\n\n const getCurlDialogCloseBtnText = () => {\n return intl.formatMessage({\n id: 'application.productionKeys.oauth.curlGeneration.closeButton.text',\n defaultMessage: 'Close',\n });\n };\n\n const applyReal = () => {\n setShowReal(!showReal);\n };\n\n const handleCopyClick = () => {\n let copyText = '';\n if (externalIDPToken == '') {\n copyText =\n `curl -k -X POST ${tokenEndpoint} -d ` +\n '\"grant_type=client_credentials\" -H ' +\n `\"Authorization: Basic ${base64Encoded}\"`;\n } else {\n copyText =\n `curl -k -X POST ${Settings.tokenEndpoint} -d ` +\n '\"grant_type=urn:ietf:params:oauth:grant-type:token-exchange\" -H ' +\n `\"Authorization: Basic ${base64Encoded}\" -H \"Content-Type: application/x-www-form-urlencoded\" -d ` +\n `\"subject_token=${externalIDPToken}\" -d ` +\n `\"subject_token_type=urn:ietf:params:oauth:token-type:jwt\" -d ` +\n `\"requested_token_type=urn:ietf:params:oauth:token-type:jwt\"`;\n }\n\n navigator.clipboard.writeText(copyText);\n setCopiedTooltipVisible(true);\n setTimeout(() => {\n setCopiedTooltipVisible(false);\n }, 2000);\n };\n\n const curlContent = () => {\n if (externalIDPToken == '') {\n return (\n <>\n \n curl -k -X POST \n {' ' + tokenEndpoint}\n -d {' '}\n {'\"grant_type=client_credentials\"'}\n
\n \n -H \n {'\"Authorization: Basic'}\n \n {showReal\n ? ' ' + base64Encoded\n : ' Base64(consumer-key:consumer-secret)'}\n \n {'\"'}\n
\n \n );\n } else {\n return (\n <>\n \n curl -k -X POST \n {' ' + Settings.tokenEndpoint}\n -d {' '}\n {'\"grant_type=urn:ietf:params:oauth:grant-type:token-exchange\"'}{' '}\n -d {' '}\n {'\"subject_token_type=urn:ietf:params:oauth:token-type:jwt\"'}{' '}\n -d {' '}\n {'\"requested_token_type=urn:ietf:params:oauth:token-type:jwt\"'}\n -d {'\"subject_token='}\n \n {showReal ? ' ' + externalIDPToken : ' idp-token'}\n \n {'\"'}\n
\n \n -H \n {'\"Authorization: Basic'}\n \n {showReal\n ? ' ' + base64Encoded\n : ' Base64(consumer-key:consumer-secret)'}\n \n {'\"'}\n
\n \n );\n }\n };\n\n return (\n \n \n {curlContent()}\n
\n \n \n \n \n \n
\n \n \n
\n );\n}\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n loaderText: {\n textAlign: \"center\",\n paddingLeft: theme.spacing(1),\n color: theme.palette.grey[400]\n },\n loader: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"& .preloader-circle-relative div\": {\n height: `${theme.spacing(2.75)}px !important`,\n width: `${theme.spacing(2.75)}px !important`\n }\n },\n actionLoader: {\n paddingTop: theme.spacing(4)\n },\n dialogButton: {\n bottom: 50,\n textTransform: 'capitalize',\n fontFamily: 'GilmerMedium',\n fontSize: '13px',\n lineHeight: '16px',\n height: theme.spacing(5)\n },\n dialogRootStyle: {\n borderRadius: 15\n },\n dialogContent: {\n padding: theme.spacing(1)\n },\n primaryTitle: {\n fontFamily: 'GilmerMedium',\n textAlign: \"center\",\n fontSize: '23px',\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(2)\n },\n secondaryTitle: {\n textAlign: \"center\"\n },\n dialogActions: {\n display: \"flex\",\n justifyContent: \"center\",\n marginTop: theme.spacing(8.25)\n },\n closeButton: {\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1),\n color: theme.palette.grey[200]\n }\n}));\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from \"react\";\n\nimport { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from \"@material-ui/core\";\nimport CloseIcon from '@material-ui/icons/Close';\nimport Alert from '@material-ui/lab/Alert';\nimport classNames from \"classnames\";\n\nimport { CirclePreloader } from \"../../../elements/CirclePreloader\";\nimport { useStyles } from \"./styles\";\n\ninterface ConfirmationDialogProps {\n open: boolean,\n dialogTitle: string,\n dialogContentText: string,\n okayButtonLabel: string,\n cancelButtonLabel: string,\n okButtonTestId?: string,\n cancelButtonTestId?: string,\n loadingActionHelperText?: string,\n isActionProcessing?: boolean,\n error?: string,\n onClose: () => void,\n onOkay: () => void,\n onCancel: () => void,\n}\n\nexport const ConfirmationDialog = (props: ConfirmationDialogProps) => {\n const {\n open, dialogTitle, dialogContentText, okayButtonLabel, cancelButtonLabel, loadingActionHelperText,\n isActionProcessing, error, onClose, onOkay, onCancel, okButtonTestId, cancelButtonTestId\n } = props;\n const classes = useStyles();\n\n const Loader = () => {\n return (\n \n {loadingActionHelperText} \n
\n );\n };\n\n const DialogContents = () => {\n return (\n \n \n {dialogContentText}\n \n {isActionProcessing &&
\n );\n };\n\n return (\n \n {error && {error} }\n
\n \n
\n )\n }\n \n
:\n - \n {isApprovalRequired(subscriptionPolicy) && (\n
\n \n
\n );\n } else {\n return (\n \n \n \n \n \n \n
\n )}\n data-testid=\"app-name\"\n error={applicationNameError !== \"\"}\n />\n \n \n {applicationNameError}
\n{descriptionError}
\n \n )}\n error={descriptionError !== \"\"}\n data-testid=\"application-description\"\n />\n \n\n
\n )}\n data-testid=\"app-name\"\n error={apiKeyNameError !== \"\"}\n />\n \n \n \n );\n };\n\n\n const ApplicationSelector = () => {\n const filteredApplications = applicationList?.list.filter((app) => {\n return ApplicationPermission.hasPermission(AppPermission.WRITE, app, userInfo, scopes);\n });\n return (\n <>\n {apiKeyNameError}
\n\n \n { ApplicationPermission.hasPermission(AppPermission.WRITE, matchingApp, userInfo, scopes) && (\n <>\n {\n handleRegenerateApiKey(apiKey);\n }}\n startIcon={ {\n handleRevokeApiKey(apiKey);\n }}\n >\n {intl.formatMessage({\n id: 'apiKeyList.table.column.actions.delete',\n defaultMessage: 'Delete'\n })}\n \n \n ) }\n \n \n
\n );\n };\n\n const ActionsColumn = (rowData: RowData) => {\n return (\n \n { setRowsPerPage(pageSize) }}\n onPageChange={handlePageNumberChange}\n page={pageNumber}\n options={{\n pageSize: 5,\n showFirstLastPageButtons: false,\n pageSizeOptions: Array.from(Array(15).keys()),\n showTitle: false,\n search: false,\n sorting: false,\n headerStyle: { height: 30, pointerEvents: 'none' },\n }}\n columns={columns()}\n icons={tableIcons}\n data={list}\n localization={{\n pagination: {\n nextTooltip: appTableI18n.nextPageLabel,\n previousTooltip: appTableI18n.previousPageLabel\n }\n }}\n />\n
\n \n
\n \n \n
\n {children}
}\n \n );\n}\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React, { useEffect, useState } from 'react';\nimport { connect } from 'react-redux';\nimport { useStyles } from './style';\nimport {\n ApplicationState,\n Api,\n KeyType,\n CredentialsReducer,\n} from \"../../../data/interfaces\";\nimport ApiInfoBar from '../../shared/ApiInfoBar';\nimport OAuthCredentials from './OAuthCredentials';\nimport APIKeyCredentials from './APIKeyCredentials';\nimport { Box, Tabs, Tab, Tooltip, Typography } from '@material-ui/core';\nimport { TabPanel } from '../../shared/Tab/TabPanel';\nimport Settings from '../../../conf/settings';\nimport { checkCredentials } from '../../../data/operations';\nimport { PreLoaderLogo } from '../../../elements/PreLoaderLogo';\n\ninterface ApiCredentialsProps {\n apiInfo: Api,\n credentialInfo: CredentialsReducer,\n keyType: KeyType,\n dispatchCheckCredentials: () => void,\n}\n\nfunction ApiCredentials(props: ApiCredentialsProps) {\n\n const { apiInfo, keyType, credentialInfo, dispatchCheckCredentials } = props;\n const classes = useStyles();\n const { isKeysFetched, isKeyFetching, keys } = credentialInfo;\n\n const [securitySchemes, setSecuritySchemes] = useState![\"\"](\"/themes/default/images/warning_orange_filled.svg\")
\n ![\"\"](\"/themes/default/images/info-blue.svg\")
\n \n
\n \n );\n}\n","/*\n * Copyright (c) 2024, WSO2 LLC. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 LLC. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport {\n Accordion,\n AccordionDetails,\n AccordionSummary,\n Box,\n Button,\n Chip,\n CircularProgress,\n Tab,\n Tabs,\n TextField,\n Tooltip,\n Typography,\n} from \"@material-ui/core\";\nimport React, { Suspense, useState, useEffect, useRef, SetStateAction, useMemo } from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\";\nimport CopyTextField from \"../../../../elements/CopyTextField\";\nimport { PayloadEditor } from \"./PayloadEditor\";\nimport { PlayCircleFilledOutlined, Send } from \"@material-ui/icons\";\nimport OutputConsole from \"./OutputConsole\";\nimport useStyles from \"./styles\";\nimport LogLine, { CollectedLogLineWithKey } from \"./LogLine\";\nimport { TabPanel } from '../../../shared/Tab/TabPanel';\n\nexport const OAUTH2_KEY_HEADER_NAME = \"choreo-oauth2-token\";\n \ninterface TopicViewerProps {\n token: string;\n apiEndpoint: string;\n topic: string;\n publish: boolean;\n subscribe: boolean;\n parameters?: Record\n \n \n \n {formatLogTimeStamp(\n new Date(logEntry.displayTimeStamp || logEntry.timestamp),\n timeZone\n )}\n \n {logEntry?.message && (\n \n {logEntry?.message}\n
\n \n
\n );\n } else {\n return (\n \n \n {getIsInternalAPI(api) &&\n \n \n \n }\n testId='internal-api-warning'\n />}\n \n
\n \n
\n );\n}\n\nconst mapDispatchToProps = {\n dispatchGenerateAppKeyAndToken: createAppKeysAndToken,\n dispatchGenerateApplicationToken: generateApplicationToken,\n dispatchFetchSubscriptions: fetchSubscriptions,\n dispatchFetchVersionRangeSubscriptions: fetchAPIVersionRangeSubscriptions,\n dispatchFetchAppKeys: fetchAppKeys,\n dispatchFetchGraphqlResponse: fetchGraphqlResponse,\n dispatchGenerateApiTestKey: generateApiTestKey,\n dispatchFetchIDPs: fetchIDPs,\n};\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiInfo: state.apiReducer,\n keysInfo: state.applicationKeysReducer,\n subscriptionInfo: state.subscriptionsReducer,\n userInfo: state.userReducer,\n swaggerInfo: state.swaggerReducer,\n graphqlResponse: state.graphqlReducer,\n idpInfo: state.idpReducer,\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ApiTryOut);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles((theme) => ({\n appBarSpacer: {\n ...theme.mixins.toolbar,\n [theme.breakpoints.down('xs')]: {\n minHeight: theme.spacing(10),\n }\n },\n content: {\n flexGrow: 1,\n height: '100vh',\n overflow: 'auto',\n ...theme.custom.apiOverviewPage.tabs.contracts.styles\n },\n container: {\n paddingTop: theme.spacing(4),\n paddingBottom: theme.spacing(4),\n textAlign: 'left',\n maxWidth: '1480px',\n },\n formControl: {\n padding: theme.spacing(2)\n },\n applicationSection: {\n padding: theme.spacing(2),\n alignItems: 'center',\n },\n formControlWarn: {\n padding: theme.spacing(2),\n display: 'flex',\n },\n updateBtn: {\n margin: \"32px 0\",\n display: 'flex',\n flexDirection: 'row',\n ...theme.custom.apiOverviewPage.tabs.contracts.updateButtonStyle\n },\n updateButton: {\n ...theme.custom.apiOverviewPage.tabs.contracts.updateButton\n },\n radioGroup: {\n width: '360px'\n },\n button: {\n margin: theme.spacing(1, 1, 0, 0),\n },\n warningIcon: {\n ...theme.custom.apiOverviewPage.tabs.contracts.warningIconStyle\n },\n componentPadding: {\n paddingLeft: theme.spacing(7),\n paddingRight: theme.spacing(10),\n [theme.breakpoints.down('sm')]: {\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3),\n },\n [theme.breakpoints.up('lg')]: {\n paddingLeft: 'auto',\n paddingRight: 'auto',\n }\n },\n contractsTitle: {\n ...theme.custom.apiOverviewPage.tabs.contracts.title\n },\n GenerateCredentialsInfoLabel: {\n ...theme.custom.apiOverviewPage.tabs.contracts.GenerateCredentialsInfoLabel\n },\n contractLabel: {\n ...theme.custom.apiOverviewPage.tabs.contracts.contractLabelStyle\n },\n contractRadioButtonStyle: {\n ...theme.custom.apiOverviewPage.tabs.contracts.contractRadioButtonStyle\n },\n selectBox: {\n height: theme.spacing(5),\n width: theme.spacing(30),\n borderRadius: \"5px\",\n background: \"linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%)\",\n boxShadow: \"inset 0 0 0 1px #dee0e7, 0 1px 1px 0 rgba(0, 0, 0, 0.06)\",\n cursor: \"pointer\",\n border: 1,\n \"&:active\": {\n background: \"linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%)\",\n boxShadow: \"inset 0 0 0 1px #a6b3ff, 0 1px 1px 0 rgba(0, 0, 0, 0.06)\",\n border: \"1px solid #5567d5\",\n },\n \"&:focused\": {\n background: \"linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%)\",\n boxShadow: \"inset 0 0 0 1px #a6b3ff, 0 1px 1px 0 rgba(0, 0, 0, 0.06)\",\n border: \"1px solid #5567d5 !important\",\n },\n \"& .MuiSelect-selectMenu\": {\n \"& .TextSpan\": {\n color: '#222228'\n }\n },\n },\n dropdownStyle: {\n backgroundColor: \"#fff\",\n boxSizing: \"border-box\",\n width: \"auto\",\n border: \"1px solid #DEE0E7\",\n borderRadius: \"5px\",\n boxShadow: \"0 5px 10px -3px rgba(50,50,77,0.1)\",\n color: \"#222228\",\n marginTop: '0.25rem',\n },\n policyCardGridItem: {\n display: 'flex',\n flexDirection: 'row',\n marginTop: theme.spacing(2),\n },\n btnText: {\n textTransform: \"initial\",\n fontSize: 11,\n marginLeft: theme.spacing(1.625),\n fontWeight: 400\n },\n}));\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React, { useState, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { connect } from 'react-redux';\nimport { useSnackbar } from 'notistack';\nimport { useHistory } from 'react-router-dom';\n\nimport {\n Container,\n Grid,\n Divider,\n Typography,\n CircularProgress,\n MenuItem,\n Select,\n Button,\n Box,\n} from \"@material-ui/core\";\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport WarningIcon from '@material-ui/icons/WarningRounded';\n\nimport ApiInfoBar from '../../shared/ApiInfoBar';\nimport {\n ApiReducer,\n ApplicationState,\n Subscription,\n SubscriptionList,\n SubscriptionPoliciesReducer,\n SubscriptionsReducer,\n Tier,\n UserReducer,\n} from \"../../../data/interfaces\";\nimport PrimaryButton from '../../../elements/PrimaryButton';\nimport * as Utils from '../../../data/utils';\nimport {\n fetchSubscriptions,\n updateSubscription,\n cleanupSubscriptions,\n fetchSubscriptionPoliciesList,\n} from \"../../../data/operations\";\nimport { useStyles } from './styles';\nimport OutlineButton from '../../../elements/OutlineButton';\nimport CustomIcons from '../../../icons/CustomIcons';\nimport Settings from '../../../conf/settings';\nimport {\n DEFAULT_APPLICATION_LIMIT,\n PATH_SEPARATOR, PRODUCTION, RESOURCE_API, RESOURCE_API_CREDENTIALS, RESOURCE_APPLICATIONS,\n} from '../../../data/constants';\nimport { trackApiContractUpdate } from \"../../../util/app-insights\";\nimport { isCustomSubPoliciesEnabled } from \"../../../data/utils\";\nimport SubscriptionPolicyCard from '../../app/AppSubscriptions/SubscriptionPolicyCard';\ninterface ApiContractsProps {\n apiReducer: ApiReducer,\n subscriptionsReducer: SubscriptionsReducer,\n subscriptionPoliciesReducer : SubscriptionPoliciesReducer\n userReducer: UserReducer,\n cleanupSubscriptions: () => void,\n fetchSubscriptions: (apiId: string, organizationId: string, \n type: string, limit?: number | null,) => void,\n fetchSubscriptionPoliciesList: (organizationId: string) => Promise\n \n \n \n \n
\n )}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n
\n ) : (\n <>\n \n \n \n {tiers.map((tier: Tier) => {\n const matchedPolicy = subscriptionPolicies.list.find(\n subPolicy => subPolicy.name === tier.tierName\n )\n if (matchedPolicy !== undefined) {\n return (\n \n \n )\n }\n })}\n \n \n \n {subscriptionButtonText()}\n \n \n \n
\n )}\n \n \n \n \n {language}\n \n \n \n downloadSDK(language)}\n />\n \n \n \n
\n \n
\n ) :\n (\n sdkLanguages.length > 0 ? (\n \n \n \n \n \n
\n )\n}\n\nconst mapDispatchToProps = {\n dispatchCheckCredentials: checkCredentials,\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n apiReducer: state.apiReducer,\n userReducer: state.userReducer,\n credentialsReducer: state.credentialsReducer\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MainMenuItems);\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from 'react';\nimport { useIntl } from 'react-intl';\nimport { connect } from \"react-redux\";\nimport { matchPath, useLocation } from 'react-router-dom';\n\nimport { List, ListItem, makeStyles } from \"@material-ui/core\";\n\nimport { ApplicationReducer, ApplicationState, UserReducer } from \"../../../data/interfaces\";\nimport CustomIcons from '../../../icons/CustomIcons'\n\nimport ListItemLink from './ListItemLink'\nimport { PATH_SEPARATOR } from \"../../../data/constants\";\nimport Settings from '../../../conf/settings';\nimport {\n isCredentialMenuAccessible,\n isProductionKeyGenerationAccessible,\n isSandboxKeyGenerationAccessible\n} from '../../../data/utils';\nimport InfoTooltip from '../../../elements/CustomTooltip/InfoTooltip';\nimport { ApplicationPermission } from '../../../util/app-permissions';\nimport { AppPermission } from '../../../data/emus';\n\nconst useStyles = makeStyles((theme) => ({\n nested: {\n paddingLeft: theme.spacing(3.75),\n },\n nestedItem: {\n marginTop: -theme.spacing(3.5),\n marginBottom: -theme.spacing(3.5)\n }\n}));\n\ninterface AppMenuItemsProps {\n applicationReducer: ApplicationReducer\n userReducer: UserReducer\n}\n\ninterface AppCredentialUrlParams {\n env?: string;\n page: string;\n}\n\ninterface AppUrlParams {\n page: string;\n}\n\nfunction AppMenuItems(props: AppMenuItemsProps) {\n const { applicationReducer, userReducer } = props;\n const classes = useStyles();\n const intl = useIntl();\n const appList = applicationReducer?.applications?.list;\n const application = appList?.length > 0 ? appList[0] : undefined;\n const applicationId = application ? application.applicationId : ':applicationId';\n const location = useLocation();\n const { selectedOrg, user, userInfo } = userReducer;\n const selectedOrgHandleName = selectedOrg.handle;\n const allowedScopes = user.allowedScopes;\n \n const isTabSelected = (page: string, credentialEnv?: string): boolean => {\n const currentPath = location.pathname;\n if (credentialEnv) {\n const { params } = matchPath- \n {Settings.sandboxKeyGenerationEnabled && (\n
\n \n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n applicationReducer: state.applicationReducer,\n userReducer: state.userReducer\n }\n};\n\nexport default connect(mapStateToProps)(AppMenuItems);\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport List from '@material-ui/core/List';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Drawer from '@material-ui/core/Drawer';\n\nimport MainMenuItems from './MainMenuItems';\nimport { useLocation } from \"react-router-dom\";\nimport AppMenuItems from \"./AppMenuItems\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n borderRight: '1px solid rgba(0, 0, 0, 0.12)'\n },\n drawerPaper: {\n ...theme.custom.apiOverviewPage.leftMenu.styles,\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n })\n },\n drawerPaperClose: {\n overflowX: 'hidden',\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n width: theme.spacing(0),\n [theme.breakpoints.up('sm')]: {\n width: theme.spacing(0),\n },\n },\n paper: {\n padding: theme.spacing(2),\n display: 'flex',\n overflow: 'auto',\n flexDirection: 'column',\n },\n listPadding: {\n paddingLeft: '40px',\n paddingRight: '40px',\n paddingTop: '0',\n paddingBottom: '0',\n },\n drawerComponent: {\n width: 'inherit',\n height: '110px',\n opacity: '0.2'\n },\n}));\n\ninterface MainMenuDrawerProps {\n menuDrawerOpen: boolean,\n organizationHandle: string,\n}\n\nfunction MainMenuDrawer(props: MainMenuDrawerProps) {\n const { menuDrawerOpen, organizationHandle } = props;\n const classes = useStyles();\n const location = useLocation();\n const currentPath = location.pathname;\n const artifact = currentPath.split('/')[2];\n\n return (\n - \n {Settings.sandboxKeyGenerationEnabled && (\n
\n \n \n
\n );\n}\n\nexport default MainMenuDrawer;\n","/*\n * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport React from \"react\";\nimport { Link as RouterLink, useLocation } from \"react-router-dom\";\n\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\nimport Box from \"@material-ui/core/Box\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Link from \"@material-ui/core/Link\";\nimport Typography from \"@material-ui/core/Typography\";\n\ntype FooterLinkItem = {\n text: string;\n url: string;\n};\n\nconst useStyles = makeStyles((theme) => ({\n footer: {\n top: \"auto\",\n bottom: 0,\n minWidth: \"100%\",\n padding: theme.spacing(2, 1),\n \"& .footer-link:hover\": {\n color: theme.palette.common.white,\n },\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n zIndex: 1300,\n ...theme.custom.footer.styles,\n },\n loginFooter: {\n position: \"sticky\",\n left: 0,\n bottom: 0,\n height: theme.spacing(6),\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n borderTop: \"1px solid\",\n borderTopColor: \"rgba(228,232,238,0.5)\",\n color: \"#40404B\",\n backgroundColor: \"#F7F8FB\",\n \"& .footer-link:hover\": {\n color: theme.palette.grey,\n },\n ...theme.custom.footer.loginFooter,\n },\n copyright: {\n textDecoration: \"inherit\",\n \"&:hover\": {\n color: \"#ff7300\",\n },\n transition: \"color 0.3s linear\",\n },\n wso2Logo: {\n height: theme.spacing(2),\n width: theme.spacing(5.211),\n cursor: \"pointer\",\n marginLeft: theme.spacing(0.75),\n marginTop: theme.spacing(2),\n },\n}));\n\nfunction DevPortalFooter() {\n const classes = useStyles();\n const defaultUrl = \"https://wso2.com/\";\n const location = useLocation();\n const path = location.pathname;\n const theme = useTheme();\n return (\n - \n {artifact === 'applications' ?
\n
\n ) : (\n \n
\n \n \n \n
\n );\n}\n\nconst mapStateToProps = (state: ApplicationState) => {\n return {\n userReducer: state.userReducer,\n apiReducer: state.apiReducer,\n notificationReducer: state.notificationReducer,\n organizationMetadataReducer: state.organizationMetadataReducer,\n };\n};\n\nconst mapDispatchToProps = {\n fetchApiAuthenticated: fetchApiAuthenticated,\n fetchApiUnauthenticated: fetchApiUnauthenticated,\n resetNotificationMsg: resetNotificationMsg,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ApiPage);\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core/styles\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n statusContainer: {\n height: theme.spacing(4),\n display: \"flex\",\n alignItems: \"center\",\n width: 'fit-content',\n padding: theme.spacing(1.25),\n ...theme.custom.elements.status.containerStyles\n },\n statusLabel: {\n margin: '0 auto',\n },\n dot: {\n height: 8,\n width: 8,\n borderRadius: \"50%\",\n display: \"inline-block\",\n marginRight: theme.spacing(1.25)\n },\n statusText: {\n ...theme.custom.elements.status.textStyle\n },\n activeDot: {\n ...theme.custom.elements.status.activeDotStyle\n },\n stoppedDot: {\n ...theme.custom.elements.status.stoppedDotStyle\n },\n pendingDot: {\n ...theme.custom.elements.status.pendingDotStyle\n },\n draftedDot: {\n ...theme.custom.elements.status.draftedDotStyle\n }\n })\n);\n","/*\n * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.\n *\n * This software is the property of WSO2 Inc. and its suppliers, if any.\n * Dissemination of any information or reproduction of any material contained\n * herein is strictly forbidden, unless permitted by WSO2 in accordance with\n * the WSO2 Commercial License available at http://wso2.com/licenses.\n * For specific language governing the permissions and limitations under\n * this license, please see the license as well as any agreement you’ve\n * entered into with WSO2 governing the purchase of this software and any\n * associated services.\n */\n\nimport * as React from \"react\";\n\nimport Typography from '@material-ui/core/Typography';\nimport classNames from \"classnames\";\n\nimport { useStyles } from \"./style\";\nimport { useIntl } from \"react-intl\";\n\ninterface Props {\n label: string,\n alignCenter?: boolean,\n}\n\nfunction InactiveStatus({ label, alignCenter }: Props) {\n const classes = useStyles();\n return (\n \n \n setLatestVersionInfoBannerOpen(false)}\n />\n \n \n \n \n {apimTokenObtained && isSandboxKeyGenerationAccessible(allowedScopes) && (\n \n \n )}\n {apimTokenObtained && isProductionKeyGenerationAccessible(allowedScopes) && (\n \n \n )}\n {!apimTokenObtained &&\n \n \n }\n \n \n {apimTokenObtained && (\n \n \n \n \n )}\n
\n \n \n \n {label}\n \n
\n );\n}\n\nfunction UnknownStatus(props: Props) {\n const { label } = props;\n const classes = useStyles();\n return (\n \n \n \n {label}\n \n
\n );\n}\n\nfunction PendingStatus({ label }: Props) {\n const classes = useStyles();\n return (\n \n \n \n {label}\n \n
\n );\n}\n\nexport function Status({\n type,\n alignCenter,\n}: {\n type: string | undefined;\n alignCenter?: boolean;\n}) {\n const statusType = type?.replace(/_/g, \" \");\n\n const intl = useIntl();\n const statusMessages: { [key: string]: string } = {\n approved: intl.formatMessage({ id: 'status.approved', defaultMessage: 'APPROVED' }),\n unblocked: intl.formatMessage({ id: 'status.active', defaultMessage: 'Active' }),\n blocked: intl.formatMessage({ id: 'status.blocked', defaultMessage: 'Blocked' }),\n rejected: intl.formatMessage({ id: 'status.rejected', defaultMessage: 'Rejected' }),\n \"prod only blocked\": intl.formatMessage({ id: 'status.prodOnlyBlocked', defaultMessage: 'Prod Only Blocked' }),\n \"tier update pending\": intl.formatMessage({ id: 'status.pendingUpdate', defaultMessage: 'Pending Update' }),\n \"on hold\": intl.formatMessage({ id: 'status.pendingCreation', defaultMessage: 'Pending Creation' }),\n };\n\n const defaultLabel = \"Unknown Status\";\n\n const label = statusType\n ? statusMessages[statusType] || defaultLabel\n : defaultLabel;\n\n return (\n