Fix timeline feature error when base url is set (jupyterlab#402)

* fixed error with base url

* modified filename extraction method.

* ui test timeline

* ui test config done.

* ui test for baseurl issue

* ui test for baseurl

* pre-commit

* test info

* modified script for ui tests

* removed unused cnd

* clarify condition

Author: Meriem-BenIsmail

.github/workflows/test.yml

@@ -295,6 +295,7 @@ jobs:
         working-directory: ui-tests
         run: |
           jlpm test
+          TIMELINE_FEATURE=1 jlpm test:timeline
       - name: Upload Playwright Test report
         if: always()
         uses: actions/upload-artifact@v3

packages/docprovider-extension/src/filebrowser.ts

@@ -182,7 +182,8 @@ export const statusBarTimeline: JupyterFrontEndPlugin<void> = {
               fullPath,
               provider,
               provider.contentType,
-              provider.format
+              provider.format,
+              DOCUMENT_TIMELINE_URL
             );
 
             const elt = document.getElementById('jp-slider-status-bar');

packages/docprovider/src/TimelineSlider.tsx

@@ -13,18 +13,21 @@ export class TimelineWidget extends ReactWidget {
   private provider: IForkProvider;
   private contentType: string;
   private format: string;
+  private documentTimelineUrl: string;
 
   constructor(
     apiURL: string,
     provider: IForkProvider,
     contentType: string,
-    format: string
+    format: string,
+    documentTimelineUrl: string
   ) {
     super();
     this.apiURL = apiURL;
     this.provider = provider;
     this.contentType = contentType;
     this.format = format;
+    this.documentTimelineUrl = documentTimelineUrl;
     this.addClass('jp-timelineSliderWrapper');
   }
 
@@ -36,6 +39,7 @@ export class TimelineWidget extends ReactWidget {
         provider={this.provider}
         contentType={this.contentType}
         format={this.format}
+        documentTimelineUrl={this.documentTimelineUrl}
       />
     );
   }

packages/docprovider/src/component.tsx

@@ -19,13 +19,15 @@ type Props = {
   provider: IForkProvider;
   contentType: string;
   format: string;
+  documentTimelineUrl: string;
 };
 
 export const TimelineSliderComponent: React.FC<Props> = ({
   apiURL,
   provider,
   contentType,
-  format
+  format,
+  documentTimelineUrl
 }) => {
   const [data, setData] = useState({
     roomId: '',
@@ -147,16 +149,21 @@ export const TimelineSliderComponent: React.FC<Props> = ({
   function determineAction(currentTimestamp: number): 'undo' | 'redo' {
     return currentTimestamp < currentTimestampIndex ? 'undo' : 'redo';
   }
-
   function extractFilenameFromURL(url: string): string {
     try {
       const parsedURL = new URL(url);
       const pathname = parsedURL.pathname;
-      const segments = pathname.split('/');
 
-      return segments.slice(4 - segments.length).join('/');
+      const apiIndex = pathname.lastIndexOf(documentTimelineUrl);
+      if (apiIndex === -1) {
+        throw new Error(
+          `API segment "${documentTimelineUrl}" not found in URL.`
+        );
+      }
+
+      return pathname.slice(apiIndex + documentTimelineUrl.length);
     } catch (error) {
-      console.error('Invalid URL:', error);
+      console.error('Invalid URL or unable to extract filename:', error);
       return '';
     }
   }

ui-tests/package.json

@@ -5,7 +5,9 @@
   "private": true,
   "scripts": {
     "start": "jupyter lab --config jupyter_server_test_config.py",
-    "test": "npx playwright test",
+    "start:timeline": "jupyter lab --config jupyter_server_test_config.py --ServerApp.base_url=/api/collaboration/timeline/",
+    "test": "npx playwright test --config=playwright.config.js",
+    "test:timeline": "npx playwright test --config=playwright.timeline.config.js",
     "test:update": "npx playwright test --update-snapshots"
   },
   "devDependencies": {

ui-tests/playwright.timeline.config.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  workers: 1,
+  webServer: {
+    command: 'jlpm start:timeline',
+    url: 'http://localhost:8888/api/collaboration/timeline/lab',
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  },
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.01
+    }
+  },
+  projects: [
+    {
+      name: 'timeline-tests',
+      testMatch: 'tests/**/timeline-*.spec.ts',
+      testIgnore: '**/.ipynb_checkpoints/**',
+      timeout: 120 * 1000
+    }
+  ]
+};

ui-tests/tests/timeline-slider.spec.ts

@@ -23,17 +23,51 @@ async function openNotebook(page: Page, notebookPath: string) {
   await page.waitForSelector('.jp-Notebook', { state: 'visible' });
 }
 
-test.describe('Open from Path', () => {
 
-  test('should fail if there are console errors', async ({ page, tmpPath }) => {
+const isTimelineEnv = process.env.TIMELINE_FEATURE || "0";
+const isTimeline = parseInt(isTimelineEnv)
+
+test.describe('Timeline Slider', () => {
+
+  if (isTimeline) {
+    test.use({ autoGoto: false });
+  }
+  test('should fail if there are console errors when opening from path', async ({ page, tmpPath }) => {
+    if (isTimeline) {
+      console.log('Skipping this test.');
+      return;
+    }
     const pageErrors = await capturePageErrors(page);
 
     await page.notebook.createNew();
-    await page.notebook.save();
     await page.notebook.close();
 
     await openNotebook(page, `${tmpPath}/Untitled.ipynb`);
 
     expect(pageErrors).toHaveLength(0);
   });
+
+  test('should display in status bar without console errors when baseUrl is set', async ({ page, baseURL }) => {
+
+    if (!isTimeline) {
+      console.log('Skipping this test.');
+      return;
+    }
+
+    await page.goto('http://localhost:8888/api/collaboration/timeline')
+
+    const pageErrors = await capturePageErrors(page);
+
+    await page.notebook.createNew();
+
+    const historyIcon = page.locator('.jp-mod-highlighted[title="Document Timeline"]');
+    await expect(historyIcon).toBeVisible();
+
+    await historyIcon.click();
+
+    const slider = page.locator('.jp-timestampDisplay');
+    await expect(slider).toBeVisible();
+
+    expect(pageErrors).toHaveLength(0);
+  });
 });