Skip to content

Commit 905d610

Browse files
ofahimIQSSofahimIQSS
authored
Merge pull request #815 from IQSS/feat/814-external-tools-integration
External Tools SPA Integration
2 parents 08bc177 + d3df63c commit 905d610

119 files changed

Lines changed: 2686 additions & 152 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,37 @@ jobs:
1414
runs-on: ubuntu-latest
1515
# Job steps
1616
steps:
17-
- uses: actions/checkout@v1
17+
- name: Checkout repository
18+
uses: actions/checkout@v4
19+
with:
20+
fetch-depth: 0
21+
ref: ${{ github.event.pull_request.head.ref || github.ref }}
22+
- name: Setup Node.js
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: 22
26+
cache: npm
1827
- name: Create .npmrc
28+
env:
29+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
1930
run: |
2031
cp .npmrc.example .npmrc
21-
sed -i -e 's/<YOUR_GITHUB_AUTH_TOKEN>/${{ secrets.GITHUB_TOKEN }}/g' .npmrc
22-
sed -i -e 's/<YOUR_NPM_AUTH_TOKEN>/${{ secrets.NPM_AUTH_TOKEN }}/g' .npmrc
32+
sed -i -e "s#<YOUR_GITHUB_AUTH_TOKEN>#${GITHUB_TOKEN}#g" .npmrc
33+
# Comment out npmjs auth token line if no token provided via secrets
34+
sed -i -e 's#//registry.npmjs.org/:_authToken=<YOUR_NPM_AUTH_TOKEN>#; auth token omitted in CI#g' .npmrc
2335
- name: Install dependencies
24-
# 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
25-
run: npm install
36+
# 👇 Use clean install for reproducibility
37+
run: npm ci
2638
- name: Build Dataverse Design System
2739
working-directory: packages/design-system
2840
run: npm run build
2941
# 👇 Adds Chromatic as a step in the workflow
3042
- name: Publish to Chromatic
31-
uses: chromaui/action@v1
43+
uses: chromaui/action@latest
44+
env:
45+
CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
46+
CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
47+
CHROMATIC_SLUG: ${{ github.repository }}
3248
# Chromatic GitHub Action options
3349
with:
3450
# 👇 Chromatic projectToken, refer to the manage page to obtain it.

‎.github/workflows/chromatic.yml‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,41 @@ jobs:
1414
runs-on: ubuntu-latest
1515
# Job steps
1616
steps:
17-
- uses: actions/checkout@v1
17+
- name: Checkout repository
18+
uses: actions/checkout@v4
19+
with:
20+
fetch-depth: 0
21+
# Ensure correct ref on PRs for proper baseline detection
22+
ref: ${{ github.event.pull_request.head.ref || github.ref }}
23+
- name: Setup Node.js
24+
uses: actions/setup-node@v4
25+
with:
26+
node-version: 22
27+
cache: npm
1828
- name: Create .npmrc
29+
env:
30+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
1931
run: |
2032
cp .npmrc.example .npmrc
21-
sed -i -e 's/<YOUR_GITHUB_AUTH_TOKEN>/${{ secrets.GITHUB_TOKEN }}/g' .npmrc
22-
sed -i -e 's/<YOUR_NPM_AUTH_TOKEN>/${{ secrets.NPM_AUTH_TOKEN }}/g' .npmrc
33+
sed -i -e "s#<YOUR_GITHUB_AUTH_TOKEN>#${GITHUB_TOKEN}#g" .npmrc
34+
# Comment out npmjs auth token line if no token provided via secrets
35+
sed -i -e 's#//registry.npmjs.org/:_authToken=<YOUR_NPM_AUTH_TOKEN>#; auth token omitted in CI#g' .npmrc
2336
- name: Install dependencies
24-
# 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
25-
run: npm install
37+
# 👇 Use clean install for reproducible CI installs
38+
run: npm ci
2639
# 👇 Adds Chromatic as a step in the workflow
2740
# Install design system dependencies
2841
- name: Build Dataverse Design System
2942
working-directory: packages/design-system
3043
run: npm run build
3144
- name: Publish to Chromatic
32-
uses: chromaui/action@v1
45+
uses: chromaui/action@latest
3346
env:
3447
STORYBOOK_CHROMATIC_BUILD: 'true'
48+
# Provide PR metadata to Chromatic for correct git/baseline context
49+
CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
50+
CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
51+
CHROMATIC_SLUG: ${{ github.repository }}
3552

3653
# Chromatic GitHub Action options
3754
with:

‎.storybook/preview.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import type { Preview } from '@storybook/react'
33
import { ThemeProvider } from '@iqss/dataverse-design-system'
44
import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
55
import { FakerHelper } from '../tests/component/shared/FakerHelper'
6+
import { ExternalToolsProvider } from '../src/shared/contexts/external-tools/ExternalToolsProvider'
7+
import { ExternalToolsEmptyMockRepository } from '../src/stories/shared-mock-repositories/externalTools/ExternalToolsMockRepository'
68
import 'react-loading-skeleton/dist/skeleton.css'
79
import '../src/assets/global.scss'
810
import '../src/assets/swal-custom.scss'
@@ -32,7 +34,9 @@ const preview: Preview = {
3234

3335
return (
3436
<ThemeProvider>
35-
<RouterProvider router={browserRouter} />
37+
<ExternalToolsProvider externalToolsRepository={new ExternalToolsEmptyMockRepository()}>
38+
<RouterProvider router={browserRouter} />
39+
</ExternalToolsProvider>
3640
</ThemeProvider>
3741
)
3842
}

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
1010

1111
- Dataset Templates Selector in the Create Dataset page.
1212
- Metadata Export Dropdown to the metadata tab of Dataset Page and File Page.
13+
- 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.
1314

