Add graphql api creation by SDL url and introspection

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx

@@ -160,6 +160,7 @@ export default function DefaultAPIForm(props) {
     const {
         onChange, onValidate, api, isAPIProduct, multiGateway,
         isWebSocket, children, appendChildrenBeforeEndpoint, hideEndpoint,
+        readOnlyAPIEndpoint,
     } = props;
 
     const [validity, setValidity] = useState({});
@@ -594,6 +595,7 @@ export default function DefaultAPIForm(props) {
                     <TextField
                         fullWidth
                         id='itest-id-apiendpoint-input'
+                        disabled={readOnlyAPIEndpoint !== null}
                         label={(
                             <FormattedMessage
                                 id='Apis.Create.Components.DefaultAPIForm.api.endpoint'
@@ -756,6 +758,7 @@ DefaultAPIForm.defaultProps = {
     onValidate: () => { },
     api: {}, // Uncontrolled component
     isWebSocket: false,
+    readOnlyAPIEndpoint: null,
 };
 DefaultAPIForm.propTypes = {
     api: PropTypes.shape({}),
@@ -764,4 +767,5 @@ DefaultAPIForm.propTypes = {
     isWebSocket: PropTypes.shape({}),
     onChange: PropTypes.func.isRequired,
     onValidate: PropTypes.func,
+    readOnlyAPIEndpoint: PropTypes.string,
 };

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/GraphQL/ApiCreateGraphQL.jsx

@@ -81,11 +81,14 @@ export default function ApiCreateGraphQL(props) {
             case 'version':
             case 'gatewayType':
             case 'endpoint':
+                return { ...currentState, [action]: value };
             case 'context':
             case 'isFormValid':
                 return { ...currentState, [action]: value };
             case 'inputType':
-                return { ...currentState, [action]: value, inputValue: value === 'url' ? '' : null };
+                return { ...currentState, [action]: value,
+                    inputValue: value === 'url' || value === 'endpoint' ? '' : null
+                };
             case 'graphQLInfo':
                 return { ...currentState, [action]: value };
             case 'preSetAPI':
@@ -145,6 +148,7 @@ export default function ApiCreateGraphQL(props) {
             endpoint,
             gatewayType,
             implementationType,
+            inputType,
             inputValue,
             graphQLInfo: { operations },
         } = apiInputs;
@@ -166,7 +170,6 @@ export default function ApiCreateGraphQL(props) {
             policies,
             operations,
         };
-        const uploadMethod = 'file';
         if (endpoint) {
             additionalProperties.endpointConfig = {
                 endpoint_type: 'http',
@@ -182,10 +185,14 @@ export default function ApiCreateGraphQL(props) {
         const apiData = {
             additionalProperties: JSON.stringify(additionalProperties),
             implementationType,
-            [uploadMethod]: uploadMethod,
-            file: inputValue,
         };
 
+        if (inputType === 'file') {
+            apiData.file = inputValue;
+        } else if (inputType === 'url' || inputType === 'endpoint') {
+            apiData.schema = apiInputs.graphQLInfo.graphQLSchema.schemaDefinition;
+        }
+
         newApi
             .importGraphQL(apiData)
             .then((response) => {
@@ -222,13 +229,14 @@ export default function ApiCreateGraphQL(props) {
                     <Typography variant='h5'>
                         <FormattedMessage
                             id='Apis.Create.GraphQL.ApiCreateGraphQL.heading'
-                            defaultMessage='Create an API using a GraphQL SDL definition'
+                            defaultMessage='Create a GraphQL API'
                         />
                     </Typography>
                     <Typography variant='caption'>
                         <FormattedMessage
                             id='Apis.Create.GraphQL.ApiCreateGraphQL.sub.heading'
-                            defaultMessage='Create an API by importing an existing GraphQL SDL definition.'
+                            defaultMessage={'Create a GraphQL API by importing a SDL definition'
+                                + ' from a file or URL, or by using endpoint.'}
                         />
                     </Typography>
                 </>
@@ -272,6 +280,7 @@ export default function ApiCreateGraphQL(props) {
                             multiGateway={multiGateway}
                             api={apiInputs}
                             isAPIProduct={false}
+                            readOnlyAPIEndpoint={apiInputs.inputType==='endpoint' ? apiInputs.endpoint : null}
                         />
                     )}
                 </Grid>