fix(ui): layers explorer margin issue

packages/renderer/src/lib/image/FilesystemLayerView.spec.ts

@@ -0,0 +1,61 @@
+/**********************************************************************
+ * 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 type { ImageFile } from '@podman-desktop/api';
+import { render } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+
+import { FilesystemNode } from '/@/lib/image/filesystem-tree';
+
+import FilesystemLayerView from './FilesystemLayerView.svelte';
+
+test('simple folder should have margin provided as prop', async () => {
+  const { getByText } = render(FilesystemLayerView, {
+    tree: new FilesystemNode<ImageFile>('folder-example', true),
+    margin: 10,
+    root: false,
+  });
+
+  const div = getByText('folder-example');
+  expect(
+    Array.from(div.childNodes.values())
+      .filter((node): node is HTMLSpanElement => node instanceof HTMLSpanElement)
+      .some(node => node.style?.marginLeft === '10rem'),
+  ).toBeTruthy();
+});
+
+test('root folder with one children should have margin increment by 0.5', async () => {
+  const root = new FilesystemNode<ImageFile>('folder-example', true);
+  const child = new FilesystemNode<ImageFile>('file-example', true);
+  child.hidden = false;
+  root.children.set('potatoes', child);
+
+  const { getByText } = render(FilesystemLayerView, {
+    tree: root,
+    margin: 10,
+    root: true,
+  });
+
+  const div = getByText('file-example');
+  expect(
+    Array.from(div.childNodes.values())
+      .filter((node): node is HTMLSpanElement => node instanceof HTMLSpanElement)
+      .some(node => node.style?.marginLeft === '10.5rem'),
+  ).toBeTruthy();
+});

packages/renderer/src/lib/image/FilesystemLayerView.svelte

@@ -58,26 +58,26 @@ function getLink(file: ImageFile | undefined): string {
   {#if root}
     {#if children}
       {#each children as [_, child]}
-        <svelte:self root={false} margin={margin + 2} tree={child} layerMode={layerMode} />
+        <svelte:self root={false} margin={margin + 0.5} tree={child} layerMode={layerMode} />
       {/each}
     {/if}
   {:else}
     <div class="font-mono">{tree.data && !tree.hidden ? modeString(tree.data) : ''}</div>
     <div class="text-right">{tree.data && !tree.hidden ? tree.data.uid + ':' + tree.data.gid : ''}</div>
     <span class="text-right">{!tree.hidden ? new ImageUtils().getHumanSize(tree.size) : ''}</span>
     {#if children?.size || (file && file.type === 'directory')}
-      <button class={`text-left ml-${margin} ${colorClass}`} on:click={toggleExpansion}>
+      <button style="margin-left: {margin}rem" class={`text-left ${colorClass}`} on:click={toggleExpansion}>
         <span class="cursor-pointer inline-block mr-1" class:rotate-90={arrowDown}>&gt;</span>
         {label}<span class="text-[var(--pd-content-text)] opacity-70">{getLink(tree?.data)}</span>
       </button>
       {#if expanded && children}
         {#each children as [_, child]}
-          <svelte:self root={false} margin={margin + 2} tree={child} layerMode={layerMode} />
+          <svelte:self root={false} margin={margin + 0.5} tree={child} layerMode={layerMode} />
         {/each}
       {/if}
     {:else}
       <div class={`${colorClass}`}>
-        <span class={`pl-4 ml-${margin}`}></span>
+        <span style="margin-left: {margin}rem" class="pl-4"></span>
         {label}<span class="text-[var(--pd-content-text)] opacity-70">{getLink(tree?.data)}</span>
       </div>
     {/if}