mirror of https://github.com/apache/superset.git
feat: Add Chromatic publishing to superset-frontend storybook (#21095)
* Work in progress to add Chromatic publishing to superset-fronted storybook Adds new Github action to publish storybook builds to chromatic Adjusts configuration to support MDX story format Updates Alert stories to take advantage of MDX format for example in storybook that will publish to Chromatic Fixes issue in ListViewCard stories that make the story build fail * Adjust Chromatic Github action * Adjust action so Gtihub Secret is read into env Github secrets are not accessible in conditional blocks so this change moves the access of the github secret into an env variable which is accessible in conditional logic * Removes unneccesary projectToken from package json * Using a temp key to debug no access to value from github secret * Refining skipping if no changes to superset-frontend * Remove typos from Action component story, consolidate on folder check in Chromatic action * Fix error in Chromatic action event * Testing action with pul_request_target * adjustments to Chromatic action triggers * lint fix * Testing if pull_request_target is disabled * More adjustments to Chromatic action * UI Change to trigger action * Change to story text to test action * update package-lock after merge conflicts from master * Changes to test chromatic action * Finalize Chromatic actions, fix lint errors * Backs out addition of @storybook/addon-docs which is included in addon-essentials * Lint error in package.json
This commit is contained in:
Eric Briscoe
GitHub
parent
f77b910e2c
commit
6a0b7e5598
|
|
@ -0,0 +1,79 @@
|
|||
# .github/workflows/chromatic.yml
|
||||
# seee https://www.chromatic.com/docs/github-actions
|
||||
#
|
||||
# Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
# contributor license agreements. See the NOTICE file distributed with
|
||||
# this work for additional information regarding copyright ownership.
|
||||
# The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
# (the "License"); you may not use this file except in compliance with
|
||||
# the License. You may obtain a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
#
|
||||
|
||||
# Workflow name
|
||||
name: 'Chromatic'
|
||||
|
||||
# Event for the workflow
|
||||
# Only run if changes were made in superset-frontend folder of repo
|
||||
on:
|
||||
# This will trigger when a branch merges to master when the PR has changes in the frontend folder updating the chromatic baseline
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
paths:
|
||||
- "superset-frontend/**"
|
||||
# this will allow us to see how the Storybook builds when a PR has been created that has changes in the frontend folder
|
||||
# NOTE: pull_request_target actions will always run the version of this action on master branch
|
||||
# you will not see changes in the action behavior until this action's changes have been merged to master.
|
||||
# This is a security precaution so that PR coming from a fork cannot access a Github secret without a repo
|
||||
# committer aproving and merging the PR declaring the action safe.
|
||||
pull_request_target:
|
||||
# We want this action to run under specific pull request changes
|
||||
# opened: pull request is created
|
||||
# synchronize: commit(s) pushed to the pull request
|
||||
# reopened: closed pull request is reopened
|
||||
types: [opened, synchronize, reopened]
|
||||
paths:
|
||||
- "superset-frontend/**"
|
||||
|
||||
# List of jobs
|
||||
jobs:
|
||||
chromatic-deployment:
|
||||
# Operating System
|
||||
runs-on: ubuntu-latest
|
||||
# Job steps
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
working-directory: superset-frontend
|
||||
# 👇 Checks if the branch is not master and runs Chromatic
|
||||
- name: Publish to Chromatic
|
||||
if: github.ref != 'refs/heads/master'
|
||||
uses: chromaui/action@v1
|
||||
# Required options for the Chromatic GitHub Action
|
||||
with:
|
||||
# 👇 Location of package.json from root of mono-repo
|
||||
workingDir: superset-frontend
|
||||
# 👇 Chromatic projectToken, refer to the Chromatic manage page to obtain it.
|
||||
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
||||
exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
|
||||
# 👇 Checks if the branch is master and accepts all changes in Chromatic
|
||||
- name: Publish to Chromatic and auto accept changes
|
||||
if: github.ref == 'refs/heads/master'
|
||||
uses: chromaui/action@v1
|
||||
# Required options for the Chromatic GitHub Action
|
||||
with:
|
||||
# 👇 Location of package.json from root of mono-repo
|
||||
workingDir: superset-frontend
|
||||
# 👇 Chromatic projectToken, refer to the manage page to obtain it.
|
||||
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
||||
autoAcceptChanges: true # 👈 Option to accept all changes when merging to master
|
||||
exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
|
||||
|
|
@ -63,7 +63,14 @@ addParameters({
|
|||
},
|
||||
options: {
|
||||
storySort: {
|
||||
method: 'alphabetical',
|
||||
order: [
|
||||
'Superset Frontend',
|
||||
['Controls', 'Display', 'Feedback', 'Input', '*'],
|
||||
['Overview', 'Examples', '*'],
|
||||
'Design System',
|
||||
['Foundations', 'Components', 'Patterns', '*'],
|
||||
'*',
|
||||
],
|
||||
},
|
||||
},
|
||||
controls: { expanded: true },
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "superset",
|
||||
"version": "0.0.0dev",
|
||||
"version": "0.0.0-dev",
|
||||
"description": "Superset is a data exploration platform designed to be visual, intuitive, and interactive.",
|
||||
"keywords": [
|
||||
"big",
|
||||
|
|
@ -23,7 +23,9 @@
|
|||
"url": "git+https://github.com/apache/superset.git"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"author": "Apache",
|
||||
"author": {
|
||||
"name": "Apache"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs",
|
||||
"test": "spec"
|
||||
|
|
@ -40,6 +42,7 @@
|
|||
"build-instrumented": "cross-env NODE_ENV=production BABEL_ENV=instrumented webpack --mode=production --color",
|
||||
"build-storybook": "build-storybook",
|
||||
"check-translation": "prettier --check ../superset/translations/**/LC_MESSAGES/*.json",
|
||||
"chromatic": "npx chromatic --skip 'dependabot/**' --only-changed",
|
||||
"clean-translation": "prettier --write ../superset/translations/**/LC_MESSAGES/*.json",
|
||||
"core:cover": "cross-env NODE_ENV=test jest --coverage --coverageThreshold='{\"global\":{\"statements\":100,\"branches\":100,\"functions\":100,\"lines\":100}}' --collectCoverageFrom='[\"packages/**/src/**/*.{js,ts}\", \"!packages/superset-ui-demo/**/*\"]' packages",
|
||||
"cover": "cross-env NODE_ENV=test jest --coverage",
|
||||
|
|
@ -274,6 +277,7 @@
|
|||
"babel-plugin-dynamic-import-node": "^2.3.3",
|
||||
"babel-plugin-jsx-remove-data-test-id": "^2.1.3",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"chromatic": "^6.7.4",
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^6.2.0",
|
||||
|
|
@ -341,5 +345,7 @@
|
|||
"engines": {
|
||||
"node": "^16.9.1",
|
||||
"npm": "^7.5.4 || ^8.1.2"
|
||||
}
|
||||
},
|
||||
"readme": "ERROR: No README data found!",
|
||||
"_id": "superset@0.0.0-dev"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
|
||||
import DashboardImg from 'src/assets/images/dashboard-card-fallback.svg';
|
||||
import ChartImg from 'src/assets/images/chart-card-fallback.svg';
|
||||
import { boolean, text } from '@storybook/addon-knobs';
|
||||
import { AntdDropdown } from 'src/components';
|
||||
import { Menu } from 'src/components/Menu';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
|
@ -30,16 +28,6 @@ import ListViewCard from '.';
|
|||
export default {
|
||||
title: 'ListViewCard',
|
||||
component: ListViewCard,
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
const imgFallbackKnob = {
|
||||
label: 'Fallback/Loading Image',
|
||||
options: {
|
||||
Dashboard: DashboardImg,
|
||||
Chart: ChartImg,
|
||||
},
|
||||
defaultValue: DashboardImg,
|
||||
};
|
||||
|
||||
export const SupersetListViewCard = () => (
|
||||
|
|
@ -47,11 +35,13 @@ export const SupersetListViewCard = () => (
|
|||
title="Superset Card Title"
|
||||
loading={boolean('loading', false)}
|
||||
url="/superset/dashboard/births/"
|
||||
imgURL={text('imgURL', 'https://picsum.photos/800/600')}
|
||||
imgFallbackURL={select(
|
||||
imgFallbackKnob.label,
|
||||
imgFallbackKnob.options,
|
||||
imgFallbackKnob.defaultValue,
|
||||
imgURL={text(
|
||||
'imgURL',
|
||||
'https://images.unsplash.com/photo-1658163724548-29ef00812a54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
|
||||
)}
|
||||
imgFallbackURL={text(
|
||||
'imgURL',
|
||||
'https://images.unsplash.com/photo-1658208193219-e859d9771912?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
|
||||
)}
|
||||
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
|
||||
coverLeft="Left Section"
|
||||
|
|
|
|||
Loading…
Reference in New Issue