fix: provide icon for playgrounds (#914)

* fix: provide icon for playgrounds Fixes #527 Signed-off-by: Jeff MAURY <[email protected]>
containers · Apr 18, 2024 · c97f233 · c97f233
1 parent cb02757
commit c97f233
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 0 deletions.
diff --git a/packages/frontend/src/lib/icons/PlaygroundWhite.svelte b/packages/frontend/src/lib/icons/PlaygroundWhite.svelte
@@ -0,0 +1,46 @@
+<div role="img" class="rounded py-[6px] pl-[7px] pr-[5px]">
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    version="1.1"
+    id="svg3"
+    xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      style="color:#000000;fill:#3c8d47;fill-opacity:1;stroke-width:0.752434;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+      d="M 3.0097361,0 C 1.3553589,0 0,1.355359 0,3.0097361 V 20.990264 C 0,22.644641 1.3553589,24 3.0097361,24 H 20.990264 C 22.644641,24 24,22.644641 24,20.990264 V 3.0097361 C 24,1.355359 22.644641,0 20.990264,0 Z"
+      id="rect5"></path
+    ><g id="g5" transform="matrix(0.9420863,0,0,0.9420863,-5.6137888,-12.058117)" style="fill:#ffffff"
+      ><circle
+        cx="16.541031"
+        cy="23.271023"
+        r="0.80865288"
+        fill="currentColor"
+        id="circle1"
+        style="fill:#ffffff;stroke-width:0.808654"></circle
+      ><path
+        fill="currentColor"
+        d="m 15.32805,24.888338 a 0.80865225,0.80865225 0 0 0 -0.808244,0.808244 0.7957158,0.7957158 0 0 0 0.389406,0.674669 0.78601008,0.78601008 0 0 0 0.418838,0.134233 0.80865225,0.80865225 0 0 0 0.808245,-0.808245 0.82159096,0.82159096 0 0 0 -0.808245,-0.808246"
+        id="path1"
+        style="fill:#ffffff;stroke-width:0.808654"></path
+      ><path
+        fill="currentColor"
+        d="m 11.254858,31.36806 c 4.51e-4,0.892576 0.723914,1.616038 1.61649,1.616489 h 11.321087 c 0.891471,-0.0031 1.613379,-0.725018 1.616489,-1.616489 v -9.50652 l -1.616489,1.61649 v 4.654538 h -3.234564 c 0,3.234638 -4.851959,3.234638 -4.851959,0 h -3.234564 l -0.0081,-8.086522 h 7.899743 l 1.616489,-1.61649 h -9.508988 c -0.893875,-0.0027 -1.619181,0.722615 -1.616489,1.61649 z"
+        id="path2"
+        style="fill:#ffffff;stroke-width:0.808654"></path
+      ><path
+        fill="currentColor"
+        d="m 20.103961,21.721648 c -0.303374,-0.303375 -0.710893,-0.13747 -0.935028,0.251303 l -0.941821,1.54857 a 1.681998,1.681998 0 0 1 1.20218,0.9305 1.3084011,1.3084011 0 0 1 0.477702,-0.103508 l 0.0081,-8.15e-4 a 1.3771358,1.3771358 0 0 1 1.360658,1.351602 l 0.01439,0.01126 0.307903,-0.181957 0.704101,-0.416574 c 0.384879,-0.235455 0.554678,-0.631653 0.251303,-0.935029 l -0.679197,-0.679202 4.264906,-4.264906 -1.143316,-1.143316 -4.264,4.264906 z"
+        id="path3"
+        style="fill:#ffffff;stroke-width:0.808654"></path
+      ><circle
+        cx="17.754019"
+        cy="25.697001"
+        r="0.80865288"
+        fill="currentColor"
+        id="circle3"
+        style="fill:#ffffff;stroke-width:0.808654"></circle
+      ></g
+    ></svg>
+</div>
diff --git a/packages/frontend/src/lib/table/playground/PlaygroundColumnIcon.svelte b/packages/frontend/src/lib/table/playground/PlaygroundColumnIcon.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+import PlaygroundWhite from '../../icons/PlaygroundWhite.svelte';
+</script>
+
+<PlaygroundWhite />
diff --git a/packages/frontend/src/pages/Playgrounds.spec.ts b/packages/frontend/src/pages/Playgrounds.spec.ts
@@ -0,0 +1,112 @@
+/**********************************************************************
+ * 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 { vi, test, expect } from 'vitest';
+import { screen, render, within } from '@testing-library/svelte';
+import Playgrounds from '/@/pages/Playgrounds.svelte';
+import * as catalogStore from '/@/stores/catalog';
+import { readable } from 'svelte/store';
+import type { ApplicationCatalog } from '@shared/src/models/IApplicationCatalog';
+
+const mocks = vi.hoisted(() => {
+  return {
+    conversationSubscribeMock: vi.fn(),
+    conversationsQueriesMock: {
+      subscribe: (f: (msg: any) => void) => {
+        f(mocks.conversationSubscribeMock());
+        return () => {};
+      },
+    },
+  };
+});
+
+vi.mock('/@/utils/client', async () => {
+  return {
+    studioClient: {
+      getCatalog: vi.fn(),
+    },
+    rpcBrowser: {
+      subscribe: () => {
+        return {
+          unsubscribe: () => {},
+        };
+      },
+    },
+  };
+});
+
+vi.mock('../stores/conversations', async () => {
+  return {
+    conversations: mocks.conversationsQueriesMock,
+  };
+});
+
+vi.mock('/@/stores/catalog', async () => {
+  return {
+    catalog: vi.fn(),
+  };
+});
+
+const initialCatalog: ApplicationCatalog = {
+  categories: [],
+  models: [
+    {
+      id: 'model1',
+      name: 'Model 1',
+      description: 'Readme for model 1',
+      hw: 'CPU',
+      registry: 'Hugging Face',
+      license: '?',
+      url: 'https://model1.example.com',
+      memory: 1000,
+    },
+  ],
+  recipes: [],
+};
+
+test('should display There is no playground yet', async () => {
+  mocks.conversationSubscribeMock.mockResolvedValue([]);
+  render(Playgrounds);
+
+  const status = screen.getByRole('status');
+  expect(status).toBeDefined();
+});
+
+test('should display one model', async () => {
+  mocks.conversationSubscribeMock.mockReturnValue([
+    {
+      id: 'playground-0',
+      name: 'Playground 0',
+      modelId: 'model1',
+      messages: [],
+    },
+  ]);
+  vi.mocked(catalogStore).catalog = readable(initialCatalog);
+
+  render(Playgrounds);
+
+  const table = screen.getByRole('table');
+  expect(table).toBeDefined();
+  screen.debug(table, 4096);
+
+  const rows = screen.queryAllByRole('row');
+  expect(rows.length > 0).toBeTruthy();
+
+  const icon = await within(rows[1]).findByRole('img');
+  expect(icon).toBeDefined();
+});
diff --git a/packages/frontend/src/pages/Playgrounds.svelte b/packages/frontend/src/pages/Playgrounds.svelte
@@ -9,8 +9,10 @@ import { Row, Column } from '../lib/table/table';
 import type { PlaygroundV2 } from '@shared/src/models/IPlaygroundV2';
 import ConversationColumnAction from '/@/lib/table/playground/ConversationColumnAction.svelte';
 import { conversations } from '/@/stores/conversations';
+import PlaygroundColumnIcon from '/@/lib/table/playground/PlaygroundColumnIcon.svelte';
 
 const columns: Column<PlaygroundV2>[] = [
+  new Column<PlaygroundV2>('', { width: '40px', renderer: PlaygroundColumnIcon }),
   new Column<PlaygroundV2>('Name', { width: '1fr', renderer: PlaygroundColumnName }),
   new Column<PlaygroundV2>('Model', { width: '1fr', renderer: PlaygroundColumnModel }),
   new Column<PlaygroundV2>('Actions', { width: '40px', renderer: ConversationColumnAction, align: 'center' }),