Merge pull request #815 from IQSS/feat/814-external-tools-integration

External Tools SPA Integration

Author: ofahimIQSS

.github/workflows/chromatic-design-system.yml

@@ -14,21 +14,37 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.ref || github.ref }}
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
       - name: Create .npmrc
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           cp .npmrc.example .npmrc
-          sed -i -e 's/<YOUR_GITHUB_AUTH_TOKEN>/${{ secrets.GITHUB_TOKEN }}/g' .npmrc
-          sed -i -e 's/<YOUR_NPM_AUTH_TOKEN>/${{ secrets.NPM_AUTH_TOKEN }}/g' .npmrc
+          sed -i -e "s#<YOUR_GITHUB_AUTH_TOKEN>#${GITHUB_TOKEN}#g" .npmrc
+          # Comment out npmjs auth token line if no token provided via secrets
+          sed -i -e 's#//registry.npmjs.org/:_authToken=<YOUR_NPM_AUTH_TOKEN>#; auth token omitted in CI#g' .npmrc
       - name: Install dependencies
-        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: npm install
+        # 👇 Use clean install for reproducibility
+        run: npm ci
       - name: Build Dataverse Design System
         working-directory: packages/design-system
         run: npm run build
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
+        env:
+          CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
+          CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
+          CHROMATIC_SLUG: ${{ github.repository }}
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.

.github/workflows/chromatic.yml

@@ -14,24 +14,41 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # Ensure correct ref on PRs for proper baseline detection
+          ref: ${{ github.event.pull_request.head.ref || github.ref }}
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
       - name: Create .npmrc
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           cp .npmrc.example .npmrc
-          sed -i -e 's/<YOUR_GITHUB_AUTH_TOKEN>/${{ secrets.GITHUB_TOKEN }}/g' .npmrc
-          sed -i -e 's/<YOUR_NPM_AUTH_TOKEN>/${{ secrets.NPM_AUTH_TOKEN }}/g' .npmrc
+          sed -i -e "s#<YOUR_GITHUB_AUTH_TOKEN>#${GITHUB_TOKEN}#g" .npmrc
+          # Comment out npmjs auth token line if no token provided via secrets
+          sed -i -e 's#//registry.npmjs.org/:_authToken=<YOUR_NPM_AUTH_TOKEN>#; auth token omitted in CI#g' .npmrc
       - name: Install dependencies
-        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: npm install
+        # 👇 Use clean install for reproducible CI installs
+        run: npm ci
         # 👇 Adds Chromatic as a step in the workflow
         # Install design system dependencies
       - name: Build Dataverse Design System
         working-directory: packages/design-system
         run: npm run build
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         env:
           STORYBOOK_CHROMATIC_BUILD: 'true'
+          # Provide PR metadata to Chromatic for correct git/baseline context
+          CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
+          CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
+          CHROMATIC_SLUG: ${{ github.repository }}
 
         # Chromatic GitHub Action options
         with:

.storybook/preview.tsx

@@ -3,6 +3,8 @@ import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
+import { ExternalToolsProvider } from '../src/shared/contexts/external-tools/ExternalToolsProvider'
+import { ExternalToolsEmptyMockRepository } from '../src/stories/shared-mock-repositories/externalTools/ExternalToolsMockRepository'
 import 'react-loading-skeleton/dist/skeleton.css'
 import '../src/assets/global.scss'
 import '../src/assets/swal-custom.scss'
@@ -32,7 +34,9 @@ const preview: Preview = {
 
       return (
         <ThemeProvider>
-          <RouterProvider router={browserRouter} />
+          <ExternalToolsProvider externalToolsRepository={new ExternalToolsEmptyMockRepository()}>
+            <RouterProvider router={browserRouter} />
+          </ExternalToolsProvider>
         </ThemeProvider>
       )
     }

CHANGELOG.md

@@ -10,6 +10,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 
 - Dataset Templates Selector in the Create Dataset page.
 - Metadata Export Dropdown to the metadata tab of Dataset Page and File Page.
+- External Tools integration. All types supported: Explore, Configure, Preview and Query tools in Dataset and File pages. Still not showing external tools for Auxiliary Files as additional development is needed.
 
 ### Changed
 

