<commit_before>/*
 * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import React, { useState, useEffect, useContext } from 'react';
import { ApiContext } from '../ApiContext';
import Api from '../../../../data/api';
import Progress from '../../../Shared/Progress';
import WebhookSubscriptionUI from './WebhookSubscriptionUI';
import GenericSubscriptionUI from './GenericSubscriptionUI';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import { makeStyles } from "@material-ui/core/styles/index";
import CONSTANTS from 'AppData/Constants';
import Alert from 'AppComponents/Shared/Alert';
import { useIntl } from 'react-intl';

const useStyles = makeStyles((theme) => (
    {
        endpointSelectorRoot: {
            paddingBottom: '20px',
        },
        // this styling is used to resemble the switch to swagger-ui switch
        selectList: {
            minWidth: '130px',
            maxWidth: '100%',
            border: '2px solid #41444e',
            fontFamily: 'sans-serif',
            fontSize: '14px',
            fontWeight: 700,
            padding: '2px 2px 2px 10px',
            border: '2px solid #41444e',
            borderRadius: '4px',
            color: '#3b4151',
        }
    }
));
export default function AsyncApiUI(props) {
    const classes = useStyles();
    const intl = useIntl();
    const {
        authorizationHeader,
        URLs,
        securitySchemeType,
        accessTokenProvider,
    } = props;
    const { api } = useContext(ApiContext);

    let initialEndpoint = URLs.http;
    if (api.type === CONSTANTS.API_TYPES.WS) {
        initialEndpoint = URLs.ws;
    }

    const [allTopics, setAllTopics] = useState('');
    const [endPoint, setEndpoint] = useState(initialEndpoint);

    useEffect(() => {
        const apiID = api.id;
        const apiClient = new Api();
        const promisedTopics = apiClient.getAllTopics(apiID);
        promisedTopics.then((response) => {
            setAllTopics(response.body);
        }).catch((error) => {
            console.log(error);
            Alert.error(intl.formatMessage({
                id: 'Apis.Details.AsyncApiConsole.AsyncApiUI.topics.get.error',
                defaultMessage: 'Error while retrieving topics for the API.',
            }));
        });
    }, []);

    const handleServerChange = (event) => {
        setEndpoint(event.target.value);
    };

    function generateAccessToken() {
        let token;
        if (authorizationHeader === 'apikey') {
            token = accessTokenProvider();
        } else if (securitySchemeType === 'BASIC') {
            token = 'Basic ' + accessTokenProvider();
        } else {
            token = 'Bearer ' + accessTokenProvider();
        }
        return token;
    }

    function generateGenericWHSubscriptionCurl(subscription) {
        const {
            topic, callback, secret, mode, lease,
        } = subscription;
        const token = generateAccessToken();
        if (mode === 'subscribe') {
            let curl = `curl -X POST '${endPoint}?hub.topic=${encodeURIComponent(topic)}&hub.callback=${encodeURIComponent(callback)}&hub.mode=${mode}`;
            if (secret) {
                curl += `&hub.secret=${secret}`;
            }
            if (lease) {
                curl += `&hub.lease_seconds=${lease}`;
            }
            curl += `' -H 'Authorization: ${token}'`;
            return curl;
        } else {
            return `curl -X POST '${endPoint}?hub.topic=${encodeURIComponent(topic)}&hub.callback=${encodeURIComponent(callback)}&hub.mode=${mode}' -H 'Authorization: ${token}'`;
        }
    }

    function getTopicName(topic) {
        let topicName = topic.name;
        // Remove the / from the topic name
        if (topicName.charAt(0) === '/') {
            topicName = topicName.substring(1);
        }
        return topicName;
    }

    function generateWSSubscriptionCommand(topic) {
        const token = generateAccessToken();
        if (topic.name.includes('*')) {
            return `wscat -c '${endPoint}' -H 'Authorization: ${token}'`;
        } else {
            return `wscat -c '${endPoint}/${getTopicName(topic)}' -H 'Authorization: ${token}'`;
        }
    }

    function generateSSESubscriptionCommand(topic) {
        const token = generateAccessToken();
        if (topic.name.includes('*')) {
            return `curl -X POST '${endPoint}' -H 'Authorization: ${token}'`;
        } else {
            return `curl -X POST '${endPoint}/${getTopicName(topic)}' -H 'Authorization: ${token}'`;
        }
    }

    if (!allTopics) {
        return <Progress />;
    } else {
        return (
            <>
                <FormControl className={classes.endpointSelectorRoot}>
                    <InputLabel>Servers</InputLabel>
                    <Select<commit_msg>Fix cUrl command for SSE<commit_after>/*
 * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import React, { useState, useEffect, useContext } from 'react';
import { ApiContext } from '../ApiContext';
import Api from '../../../../data/api';
import Progress from '../../../Shared/Progress';
import WebhookSubscriptionUI from './WebhookSubscriptionUI';
import GenericSubscriptionUI from './GenericSubscriptionUI';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import { makeStyles } from "@material-ui/core/styles/index";
import CONSTANTS from 'AppData/Constants';
import Alert from 'AppComponents/Shared/Alert';
import { useIntl } from 'react-intl';

const useStyles = makeStyles((theme) => (
    {
        endpointSelectorRoot: {
            paddingBottom: '20px',
        },
        // this styling is used to resemble the switch to swagger-ui switch
        selectList: {
            minWidth: '130px',
            maxWidth: '100%',
            border: '2px solid #41444e',
            fontFamily: 'sans-serif',
            fontSize: '14px',
            fontWeight: 700,
            padding: '2px 2px 2px 10px',
            border: '2px solid #41444e',
            borderRadius: '4px',
            color: '#3b4151',
        }
    }
));
export default function AsyncApiUI(props) {
    const classes = useStyles();
    const intl = useIntl();
    const {
        authorizationHeader,
        URLs,
        securitySchemeType,
        accessTokenProvider,
    } = props;
    const { api } = useContext(ApiContext);

    let initialEndpoint = URLs.http;
    if (api.type === CONSTANTS.API_TYPES.WS) {
        initialEndpoint = URLs.ws;
    }

    const [allTopics, setAllTopics] = useState('');
    const [endPoint, setEndpoint] = useState(initialEndpoint);

    useEffect(() => {
        const apiID = api.id;
        const apiClient = new Api();
        const promisedTopics = apiClient.getAllTopics(apiID);
        promisedTopics.then((response) => {
            setAllTopics(response.body);
        }).catch((error) => {
            console.log(error);
            Alert.error(intl.formatMessage({
                id: 'Apis.Details.AsyncApiConsole.AsyncApiUI.topics.get.error',
                defaultMessage: 'Error while retrieving topics for the API.',
            }));
        });
    }, []);

    const handleServerChange = (event) => {
        setEndpoint(event.target.value);
    };

    function generateAccessToken() {
        let token;
        if (authorizationHeader === 'apikey') {
            token = accessTokenProvider();
        } else if (securitySchemeType === 'BASIC') {
            token = 'Basic ' + accessTokenProvider();
        } else {
            token = 'Bearer ' + accessTokenProvider();
        }
        return token;
    }

    function generateGenericWHSubscriptionCurl(subscription) {
        const {
            topic, callback, secret, mode, lease,
        } = subscription;
        const token = generateAccessToken();
        if (mode === 'subscribe') {
            let curl = `curl -X POST '${endPoint}?hub.topic=${encodeURIComponent(topic)}&hub.callback=${encodeURIComponent(callback)}&hub.mode=${mode}`;
            if (secret) {
                curl += `&hub.secret=${secret}`;
            }
            if (lease) {
                curl += `&hub.lease_seconds=${lease}`;
            }
            curl += `' -H 'Authorization: ${token}'`;
            return curl;
        } else {
            return `curl -X POST '${endPoint}?hub.topic=${encodeURIComponent(topic)}&hub.callback=${encodeURIComponent(callback)}&hub.mode=${mode}' -H 'Authorization: ${token}'`;
        }
    }

    function getTopicName(topic) {
        let topicName = topic.name;
        // Remove the / from the topic name
        if (topicName.charAt(0) === '/') {
            topicName = topicName.substring(1);
        }
        return topicName;
    }

    function generateWSSubscriptionCommand(topic) {
        const token = generateAccessToken();
        if (topic.name.includes('*')) {
            return `wscat -c '${endPoint}' -H 'Authorization: ${token}'`;
        } else {
            return `wscat -c '${endPoint}/${getTopicName(topic)}' -H 'Authorization: ${token}'`;
        }
    }

    function generateSSESubscriptionCommand(topic) {
        const token = generateAccessToken();
        if (topic.name.includes('*')) {
            return `curl -X GET '${endPoint}' -H 'Authorization: ${token}'`;
        } else {
            return `curl -X GET '${endPoint}/${getTopicName(topic)}' -H 'Authorization: ${token}'`;
        }
    }

    if (!allTopics) {
        return <Progress />;
    } else {
        return (
            <>
                <FormControl className={classes.endpointSelectorRoot}>
                    <InputLabel>Servers</InputLabel>
                    <Select
{'fraction_non_alphanumeric': 0.1321751589504791, 'fraction_numerical': 0.00877585743709143, 'mean_word_length': 2.3247990473355165, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4160719', 'n_tokens_mistral': 3151, 'n_tokens_neox': 3102, 'n_words': 807}