feat: simple markdown component

Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

packages/webview/package.json

@@ -49,6 +49,7 @@
     "@xterm/xterm": "^5.5.0",
     "humanize-duration": "^3.33.0",
     "jsdom": "^27.0.0",
+    "micromark": "^4.0.2",
     "monaco-editor": "^0.54.0",
     "prettier": "^3.6.1",
     "prettier-plugin-svelte": "^3.3.3",

packages/webview/src/component/dashboard/KubernetesProviderCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { API_NAVIGATION, type KubernetesProvider } from '@kubernetes-dashboard/channels';
+import { Button } from '@podman-desktop/ui-svelte';
+import Fa from 'svelte-fa';
+import IconImage from '/@/component/icons/IconImage.svelte';
+import { getContext } from 'svelte';
+import { Remote } from '/@/remote/remote';
+import Markdown from '/@/markdown/Markdown.svelte';
+
+interface Props {
+  provider: KubernetesProvider;
+}
+
+let { provider }: Props = $props();
+
+const remote = getContext<Remote>(Remote);
+const navigationApi = remote.getProxy(API_NAVIGATION);
+
+async function createNew(provider: KubernetesProvider): Promise<void> {
+  return navigationApi.navigateToProviderNewConnection(provider.id);
+}
+</script>
+
+<div class="rounded-xl p-5 text-left bg-[var(--pd-content-card-bg)]">
+  <div class="flex justify-left text-[var(--pd-details-empty-icon)] py-2 mb-2">
+    <IconImage image={provider?.images?.icon} class="mx-0 max-h-10" alt={provider.creationDisplayName}></IconImage>
+  </div>
+  <h1 class="text-lg font-semibold mb-4">
+    {provider.creationDisplayName ?? 'Create'}
+  </h1>
+
+  <p class="text-sm text-[var(--pd-content-text)] mb-6">
+    <Markdown markdown={provider.emptyConnectionMarkdownDescription} />
+  </p>
+
+  <div class="flex justify-center">
+    <Button
+      type="primary"
+      on:click={(): Promise<void> => createNew(provider)}
+      class="flex items-center"
+      aria-label={provider.creationButtonTitle ?? 'Create new'}>
+      <Fa icon={faPlusCircle} size="1.2x" class="mr-1" />
+      {provider.creationButtonTitle ?? 'Create new'}
+    </Button>
+  </div>
+</div>

packages/webview/src/markdown/Markdown.spec.ts

@@ -0,0 +1,44 @@
+/**********************************************************************
+ * Copyright (C) 2023 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 { render, screen } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+
+import Markdown from './Markdown.svelte';
+
+test('Expect to have bold', async () => {
+  const component = render(Markdown, { markdown: '**bold**' });
+  const markdownContent = screen.getByRole('region', { name: 'markdown-content' });
+  expect(markdownContent).toBeInTheDocument();
+  expect(markdownContent).toContainHTML('<strong>bold</strong>');
+
+  await component.rerender({ markdown: '**bold2**' });
+  expect(markdownContent).toContainHTML('<strong>bold2</strong>');
+});
+
+test('Expect to have italic', async () => {
+  const component = render(Markdown, { markdown: '_italic_' });
+  const markdownContent = screen.getByRole('region', { name: 'markdown-content' });
+  expect(markdownContent).toBeInTheDocument();
+  expect(markdownContent).toContainHTML('<em>italic</em>');
+
+  await component.rerender({ markdown: '_italic2_' });
+  expect(markdownContent).toContainHTML('<em>italic2</em>');
+});

packages/webview/src/markdown/Markdown.svelte

@@ -0,0 +1,80 @@
+<!-- The markdown rendered has it's own style that you'll have to customize / check against podman desktop
+UI guidelines -->
+<style lang="postcss">
+.markdown > :global(p) {
+  line-height: normal;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+}
+
+.markdown > :global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5) {
+  font-size: revert;
+  line-height: normal;
+  font-weight: revert;
+  border-bottom: 1px solid #444;
+  margin-bottom: 20px;
+}
+
+.markdown > :global(ul) {
+  line-height: normal;
+  list-style: revert;
+  margin: revert;
+  padding: revert;
+}
+
+.markdown > :global(b),
+:global(strong) {
+  font-weight: 600;
+}
+.markdown > :global(blockquote) {
+  opacity: 0.8;
+  line-height: normal;
+}
+.markdown :global(a) {
+  color: var(--pd-link);
+  text-decoration: none;
+  border-radius: 4px;
+}
+.markdown :global(a):hover {
+  background-color: var(--pd-link-hover-bg);
+}
+</style>
+
+<script lang="ts">
+import { micromark } from 'micromark';
+import { onMount } from 'svelte';
+
+let text: string;
+let html: string;
+
+// Optional attribute to specify the markdown to use
+// the user can use: <Markdown>**bold</Markdown> or <Markdown markdown="**bold**" /> syntax
+export let markdown = '';
+
+// Render the markdown or the html+micromark markdown reactively
+$: markdown
+  ? // eslint-disable-next-line sonarjs/no-nested-assignment
+    (html = micromark(markdown))
+  : undefined;
+
+onMount(() => {
+  if (markdown) {
+    text = markdown;
+  }
+  html = micromark(text);
+});
+</script>
+
+<!-- Placeholder to grab the content if people are using <Markdown>**bold</Markdown> -->
+<span contenteditable="false" bind:textContent={text} class="hidden">
+  <slot />
+</span>
+
+<section class="markdown" aria-label="markdown-content">
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html html}
+</section>