package-lock.json

@@ -18,7 +18,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.66",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.67",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -141,7 +141,7 @@
     "babel-plugin-named-exports-order": "0.0.2",
     "chai": "4.3.7",
     "chai-as-promised": "7.1.1",
-    "chromatic": "6.24.1",
+    "chromatic": "13.3.0",
     "concurrently": "8.0.1",
     "cypress": "15.2.0",
     "cypress-vite": "1.4.0",

package.json

@@ -15,6 +15,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **SelectAdvanced:**
   - Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
   - Support for options with a shape of `{ label: string; value: string; }[]` instead of just `string[]`.
+- **ButtonGroup:**
+  - Fix styles for vertical button groups when using tooltips.
 
 # [2.0.2](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2024-06-23)
 

packages/design-system/CHANGELOG.md

@@ -57,7 +57,7 @@
     "@testing-library/cypress": "10.1.0",
     "@vitejs/plugin-react": "4.3.1",
     "axe-playwright": "1.2.3",
-    "chromatic": "6.24.1",
+    "chromatic": "13.3.0",
     "cypress": "15.2.0",
     "react": "18.2.0",
     "vite": "5.4.20",

packages/design-system/package.json

@@ -128,17 +128,75 @@ th {
   vertical-align: middle;
 }
 
-.btn-group > div:not(:last-child) > .btn-group > .btn,
-.btn-group-vertical > div:not(:last-child) > .btn-group > .btn {
+/* Start - Overrides to Fix Group Butttons with Buttons with Tooltips */
+
+.btn-group > .btn,
+.btn-group > div > .btn {
+  margin-left: -1px;
+}
+
+.btn-group-vertical > .btn-group > .btn,
+.btn-group-vertical > div:not([role='group']) > .btn-group > .btn {
+  margin-left: 0;
+}
+
+/* stylelint-disable */
+.btn-group-vertical > .btn,
+.btn-group-vertical > div > .btn {
+  margin-top: -1px;
+}
+
+.btn-group-vertical > .btn:not(:last-child, :first-child),
+.btn-group-vertical > div:not(:last-child, :first-child, [role='group']),
+.btn-group-vertical > div:not(:last-child, :first-child, [role='group']) > .btn-group {
+  border-radius: 0;
+}
+
+.btn-group > div:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group > div:not(:last-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group-vertical > div:not([role='group']),
+.btn-group-vertical > div:not([role='group']) > .btn,
+.btn-group-vertical > div:not([role='group']) > .btn-group {
+  width: 100%;
+}
+
+.btn-group-vertical
+  > div:not(:first-child, :last-child, [role='group'])
+  > .btn:not(.dropdown-toggle),
+.btn-group-vertical > div:not(:last-child, :first-child, [role='group']) > .btn-group > .btn {
+  border-radius: 0;
+}
+
+.btn-group-vertical > div:first-child:not([role='group']) > .btn:not(.dropdown-toggle),
+.btn-group-vertical > div:first-child:not([role='group']) > .btn-group > .btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group-vertical > div:last-child:not([role='group']) > .btn:not(.dropdown-toggle),
+.btn-group-vertical > div:last-child:not([role='group']) > .btn-group > .btn {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.btn-group > div:not(:last-child) > .btn-group > .btn {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.btn-group > div:not(:first-child) > .btn-group > .btn,
-.btn-group-vertical > div:not(:first-child) > .btn-group > .btn {
+.btn-group > div:not(:first-child) > .btn-group > .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+/* End - Overrides to Fix Group Butttons with Buttons with Tooltips */
 
 .btn-link {
   text-decoration: none;

packages/design-system/src/lib/assets/styles/bootstrap-customized.scss

@@ -1,6 +1,13 @@
 @import 'src/lib/assets/styles/design-tokens/colors.module';
 
 .border > button,
-.border > [role='group'] > button {
+.border > [role='group'] > button,
+.border > button:not(.dropdown-item) {
   border: 1px solid $dv-button-border-color;
 }
+
+.border > div {
+  &:global > .btn {
+    border: 1px solid $dv-button-border-color;
+  }
+}