fix: Provide a landing page for the studio (#565)

* fix: Provide a landing page for the studio

Fixes #44

Signed-off-by: Jeff MAURY <jmaury@redhat.com>
Co-authored-by: Florent BENOIT <fbenoit@redhat.com>

packages/backend/vitest.config.js

@@ -27,6 +27,7 @@ const config = {
     coverage: {
       provider: 'v8',
       reporter: ['lcov', 'text'],
+      extension: '.ts',
     },
 },
 resolve: {

packages/frontend/src/pages/Dashboard.spec.ts

@@ -0,0 +1,37 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect, vi } from 'vitest';
+import { screen, render } from '@testing-library/svelte';
+import Dashboard from '/@/pages/Dashboard.svelte';
+
+vi.mock('../utils/client', async () => {
+  return {
+    studioClient: {},
+  };
+});
+
+test('ensure dashboard is not empty', async () => {
+  render(Dashboard);
+
+  const innerContent = screen.getByLabelText('inner-content');
+  expect(innerContent).toBeDefined();
+  const renderer = innerContent.getElementsByTagName('article');
+  expect(renderer.length).toBe(1);
+});

packages/frontend/src/pages/Dashboard.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
+import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
+import { getDashboardContent } from './dashboard';
 </script>
 
 <NavPage searchEnabled="{false}" title="Dashboard">
   <div slot="content" class="flex flex-col min-w-full h-fit">
-    <div class="min-w-full flex-1"></div>
+    <div class="min-w-full flex-1" aria-label="inner-content">
+      <MarkdownRenderer source="{getDashboardContent()}" />
+    </div>
   </div>
 </NavPage>

packages/frontend/src/pages/dashboard.md

@@ -0,0 +1,49 @@
+# AI studio
+
+## Installing a released version
+
+If you want to install a specific version of the extension, go to Podman Desktop UI > ⚙ Settings > Extensions > Install a new extension from OCI Image.
+
+The name of the image to use is `ghcr.io/projectatomic/ai-studio:version_to_use`.
+
+You can get released tags for the image at https://github.com/projectatomic/studio-extension/pkgs/container/ai-studio.
+
+The released tags follow the major.minor.patch convention.
+
+If you want to install the last release version, use the latest tag.
+
+## Installing a development version
+
+You can install this extension from Podman Desktop UI > ⚙ Settings > Extensions > Install a new extension from OCI Image.
+
+The name of the image to use is `ghcr.io/projectatomic/ai-studio:nightly`.
+
+You can get earlier tags for the image at https://github.com/projectatomic/studio-extension/pkgs/container/ai-studio.
+
+These images contain development versions of the extension. There is no stable release yet.
+
+## Running in development mode
+
+From the Podman Desktop sources folder:
+
+```
+$ yarn watch --extension-folder path-to-extension-sources-folder/packages/backend
+```
+
+## Providing a custom catalog
+
+The extension provides a default catalog, but you can build your own catalog by creating a file `$HOME/podman-desktop/ai-studio/catalog.json`.
+
+The catalog provides lists of categories, recipes, and models.
+
+Each recipe can belong to one or several categories. Each model can be used by one or several recipes.
+
+The format of the catalog is not stable nor versioned yet, you can see the current catalog's format [in the sources of the extension](https://github.com/projectatomic/studio-extension/blob/main/packages/backend/src/ai.json).
+
+## Packaging sample applications
+
+Sample applications may be added to the catalog. See [packaging guide](PACKAGING-GUIDE.md) for detailed information.
+
+## Feedback
+
+You can provide your feedback on the extension with [this form](https://forms.gle/tctQ4RtZSiMyQr3R8) or create [an issue on this repository](https://github.com/projectatomic/studio-extension/issues).

packages/frontend/src/pages/dashboard.ts

@@ -0,0 +1,23 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import readme from './dashboard.md?raw';
+
+export function getDashboardContent(): string {
+  return readme;
+}

types/markdown.d.ts

@@ -0,0 +1,22 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+declare module '*.md?raw' {
+  const contents: string;
+  export = contents;
+}