feat: support glob patterns in editor.fileTree.allowEdits (#332)

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -84,6 +84,34 @@ type I18nText = {
    */
   filesTitleText?: string,
 
+  /**
+   * Text shown on file tree's context menu's file creation button.
+   *
+   * @default 'Create file'
+   */
+  fileTreeCreateFileText?: string,
+
+  /**
+   * Text shown on file tree's context menu's folder creation button.
+   *
+   * @default 'Create folder'
+   */
+  fileTreeCreateFolderText?: string,
+
+  /**
+   * Text shown on dialog when user attempts to edit files that don't match allowed patterns.
+   *
+   * @default 'This action is not allowed'
+   */
+  fileTreeActionNotAllowed?: string,
+
+  /**
+   * Text shown on dialog describing allowed patterns when file or folder createion failed.
+   *
+   * @default 'Created files and folders must match following patterns:'
+   */
+  fileTreeAllowedPatternsText?: string,
+
   /**
    * Text shown on top of the steps section.
    *
@@ -144,9 +172,11 @@ File tree can be set to allow file editing from right clicks by setting `fileTre
 The `Editor` type has the following shape:
 
 ```ts
+type GlobPattern = string
+
 type Editor =
     | false
-    | { editor: { allowEdits: boolean } }
+    | { editor: { allowEdits: boolean | GlobPattern | GlobPattern[] } }
 
 ```
 
@@ -161,6 +191,18 @@ editor: # Editor is visible
 editor: # Editor is visible
   fileTree: # File tree is visible
     allowEdits: true # User can add new files and folders from the file tree
+
+
+editor: # Editor is visible
+  fileTree: # File tree is visible
+    allowEdits: "/src/**" # User can add files and folders anywhere inside "/src/"
+
+editor: # Editor is visible
+  fileTree: # File tree is visible
+    allowEdits:
+      - "/*" # User can add files and folders directly in the root
+      - "/first-level/allowed-filename-only.js" # Only "allowed-filename-only.js" inside "/first-level" folder
+      - "**/second-level/**" # Anything inside "second-level" folders anywhere
 ```
 
 ##### `previews`

docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx

@@ -116,6 +116,8 @@ A component to list files in a tree view.
   }
   ```
 
+* `allowEditPatterns?: string[]` - Glob patterns for paths that allow editing files and folders. Disabled by default.
+
 * `hideRoot: boolean` - Whether or not to hide the root directory in the tree. Defaults to `false`.
 
 * `hiddenFiles: (string | RegExp)[]` - A list of file paths that should be hidden from the tree.

e2e/src/content/tutorial/tests/file-tree/allow-edits-glob/_files/first-level/file.js

@@ -0,0 +1 @@
+export default 'File in first level';

e2e/src/content/tutorial/tests/file-tree/allow-edits-glob/_files/first-level/second-level/file.js

@@ -0,0 +1 @@
+export default 'File in second level';

e2e/src/content/tutorial/tests/file-tree/allow-edits-glob/content.md

@@ -0,0 +1,18 @@
+---
+type: lesson
+title: Allow Edits Glob
+previews: false
+editor:
+  fileTree:
+    allowEdits:
+      # Items in root
+      - "/*"
+      # Only "allowed-filename-only.js" inside "/first-level" folder
+      - "/first-level/allowed-filename-only.js"
+      # Anything inside "second-level" folders anywhere
+      - "**/second-level/**"
+terminal:
+  panels: terminal
+---
+
+# File Tree test - Allow Edits Glob

e2e/test/file-tree.test.ts

@@ -155,3 +155,70 @@ test('user can create folders', async ({ page }) => {
     await expect(terminalOutput).toContainText(folder, { useInnerText: true });
   }
 });
+
+test('user can create files and folders in allowed directories', async ({ page }) => {
+  await page.goto(`${BASE_URL}/allow-edits-glob`);
+  await expect(page.getByRole('heading', { level: 1, name: 'File Tree test - Allow Edits Glob' })).toBeVisible();
+
+  // wait for terminal to start
+  const terminal = page.getByRole('textbox', { name: 'Terminal input' });
+  const terminalOutput = page.getByRole('tabpanel', { name: 'Terminal' });
+  await expect(terminalOutput).toContainText('~/tutorial', { useInnerText: true });
+
+  // can create files in root and inside "second-level"
+  for (const [locator, name, type] of [
+    [page.getByTestId('file-tree-root-context-menu'), 'new-file.js', 'file'],
+    [page.getByRole('button', { name: 'second-level' }), 'new-folder.js', 'folder'],
+  ] as const) {
+    await locator.click({ button: 'right' });
+    await page.getByRole('menuitem', { name: `Create ${type}` }).click();
+
+    await page.locator('*:focus').fill(name);
+    await page.locator('*:focus').press('Enter');
+    await expect(page.getByRole('button', { name })).toBeVisible();
+  }
+
+  await expect(page.getByRole('button', { name: 'new-file.js' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'new-folder' })).toBeVisible();
+
+  // verify that files are present on file system via terminal
+  for (const [directory, folder] of [
+    ['./', 'new-file.js'],
+    ['./first-level/second-level/', 'new-folder'],
+  ]) {
+    await terminal.fill(`clear; ls ${directory}`);
+    await terminal.press('Enter');
+
+    await expect(terminalOutput).toContainText(folder, { useInnerText: true });
+  }
+});
+
+test('user cannot create files or folders in disallowed directories', async ({ page }) => {
+  await page.goto(`${BASE_URL}/allow-edits-glob`);
+  await expect(page.getByRole('heading', { level: 1, name: 'File Tree test - Allow Edits Glob' })).toBeVisible();
+
+  // wait for terminal to start
+  const terminalOutput = page.getByRole('tabpanel', { name: 'Terminal' });
+  await expect(terminalOutput).toContainText('~/tutorial', { useInnerText: true });
+
+  for (const [name, type] of [
+    ['new-file.js', 'file'],
+    ['new-folder', 'folder'],
+  ] as const) {
+    await page.getByRole('button', { name: 'first-level' }).click({ button: 'right' });
+    await page.getByRole('menuitem', { name: `Create ${type}` }).click();
+
+    await page.locator('*:focus').fill(name);
+    await page.locator('*:focus').press('Enter');
+
+    const dialog = page.getByRole('dialog', { name: 'This action is not allowed' });
+
+    await expect(dialog.getByText('Created files and folders must match following patterns:')).toBeVisible();
+    await expect(dialog.getByRole('listitem').nth(0)).toHaveText('/*');
+    await expect(dialog.getByRole('listitem').nth(1)).toHaveText('/first-level/allowed-filename-only.js');
+    await expect(dialog.getByRole('listitem').nth(2)).toHaveText('**/second-level/**');
+
+    await dialog.getByRole('button', { name: 'OK' }).click();
+    await expect(dialog).not.toBeVisible();
+  }
+});

e2e/uno.config.ts

@@ -1,5 +1,10 @@
 import { defineConfig } from '@tutorialkit/theme';
 
 export default defineConfig({
-  // add your UnoCSS config here: https://unocss.dev/guide/config-file
+  // required for TutorialKit monorepo development mode
+  content: {
+    pipeline: {
+      include: '**',
+    },
+  },
 });

packages/astro/src/default/components/LoginButton.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react';
-import { classNames } from '@tutorialkit/react';
+import { Button } from '@tutorialkit/react';
 import { useEffect, useRef, useState } from 'react';
 import { authStore } from '../stores/auth-store';
 import { login, logout } from './webcontainer';
@@ -48,21 +48,8 @@ export function LoginButton() {
   }, [authStatus.status]);
 
   return (
-    <button
-      className={classNames('flex font-500 disabled:opacity-32 items-center text-sm ml-2 px-4 py-1 rounded-md', {
-        'bg-tk-elements-topBar-primaryButton-backgroundColor text-tk-elements-topBar-primaryButton-textColor':
-          showLogin,
-        'bg-tk-elements-topBar-secondaryButton-backgroundColor text-tk-elements-topBar-secondaryButton-textColor':
-          !showLogin,
-        'hover:bg-tk-elements-topBar-primaryButton-backgroundColorHover hover:text-tk-elements-topBar-primaryButton-textColorHover':
-          !disabled && showLogin,
-        'hover:bg-tk-elements-topBar-secondaryButton-backgroundColorHover hover:text-tk-elements-topBar-secondaryButton-textColorHover':
-          !disabled && !showLogin,
-      })}
-      disabled={disabled}
-      onClick={onClick}
-    >
+    <Button className="ml-2" variant={showLogin ? 'primary' : 'secondary'} disabled={disabled} onClick={onClick}>
       {showLogin ? 'Login' : 'Logout'}
-    </button>
+    </Button>
   );
 }

packages/astro/src/default/styles/variables.css

@@ -142,6 +142,22 @@
   --tk-elements-link-secondaryColor: var(--tk-text-secondary);
   --tk-elements-link-secondaryColorHover: var(--tk-text-primary);
 
+  /* Primary Button */
+  --tk-elements-primaryButton-backgroundColor: var(--tk-background-accent-secondary);
+  --tk-elements-primaryButton-backgroundColorHover: var(--tk-background-accent-active);
+  --tk-elements-primaryButton-textColor: var(--tk-text-primary-inverted);
+  --tk-elements-primaryButton-textColorHover: var(--tk-text-primary-inverted);
+  --tk-elements-primaryButton-iconColor: var(--tk-text-primary-inverted);
+  --tk-elements-primaryButton-iconColorHover: var(--tk-text-primary-inverted);
+
+  /* Secondary Button */
+  --tk-elements-secondaryButton-backgroundColor: var(--tk-elements-app-backgroundColor);
+  --tk-elements-secondaryButton-backgroundColorHover: var(--tk-background-secondary);
+  --tk-elements-secondaryButton-textColor: var(--tk-text-secondary);
+  --tk-elements-secondaryButton-textColorHover: var(--tk-text-primary);
+  --tk-elements-secondaryButton-iconColor: var(--tk-text-secondary);
+  --tk-elements-secondaryButton-iconColorHover: var(--tk-text-primary);
+
   /* Content */
   --tk-elements-content-textColor: var(--tk-text-body);
   --tk-elements-content-headingTextColor: var(--tk-text-primary);
@@ -163,22 +179,6 @@
   --tk-elements-topBar-logo-color: var(--tk-text-active);
   --tk-elements-topBar-logo-colorHover: var(--tk-text-active);
 
-  /* Top Bar > Primary Button */
-  --tk-elements-topBar-primaryButton-backgroundColor: var(--tk-background-accent-secondary);
-  --tk-elements-topBar-primaryButton-backgroundColorHover: var(--tk-background-accent-active);
-  --tk-elements-topBar-primaryButton-textColor: var(--tk-text-primary-inverted);
-  --tk-elements-topBar-primaryButton-textColorHover: var(--tk-text-primary-inverted);
-  --tk-elements-topBar-primaryButton-iconColor: var(--tk-text-primary-inverted);
-  --tk-elements-topBar-primaryButton-iconColorHover: var(--tk-text-primary-inverted);
-
-  /* Top Bar > Secondary Button */
-  --tk-elements-topBar-secondaryButton-backgroundColor: var(--tk-elements-topBar-backgroundColor);
-  --tk-elements-topBar-secondaryButton-backgroundColorHover: var(--tk-background-secondary);
-  --tk-elements-topBar-secondaryButton-textColor: var(--tk-text-secondary);
-  --tk-elements-topBar-secondaryButton-textColorHover: var(--tk-text-primary);
-  --tk-elements-topBar-secondaryButton-iconColor: var(--tk-text-secondary);
-  --tk-elements-topBar-secondaryButton-iconColorHover: var(--tk-text-primary);
-
   /* Previews */
   --tk-elements-previews-borderColor: theme('colors.gray.200');
 

packages/astro/src/default/utils/content.ts

@@ -1,8 +1,7 @@
 import path from 'node:path';
 import type { ChapterSchema, Lesson, LessonSchema, PartSchema, Tutorial, TutorialSchema } from '@tutorialkit/types';
-import { interpolateString } from '@tutorialkit/types';
+import { interpolateString, DEFAULT_LOCALIZATION } from '@tutorialkit/types';
 import { getCollection } from 'astro:content';
-import { DEFAULT_LOCALIZATION } from './content/default-localization';
 import { getFilesRefList } from './content/files-ref';
 import { squash } from './content/squash.js';
 import { logger } from './logger';