Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixes storybook installation #2017

Merged
merged 10 commits into from
Nov 1, 2022
Merged

fix: fixes storybook installation #2017

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
495e47f
Initial attempt to upgrade storybook
kristenarmes Nov 18, 2021
57f66ec
chore: updates storybook, webpack; fixes TS issues
Golodhros Oct 28, 2022
495e7b0
fix: removes JSX loader as it gives problems
Golodhros Oct 31, 2022
c03478f
chore: updates caniuse-lite db
Golodhros Oct 31, 2022
75b38ea
chore: ran eslint
Golodhros Oct 31, 2022
28f7ec8
chore: fixes lint errors
Golodhros Oct 31, 2022
b02f703
chore: cleanups
Golodhros Oct 31, 2022
23f784e
chore: Update linting
Golodhros Oct 31, 2022
459a001
chore: linting
Golodhros Oct 31, 2022
070cd48
chore: adds Kristen as codeowner
Golodhros Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 62 additions & 68 deletions frontend/amundsen_application/static/.betterer.results
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ exports[`eslint`] = {
[33, 6, 25, "Use object destructuring.", "354229464"],
[34, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/Badges/BadgeList/index.spec.tsx:3772320601": [
[153, 14, 36, "Use array destructuring.", "898356559"]
"js/components/Badges/BadgeList/index.spec.tsx:3086694899": [
[165, 14, 36, "Use array destructuring.", "898356559"]
],
"js/components/Bookmark/BookmarkIcon/index.tsx:2757285913": [
[44, 8, 23, "Must use destructuring props assignment", "2039607050"],
Expand Down Expand Up @@ -162,9 +162,9 @@ exports[`eslint`] = {
[34, 6, 25, "Use object destructuring.", "354229464"],
[35, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/ResourceListItem/TableListItem/index.spec.tsx:2962900888": [
[97, 6, 25, "Use object destructuring.", "354229464"],
[98, 6, 29, "Use object destructuring.", "2645724888"]
"js/components/ResourceListItem/TableListItem/index.spec.tsx:2792648160": [
[131, 6, 25, "Use object destructuring.", "354229464"],
[132, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/ResourceListItem/UserListItem/index.spec.tsx:3519774565": [
[52, 6, 25, "Use object destructuring.", "354229464"],
Expand Down Expand Up @@ -193,11 +193,11 @@ exports[`eslint`] = {
[69, 8, 184, "Visible, non-interactive elements with click handlers must have at least one keyboard listener.", "3208468016"],
[69, 8, 184, "Static HTML elements with event handlers require a role.", "3208468016"]
],
"js/components/SearchBar/InlineSearchResults/ResultItemList/tests/index.spec.tsx:875527071": [
[101, 6, 25, "Use object destructuring.", "1501943800"],
[102, 6, 29, "Use object destructuring.", "1935870456"]
"js/components/SearchBar/InlineSearchResults/ResultItemList/tests/index.spec.tsx:391808217": [
[96, 6, 25, "Use object destructuring.", "1501943800"],
[97, 6, 29, "Use object destructuring.", "1935870456"]
],
"js/components/SearchBar/InlineSearchResults/SearchItemList/SearchItem/index.tsx:3579547671": [
"js/components/SearchBar/InlineSearchResults/SearchItemList/SearchItem/index.tsx:4047987057": [
[32, 4, 23, "Must use destructuring props assignment", "1919697041"],
[32, 28, 23, "Must use destructuring props assignment", "2508190847"],
[36, 8, 20, "Must use destructuring props assignment", "2826313809"],
Expand Down Expand Up @@ -229,7 +229,7 @@ exports[`eslint`] = {
[170, 8, 29, "Use object destructuring.", "1935870456"],
[192, 8, 25, "Use object destructuring.", "1230260048"]
],
"js/components/SearchBar/InlineSearchResults/index.tsx:1398520196": [
"js/components/SearchBar/InlineSearchResults/index.tsx:3144198882": [
[31, 0, 46, "Dependency cycle detected.", "3506421300"],
[84, 15, 21, "Must use destructuring props assignment", "1352381626"],
[86, 15, 19, "Must use destructuring props assignment", "4761610"],
Expand Down Expand Up @@ -261,42 +261,42 @@ exports[`eslint`] = {
[273, 22, 21, "Must use destructuring props assignment", "65539885"],
[283, 8, 20, "Must use destructuring props assignment", "2826313809"]
],
"js/components/SearchBar/InlineSearchResults/tests/index.spec.tsx:2744306554": [
[66, 6, 25, "Use object destructuring.", "1230260048"],
[87, 6, 25, "Use object destructuring.", "354229464"],
[88, 6, 29, "Use object destructuring.", "2645724888"],
[115, 6, 25, "Use object destructuring.", "354229464"],
[116, 6, 29, "Use object destructuring.", "2645724888"],
[154, 6, 25, "Use object destructuring.", "354229464"],
[154, 6, 5, "\'props\' is assigned a value but never used.", "187023499"],
[155, 6, 29, "Use object destructuring.", "2645724888"],
[244, 6, 25, "Use object destructuring.", "354229464"],
[245, 6, 29, "Use object destructuring.", "2645724888"],
[290, 6, 25, "Use object destructuring.", "354229464"],
[291, 6, 29, "Use object destructuring.", "2645724888"],
[296, 12, 44, "Use array destructuring.", "2292708154"],
[309, 12, 36, "Use array destructuring.", "868044730"],
[338, 6, 25, "Use object destructuring.", "354229464"],
[339, 6, 29, "Use object destructuring.", "2645724888"],
[342, 12, 44, "Use array destructuring.", "2292708154"],
[349, 12, 36, "Use array destructuring.", "868044730"],
[356, 12, 34, "Use array destructuring.", "2111643962"],
[376, 6, 25, "Use object destructuring.", "354229464"],
[377, 6, 29, "Use object destructuring.", "2645724888"],
[380, 12, 44, "Use array destructuring.", "2292708154"],
[391, 12, 36, "Use array destructuring.", "868044730"],
[400, 12, 34, "Use array destructuring.", "2111643962"],
[419, 6, 25, "Use object destructuring.", "354229464"],
[420, 6, 29, "Use object destructuring.", "2645724888"],
[425, 12, 44, "Use array destructuring.", "2292708154"],
[438, 12, 36, "Use array destructuring.", "868044730"],
[474, 8, 25, "Use object destructuring.", "354229464"],
[475, 8, 29, "Use object destructuring.", "2645724888"],
[503, 8, 25, "Use object destructuring.", "354229464"],
[504, 8, 29, "Use object destructuring.", "2645724888"],
[572, 6, 25, "Use object destructuring.", "1230260048"],
[622, 6, 25, "Use object destructuring.", "354229464"],
[623, 6, 29, "Use object destructuring.", "2645724888"]
"js/components/SearchBar/InlineSearchResults/tests/index.spec.tsx:558055440": [
[67, 6, 25, "Use object destructuring.", "1230260048"],
[88, 6, 25, "Use object destructuring.", "354229464"],
[89, 6, 29, "Use object destructuring.", "2645724888"],
[116, 6, 25, "Use object destructuring.", "354229464"],
[117, 6, 29, "Use object destructuring.", "2645724888"],
[155, 6, 25, "Use object destructuring.", "354229464"],
[155, 6, 5, "\'props\' is assigned a value but never used.", "187023499"],
[156, 6, 29, "Use object destructuring.", "2645724888"],
[245, 6, 25, "Use object destructuring.", "354229464"],
[246, 6, 29, "Use object destructuring.", "2645724888"],
[291, 6, 25, "Use object destructuring.", "354229464"],
[292, 6, 29, "Use object destructuring.", "2645724888"],
[297, 12, 44, "Use array destructuring.", "2292708154"],
[310, 12, 36, "Use array destructuring.", "868044730"],
[339, 6, 25, "Use object destructuring.", "354229464"],
[340, 6, 29, "Use object destructuring.", "2645724888"],
[343, 12, 44, "Use array destructuring.", "2292708154"],
[350, 12, 36, "Use array destructuring.", "868044730"],
[357, 12, 34, "Use array destructuring.", "2111643962"],
[377, 6, 25, "Use object destructuring.", "354229464"],
[378, 6, 29, "Use object destructuring.", "2645724888"],
[381, 12, 44, "Use array destructuring.", "2292708154"],
[392, 12, 36, "Use array destructuring.", "868044730"],
[401, 12, 34, "Use array destructuring.", "2111643962"],
[420, 6, 25, "Use object destructuring.", "354229464"],
[421, 6, 29, "Use object destructuring.", "2645724888"],
[426, 12, 44, "Use array destructuring.", "2292708154"],
[439, 12, 36, "Use array destructuring.", "868044730"],
[475, 8, 25, "Use object destructuring.", "354229464"],
[476, 8, 29, "Use object destructuring.", "2645724888"],
[504, 8, 25, "Use object destructuring.", "354229464"],
[505, 8, 29, "Use object destructuring.", "2645724888"],
[573, 6, 25, "Use object destructuring.", "1230260048"],
[623, 6, 25, "Use object destructuring.", "354229464"],
[624, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/SearchBar/index.spec.tsx:3541693335": [
[49, 6, 39, "Use object destructuring.", "1991804342"],
Expand All @@ -315,8 +315,8 @@ exports[`eslint`] = {
[60, 2, 51, "refToSelf should be placed after componentWillUnmount", "3412474606"],
[105, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
],
"js/components/Table/table.story.tsx:3074937505": [
[8, 0, 48, "\`./testDataBuilder\` import should occur before import of \`.\`", "3767205268"]
"js/components/Table/table.story.tsx:1172196692": [
[7, 0, 48, "\`./testDataBuilder\` import should occur before import of \`.\`", "3767205268"]
],
"js/components/Tags/TagInfo/index.spec.tsx:4185537358": [
[44, 6, 25, "Use object destructuring.", "354229464"],
Expand Down Expand Up @@ -356,7 +356,7 @@ exports[`eslint`] = {
[329, 46, 15, "Must use destructuring props assignment", "4223491724"],
[339, 16, 20, "Must use destructuring state assignment", "2976153148"]
],
"js/components/Tags/index.tsx:3468508233": [
"js/components/Tags/index.tsx:3015123631": [
[38, 4, 21, "Must use destructuring props assignment", "4236634811"]
],
"js/config/config-default.ts:1828402213": [
Expand Down Expand Up @@ -397,8 +397,8 @@ exports[`eslint`] = {
"js/ducks/lastIndexed/sagas.ts:1498244597": [
[7, 2, 29, "\'action\' is defined but never used.", "566797395"]
],
"js/ducks/middlewares/analyticsMiddleware.ts:3943673455": [
[11, 7, 8, "\'getState\' is defined but never used.", "1919118020"]
"js/ducks/middlewares/analyticsMiddleware.ts:855168645": [
[12, 5, 8, "\'getState\' is defined but never used.", "1919118020"]
],
"js/ducks/notification/reducer.ts:3362994954": [
[111, 6, 191, "Unexpected lexical declaration in case block.", "1433271452"],
Expand All @@ -419,7 +419,7 @@ exports[`eslint`] = {
[20, 2, 248, "Expected a default case.", "1034339850"]
],
"js/ducks/tableMetadata/api/v0.ts:2322129867": [
[142, 23, -4399, "Expected to return a value at the end of arrow function.", "5381"]
[142, 23, 2, "Expected to return a value at the end of arrow function.", "5859494"]
],
"js/ducks/tableMetadata/owners/index.spec.ts:655040122": [
[15, 0, 91, "\`../reducer\` import should occur before import of \`./reducer\`", "2216296793"],
Expand All @@ -428,11 +428,8 @@ exports[`eslint`] = {
"js/ducks/tableMetadata/owners/sagas.ts:3725515638": [
[7, 0, 69, "\`../types\` import should occur before import of \`./reducer\`", "3326352266"]
],
"js/ducks/tableMetadata/reducer.ts:3842494077": [
[480, 6, 93, "Unexpected lexical declaration in case block.", "4098864482"]
],
"js/ducks/tags/api/v0.ts:2781466514": [
[21, 16, -605, "Expected to return a value at the end of function \'getResourceTags\'.", "5381"]
"js/ducks/tableMetadata/reducer.ts:802979862": [
[480, 6, 84, "Unexpected lexical declaration in case block.", "114266473"]
],
"js/features/BadgeList/index.tsx:857288200": [
[3, 12, 5, "\'React\' is defined but never used.", "229961444"]
Expand All @@ -458,18 +455,15 @@ exports[`eslint`] = {
[13, 0, 48, "\`./testDataBuilder\` import should occur before import of \`.\`", "3767205268"]
],
"js/features/Feedback/FeedbackForm/BugReportFeedbackForm/index.tsx:3281037041": [
[25, 8, 63, "A control must be associated with a text label.", "4061596287"],
[28, 10, 205, "A control must be associated with a text label.", "3160570119"],
[39, 10, 211, "A control must be associated with a text label.", "836174501"],
[50, 10, 211, "A control must be associated with a text label.", "2015844771"]
],
"js/features/Feedback/FeedbackForm/RatingFeedbackForm/index.tsx:3588165124": [
[24, 8, 132, "A control must be associated with a text label.", "2458117852"],
[38, 8, 63, "A control must be associated with a text label.", "3147977067"],
[55, 10, 267, "A control must be associated with a text label.", "190931411"]
],
"js/features/Feedback/FeedbackForm/RequestFeedbackForm/index.tsx:2633645219": [
[25, 8, 68, "A control must be associated with a text label.", "2361546724"],
[28, 10, 205, "A control must be associated with a text label.", "3160570119"],
[39, 10, 219, "A control must be associated with a text label.", "1357545573"],
[50, 10, 210, "A control must be associated with a text label.", "1103037886"]
Expand Down Expand Up @@ -526,7 +520,7 @@ exports[`eslint`] = {
[68, 13, 41, "\'e\' is defined but never used.", "2939234812"],
[95, 12, 352, "Non-interactive elements should not be assigned mouse or keyboard event listeners.", "257623345"]
],
"js/pages/DashboardPage/QueryList/index.spec.tsx:194205473": [
"js/pages/DashboardPage/QueryList/index.spec.tsx:1171081505": [
[8, 0, 45, "\`../QueryListItem\` import should occur before import of \`.\`", "3768254234"]
],
"js/pages/DashboardPage/QueryList/index.tsx:2324422660": [
Expand All @@ -536,7 +530,7 @@ exports[`eslint`] = {
[82, 25, 5, "\'props\' is assigned a value but never used.", "187023499"],
[93, 27, 5, "\'props\' is assigned a value but never used.", "187023499"]
],
"js/pages/DashboardPage/index.spec.tsx:3159805396": [
"js/pages/DashboardPage/index.spec.tsx:923596990": [
[22, 0, 63, "\`../../fixtures/mockRouter\` import should occur before import of \`./ChartList\`", "1389010998"],
[24, 0, 41, "\`./constants\` import should occur before import of \`.\`", "1965203596"]
],
Expand Down Expand Up @@ -572,15 +566,15 @@ exports[`eslint`] = {
[97, 6, 29, "Use object destructuring.", "2645724888"],
[104, 6, 19, "\'featureOptionConfig\' is assigned a value but never used.", "2233467640"]
],
"js/pages/SearchPage/ResourceSelector/index.tsx:4162192754": [
"js/pages/SearchPage/ResourceSelector/index.tsx:1883534517": [
[54, 4, 22, "Must use destructuring props assignment", "3282194885"],
[65, 19, 19, "Must use destructuring props assignment", "3960624135"],
[85, 15, 17, "Must use destructuring props assignment", "3767383680"],
[93, 15, 21, "Must use destructuring props assignment", "1352381626"],
[101, 15, 16, "Must use destructuring props assignment", "1927755215"],
[109, 15, 19, "Must use destructuring props assignment", "4761610"]
],
"js/pages/SearchPage/SearchFilter/InputFilter/index.tsx:2399701553": [
"js/pages/SearchPage/SearchFilter/InputFilter/index.tsx:1019923643": [
[70, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
],
"js/pages/SearchPage/SearchPanel/tests/index.spec.tsx:3928473928": [
Expand Down Expand Up @@ -623,7 +617,7 @@ exports[`eslint`] = {
[295, 8, 29, "Use object destructuring.", "2645724888"],
[308, 8, 111, "Use object destructuring.", "1069171227"]
],
"js/pages/TableDetailPage/RequestMetadataForm/index.tsx:3248519077": [
"js/pages/TableDetailPage/RequestMetadataForm/index.tsx:1010157609": [
[63, 4, 40, "Must use destructuring props assignment", "1859841252"],
[67, 4, 40, "Must use destructuring props assignment", "1859841252"],
[71, 12, 20, "Must use destructuring props assignment", "2110463974"],
Expand All @@ -643,9 +637,9 @@ exports[`eslint`] = {
"js/pages/TableDetailPage/WatermarkLabel/index.tsx:2189911402": [
[29, 22, 21, "Must use destructuring props assignment", "587844958"]
],
"js/pages/TableDetailPage/index.tsx:3561497819": [
[163, 2, 20, "key should be placed after componentWillUnmount", "3916788587"],
[216, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
"js/pages/TableDetailPage/index.tsx:2342375668": [
[164, 2, 20, "key should be placed after componentWillUnmount", "3916788587"],
[217, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
],
"js/utils/textUtils.ts:2545492889": [
[19, 6, 46, "Unexpected lexical declaration in case block.", "156477898"]
Expand Down
28 changes: 23 additions & 5 deletions frontend/amundsen_application/static/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,32 @@

import customWebpackConfig from './webpack.config.js';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import webpack from 'webpack';

/**
* Disables Webpack from splitting the code into chunks
* @param config - The webpack config to update
*/
function disableChunkSplitting(config) {
config.optimization = { splitChunks: { chunks: 'async' } };
config.output = { ...config.output, chunkFilename: '[chunkhash].chunk.js' };
config.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
);

return config;
}

module.exports = {
stories: ['../js/**/*.story.tsx'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
managerWebpack: async (config) => {
return disableChunkSplitting(config);
},
core: {
builder: 'webpack5',
},
staticDirs: ['../../'],
webpackFinal: (config) => {
return {
...config,
Expand Down
6 changes: 0 additions & 6 deletions frontend/amundsen_application/static/.storybook/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ function resolve(dir) {
}

const TSX_PATTERN = /\.ts|\.tsx$/;
const JSX_PATTERN = /\.jsx?$/;
const CSS_PATTERN = /\.(sa|sc|c)ss$/;
const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
const FONT_PATTERN = /\.(ttf|woff2|otf)$/;
Expand All @@ -34,11 +33,6 @@ module.exports = {
exclude: /node_modules/,
loader: 'ts-loader',
},
{
test: JSX_PATTERN,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: CSS_PATTERN,
use: [
Expand Down
20 changes: 10 additions & 10 deletions frontend/amundsen_application/static/js/components/Announcements/AnnouncementsList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,16 +82,16 @@ const AnnouncementsList: React.FC<AnnouncementsListProps> = ({
listContent = [<EmptyAnnouncementItem />];
}
if (announcements.length > 0) {
listContent = getLatestsAnnouncements(
announcements
).map(({ date, title, html_content }) => (
<AnnouncementItem
key={`key:${date}`}
date={date}
title={title}
html_content={html_content}
/>
));
listContent = getLatestsAnnouncements(announcements).map(
({ date, title, html_content }) => (
<AnnouncementItem
key={`key:${date}`}
date={date}
title={title}
html_content={html_content}
/>
)
);
}
if (hasError) {
listContent = [<AnnouncementErrorItem />];
Expand Down
25 changes: 7 additions & 18 deletions frontend/amundsen_application/static/js/components/InfoButton/infoButton.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0

import React from 'react';
import { withKnobs, object } from '@storybook/addon-knobs';

import { IconSizes } from 'interfaces';
import StorySection from '../StorySection';
Expand All @@ -11,29 +10,20 @@ import InfoButton from '.';
export const InfoButtonStory = () => (
<>
<StorySection title="Info Button">
<InfoButton
infoText={object('InfoButton infoText', 'Some info text to share')}
title={object('InfoButton title', 'Popover Title')}
/>
<InfoButton infoText="Some info text to share" title="Popover Title" />
</StorySection>
<StorySection title="Info Button to left">
<InfoButton
infoText={object(
'InfoButton infoText to left title',
'Some info text to share'
)}
title={object('InfoButton to left title', 'Popover Title')}
placement={object('InfoButton placement to left', 'left')}
infoText="Some info text to share"
title="Popover Title"
placement="left"
/>
</StorySection>
<StorySection title="Info Button small size">
<InfoButton
infoText={object(
'InfoButton infoText small size title',
'Some info text to share'
)}
title={object('InfoButton small size title', 'Popover Title')}
placement={object('InfoButton small size placement', 'left')}
infoText="Some info text to share"
title="Popover Title"
placement="left"
size={IconSizes.SMALL}
/>
</StorySection>
Expand All @@ -44,5 +34,4 @@ InfoButtonStory.storyName = 'Info Button';
export default {
title: 'Components/Buttons',
component: InfoButton,
decorators: [withKnobs],
};
Loading