1415
### Changed
1516

‎package-lock.json‎

Lines changed: 21 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@dnd-kit/sortable": "8.0.0",
1919
"@dnd-kit/utilities": "3.2.2",
2020
"@faker-js/faker": "7.6.0",
21-
"@iqss/dataverse-client-javascript": "2.0.0-alpha.66",
21+
"@iqss/dataverse-client-javascript": "2.0.0-alpha.67",
2222
"@iqss/dataverse-design-system": "*",
2323
"@istanbuljs/nyc-config-typescript": "1.0.2",
2424
"@tanstack/react-table": "8.9.2",
@@ -141,7 +141,7 @@
141141
"babel-plugin-named-exports-order": "0.0.2",
142142
"chai": "4.3.7",
143143
"chai-as-promised": "7.1.1",
144-
"chromatic": "6.24.1",
144+
"chromatic": "13.3.0",
145145
"concurrently": "8.0.1",
146146
"cypress": "15.2.0",
147147
"cypress-vite": "1.4.0",

‎packages/design-system/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
1515
- **SelectAdvanced:**
1616
- Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
1717
- Support for options with a shape of `{ label: string; value: string; }[]` instead of just `string[]`.
18+
- **ButtonGroup:**
19+
- Fix styles for vertical button groups when using tooltips.
1820

1921
# [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)
2022

‎packages/design-system/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"@testing-library/cypress": "10.1.0",
5858
"@vitejs/plugin-react": "4.3.1",
5959
"axe-playwright": "1.2.3",
60-
"chromatic": "6.24.1",
60+
"chromatic": "13.3.0",
6161
"cypress": "15.2.0",
6262
"react": "18.2.0",
6363
"vite": "5.4.20",

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

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,17 +128,75 @@ th {
128128
vertical-align: middle;
129129
}
130130

131-
.btn-group > div:not(:last-child) > .btn-group > .btn,
132-
.btn-group-vertical > div:not(:last-child) > .btn-group > .btn {
131+
/* Start - Overrides to Fix Group Butttons with Buttons with Tooltips */
132+
133+
.btn-group > .btn,
134+
.btn-group > div > .btn {
135+
margin-left: -1px;
136+
}
137+
138+
.btn-group-vertical > .btn-group > .btn,
139+
.btn-group-vertical > div:not([role='group']) > .btn-group > .btn {
140+
margin-left: 0;
141+
}
142+
143+
/* stylelint-disable */
144+
.btn-group-vertical > .btn,
145+
.btn-group-vertical > div > .btn {
146+
margin-top: -1px;
147+
}
148+
149+
.btn-group-vertical > .btn:not(:last-child, :first-child),
150+
.btn-group-vertical > div:not(:last-child, :first-child, [role='group']),
151+
.btn-group-vertical > div:not(:last-child, :first-child, [role='group']) > .btn-group {
152+
border-radius: 0;
153+
}
154+
155+
.btn-group > div:not(:first-child) > .btn {
156+
border-top-left-radius: 0;
157+
border-bottom-left-radius: 0;
158+
}
159+
160+
.btn-group > div:not(:last-child) > .btn {
161+
border-top-right-radius: 0;
162+
border-bottom-right-radius: 0;
163+
}
164+
165+
.btn-group-vertical > div:not([role='group']),
166+
.btn-group-vertical > div:not([role='group']) > .btn,
167+
.btn-group-vertical > div:not([role='group']) > .btn-group {
168+
width: 100%;
169+
}
170+
171+
.btn-group-vertical
172+
> div:not(:first-child, :last-child, [role='group'])
173+
> .btn:not(.dropdown-toggle),
174+
.btn-group-vertical > div:not(:last-child, :first-child, [role='group']) > .btn-group > .btn {
175+
border-radius: 0;
176+
}
177+
178+
.btn-group-vertical > div:first-child:not([role='group']) > .btn:not(.dropdown-toggle),
179+
.btn-group-vertical > div:first-child:not([role='group']) > .btn-group > .btn {
180+
border-bottom-right-radius: 0;
181+
border-bottom-left-radius: 0;
182+
}
183+
184+
.btn-group-vertical > div:last-child:not([role='group']) > .btn:not(.dropdown-toggle),
185+
.btn-group-vertical > div:last-child:not([role='group']) > .btn-group > .btn {
186+
border-top-left-radius: 0;
187+
border-top-right-radius: 0;
188+
}
189+
190+
.btn-group > div:not(:last-child) > .btn-group > .btn {
133191
border-top-right-radius: 0;
134192
border-bottom-right-radius: 0;
135193
}
136194

137-
.btn-group > div:not(:first-child) > .btn-group > .btn,
138-
.btn-group-vertical > div:not(:first-child) > .btn-group > .btn {
195+
.btn-group > div:not(:first-child) > .btn-group > .btn {
139196
border-top-left-radius: 0;
140197
border-bottom-left-radius: 0;
141198
}
199+
/* End - Overrides to Fix Group Butttons with Buttons with Tooltips */
142200

143201
.btn-link {
144202
text-decoration: none;

‎packages/design-system/src/lib/components/button-group/ButtonGroup.module.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
@import 'src/lib/assets/styles/design-tokens/colors.module';
22

33
.border > button,
4-
.border > [role='group'] > button {
4+
.border > [role='group'] > button,
5+
.border > button:not(.dropdown-item) {
56
border: 1px solid $dv-button-border-color;
67
}
8+
9+
.border > div {
10+
&:global > .btn {
11+
border: 1px solid $dv-button-border-color;
12+
}
13+
}

0 commit comments

Comments
 (0)
⚡