Update UI to fetch README and YAML from Hub APIs

As of now Hub UI was fetching the readme and yaml directly from the git
provider such Github, Gitlab or Bitbucket. In case of private git repos,
UI was incapable of fetching the content directly as it requires
authentication. To solve this two endpoints were introduced by Hub API
`/readme` and `/yaml` which will do the needful. Updating UI to make API
calls to the Hub server instead of git provider directly.

Signed-off-by: vinamra28 <vinjain@redhat.com>

ui/src/api/index.ts

@@ -32,8 +32,8 @@ export interface Api {
   resourceVersion(resourceId: number): Promise<IVersion>;
   versionUpdate(versionId: number): Promise<IVersion>;
   authentication(authCode: string): Promise<AuthResponse>;
-  readme(rawURL: string): Promise<string>;
-  yaml(rawURL: string): Promise<string>;
+  readme(resourceKey: string, version: string): Promise<string>;
+  yaml(resourceKey: string, version: string): Promise<string>;
   getRating(resourceId: number, token: string): Promise<Rating>;
   setRating(resourceId: number, token: string, rating: number): Promise<void | null>;
   getRefreshToken(refreshToken: string): Promise<ITokenInfo>;
@@ -98,19 +98,22 @@ export class Hub implements Api {
     }
   }
 
-  async readme(rawURL: string) {
+  async readme(resourceKey: string, version: string) {
     try {
-      const URL = rawURL.substring(0, rawURL.lastIndexOf('/') + 1);
-      return axios.get(`${URL}/README.md`).then((response) => response.data);
+      const URL = `${API_URL}/${API_VERSION}/resource/${resourceKey}/${version}/readme`;
+      return axios.get(URL.toLowerCase()).then((response) => response.data.data.readme);
     } catch (err) {
       return err.response;
     }
   }
 
-  async yaml(rawURL: string) {
+  async yaml(resourceKey: string, version: string) {
     try {
       const newLine = '\n';
-      return axios.get(`${rawURL}`).then((response) => '```yaml' + newLine + response.data);
+      const URL = `${API_URL}/${API_VERSION}/resource/${resourceKey}/${version}/yaml`;
+      return axios
+        .get(URL.toLowerCase())
+        .then((response) => '```yaml' + newLine + response.data.data.yaml);
     } catch (err) {
       return err.response;
     }

ui/src/api/testutil.ts

@@ -66,9 +66,9 @@ export class FakeHub implements Api {
     });
   }
 
-  async readme(rawURL: string) {
-    const splitRawUrl = rawURL.split('/');
-    const resourceName = splitRawUrl[splitRawUrl.length - 3];
+  async readme(resourceKey: string, _: string) {
+    const splitRawUrl = resourceKey.split('/');
+    const resourceName = splitRawUrl[splitRawUrl.length - 1];
     const data = `${this.dataDir}/${resourceName}-Readme.md`;
 
     const ret = () => fs.readFileSync(data).toString();
@@ -77,9 +77,9 @@ export class FakeHub implements Api {
     });
   }
 
-  async yaml(rawURL: string) {
-    const splitRawUrl = rawURL.split('/');
-    const resourceName = splitRawUrl[splitRawUrl.length - 3];
+  async yaml(resourceKey: string, _: string) {
+    const splitRawUrl = resourceKey.split('/');
+    const resourceName = splitRawUrl[splitRawUrl.length - 1];
     const data = `${this.dataDir}/${resourceName}.yaml`;
 
     const ret = () => fs.readFileSync(data).toString();

ui/src/store/resource.ts

@@ -349,10 +349,10 @@ export const ResourceStore = types
         const { api, resources } = self;
         const resource = resources.get(name);
         assert(resource);
-        const url = resource.displayVersion.rawURL;
-        assert(url);
+        const version = resource.displayVersion.version;
+        assert(version);
 
-        const readme = yield api.readme(url);
+        const readme = yield api.readme(name, version);
         resource.readme = readme;
       } catch (err) {
         self.err = err.toString();
@@ -367,10 +367,10 @@ export const ResourceStore = types
         const { api, resources } = self;
         const resource = resources.get(name);
         assert(resource);
-        const url = resource.displayVersion.rawURL;
-        assert(url);
+        const version = resource.displayVersion.version;
+        assert(version);
 
-        const yaml = yield api.yaml(url);
+        const yaml = yield api.yaml(name, version);
         resource.yaml = yaml;
       } catch (err) {
         self.err = err.toString();