External Tools SPA Integration

.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.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",

packages/design-system/CHANGELOG.md

@@ -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/dataverse-design-system@2.0.1...@iqss/dataverse-design-system@2.0.2) (2024-06-23)
 

packages/design-system/package.json

@@ -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/src/lib/assets/styles/bootstrap-customized.scss

@@ -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/components/button-group/ButtonGroup.module.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;
+  }
+}

packages/design-system/src/lib/components/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { OverlayTrigger as OverlayTriggerBS, Tooltip as TooltipBS } from 'react-bootstrap'
 import { Placement } from 'react-bootstrap/types'
+import { OverlayTrigger as OverlayTriggerBS, Tooltip as TooltipBS } from 'react-bootstrap'
 import { ReactElement } from 'react'
 
 interface OverlayTriggerProps {

packages/design-system/src/lib/stories/button-group/ButtonGroup.stories.tsx

@@ -51,6 +51,25 @@ export const VerticalButtonGroup: Story = {
   )
 }
 
+export const VerticalButtonGroupWithTooltips: Story = {
+  render: () => (
+    <ButtonGroup vertical>
+      <Tooltip placement="right" overlay="Share">
+        <Button variant="secondary">Share</Button>
+      </Tooltip>
+      <Tooltip placement="right" overlay="Contact Owner">
+        <Button variant="secondary">Contact Owner</Button>
+      </Tooltip>
+      <Tooltip placement="right" overlay="Contact Owner">
+        <Button variant="secondary">Contact Owner</Button>
+      </Tooltip>
+      <Tooltip placement="right" overlay="Contact Owner">
+        <Button variant="secondary">Contact Owner</Button>
+      </Tooltip>
+    </ButtonGroup>
+  )
+}
+
 export const NestedButtonGroups: Story = {
   render: () => (
     <ButtonToolbar ariaLabel="Toolbar with button groups">
@@ -99,6 +118,9 @@ export const ButtonGroupWithTooltips: Story = {
           <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
         </DropdownButton>
       </Tooltip>
+      <Tooltip placement="top" overlay="Simple Button with Tooltip">
+        <Button variant="secondary">Other Action</Button>
+      </Tooltip>
     </ButtonGroup>
   )
 }

packages/design-system/tests/component/button/Button.spec.tsx

@@ -59,4 +59,9 @@ describe('Button', () => {
     cy.mount(<Button type="submit">{clickMeText}</Button>)
     cy.findByText(clickMeText).should('have.attr', 'type').and('eq', 'submit')
   })
+
+  it('renders the button with the spacing styles when the spacing prop is provided', () => {
+    cy.mount(<Button withSpacing>{clickMeText}</Button>)
+    cy.findByText(clickMeText).should('have.css', 'margin').and('not.eq', '0px')
+  })
 })

packages/design-system/tests/component/progress-bar/ProgressBar.spec.tsx

@@ -6,4 +6,10 @@ describe('ProgressBar', () => {
 
     cy.findByRole('progressbar').should('exist')
   })
+
+  it('renders the ProgressBar without a now progress', () => {
+    cy.mount(<ProgressBar />)
+
+    cy.findByRole('progressbar').should('exist')
+  })
 })