Add Create API

package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "babel-preset-es2015": "^6.24.1",
+    "js-base64": "^2.5.2",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

packages/models/src/create-api-form-data.model.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2017 JBoss Inc
+ *
+ * Licensed 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 {ApiDesignTemplate} from './api-design-template.model';
+
+export class CreateApiFormData {
+
+    type: string;
+    name: string;
+    description: string;
+    template?: ApiDesignTemplate
+
+    constructor() {
+        this.type = "OpenAPI30";
+        this.name = null;
+        this.description = null;
+        this.template = null
+    }
+}

packages/models/src/index.ts

@@ -9,6 +9,7 @@ export * from './bitbucket-team.model';
 export * from './codegen-project.model';
 export * from './complete-linked-account.model';
 export * from './create-linked-account.model';
+export * from './create-api-form-data.model';
 export * from './deferred.model';
 export * from './editor-user.model';
 export * from './github-organization.model';

packages/models/src/new-api.model.ts

@@ -17,12 +17,12 @@
 
 export class NewApi {
 
-    specVersion: string;
+    type: string;
     name: string;
     description: string;
 
     constructor() {
-        this.specVersion = null;
+        this.type = null;
         this.name = "";
         this.description = "";
     }

packages/services/src/api-services/api-services.ts

@@ -1,4 +1,4 @@
-import {Api, ApiCollaborator} from "@apicurio/models";
+import {Api, NewApi, ImportApi, ApiCollaborator} from "@apicurio/models";
 import {AbstractHubService} from "./hub";
 import {ConfigService} from "../config/config.service";
 import {IAuthenticationService} from "../authentication/auth.service";
@@ -12,15 +12,29 @@ export class ApisService extends AbstractHubService {
     private cachedApis: Api[] = null;
     private cachedCollaborators: ApiCollaborator[] = null;
 
-    /**
-     * Constructor.
-     * @param authService
-     * @param config
-     */
     constructor(authService: IAuthenticationService, config: ConfigService) {
         super(authService, config);
     }
 
+  public createApi(api: NewApi): Promise<Api> {
+    console.info("[ApisService] Creating the API via the hub API");
+
+    const createApiUrl: string = this.endpoint("designs");
+    const options: AxiosRequestConfig = this.options({ "Accept": "application/json", "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+
+    console.info("[ApisService] Creating an API Design: %s", createApiUrl);
+    return this.httpPostWithReturn<NewApi, Api>(createApiUrl, api, options);
+  }
+
+  public importApi(api: ImportApi): Promise<Api> {
+    console.info("[ApisService] Importing an API design via the hub API");
+
+    const importApiUrl: string = this.endpoint("designs");
+    const options: AxiosRequestConfig = this.options({ "Accept": "application/json", "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+
+    console.info("[ApisService] Importing an API Design: %s", importApiUrl);
+    return this.httpPutWithReturn<ImportApi, Api>(importApiUrl, api, options);
+  }
               /**
      * @see ApisService.getCollaborators
      */

packages/services/src/api-services/hub.ts

@@ -116,5 +116,53 @@ export abstract class AbstractHubService {
     })
     .catch(error => console.log(error)); // handle error state
   }
+
+    // (createApiUrl, api, options);
+    protected httpPostWithReturn<I, O>(url: string, data: I, options: AxiosRequestConfig, successCallback?: (data: any) => any): Promise<O> {
+
+        const stringify = JSON.stringify(data);
+        const config: AxiosRequestConfig = {...{
+            method: 'post',
+            url: url,
+            data: stringify
+        }, ...options}
+
+        console.log('did it make it to the post');
+
+        return axios.request(config)
+        .then(response => {
+            let data = response;
+            console.log('what is the response' + data)
+            if(successCallback) {
+                return successCallback(data);
+            }
+            else {
+                return data;
+            }
+        })
+        .catch(error => console.log(error));
+    }
+
+    protected httpPutWithReturn<I, O>(url: string, data: I, options: any, successCallback?: (data: any) => any): Promise<O> {
+
+        const stringify = JSON.stringify(data);
+        const config: AxiosRequestConfig = {...{
+            method: 'put',
+            url: url,
+            data: stringify
+        }, ...options}
+
+        return axios.request(config)
+        .then(response => {
+            let data = response;
+            if(successCallback) {
+                return successCallback(data);
+            }
+            else {
+                return response;
+            }
+        })
+        .catch(error => console.log(error));
+    }
 
 }

packages/studio/src/app/app.css

@@ -64,19 +64,6 @@
   color: var(--pf-global--Color--100);
 }
 
-.app-create-api-form {
-  width: 50%;
-}
-
-.app-form-helper-text {
-  font-size: var(--pf-global--FontSize--sm);
-  color: var(--pf-global--Color--200);
-}
-
-.app-form-helper-text-asterisk {
-  color: var(--pf-global--danger-color--100);
-}
-
 .app-import-api-split-layout > .pf-l-split__item {
   width: 50%;
   margin-right: var(--pf-global--spacer--xl);

packages/studio/src/app/common/appConfig.ts

@@ -1,4 +1,9 @@
-import {ApisService, CurrentUserService, KeycloakAuthenticationService, ConfigService} from  '@apicurio/services';
+import {
+    ApisService,
+    CurrentUserService,
+    KeycloakAuthenticationService,
+    ConfigService
+} from  '@apicurio/services';
 
 // Initialize services.
 

packages/studio/src/app/pages/api/createApi.css

@@ -0,0 +1,57 @@
+.app-create-api__form-card-text span {
+    margin-left: var(--pf-global--spacer--sm);
+}
+
+.app-create-api__form-card {
+  box-shadow: none !important;
+}
+
+.app-create-api__form-card:hover {
+  box-shadow: none !important;
+  color: var(--pf-global--primary-color--100);
+}
+
+
+.app-create-api__form-card::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+}
+
+.app-create-api__form-card:hover::after {
+  border-color: var(--pf-global--primary-color--100);
+}
+
+.app-create-api__form-card-group {
+  display: grid;
+  grid-column-gap: var(--pf-global--spacer--sm);
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.app-create-api__form {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .app-create-api__form {
+    width: 50%;
+  }
+}
+
+.app-form-helper-text {
+  font-size: var(--pf-global--FontSize--sm);
+  color: var(--pf-global--Color--200);
+}
+
+.app-form-helper-text-asterisk {
+  color: var(--pf-global--danger-color--100);
+}
+
+.app-form-helper-text span {
+  margin-left: 0 !important;
+  padding-bottom: 0 !important;
+}