Skip to content

Commit 45ebaa7

Browse files
asikowitzasikowitz
authored
build(ui): Sort imports and enforce absolute imports with aliases (#13113)
1 parent dbad522 commit 45ebaa7

File tree

2,809 files changed

+19386
-15475
lines changed

Some content is hidden

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

2,809 files changed

+19386
-15475
lines changed

‎datahub-web-react/.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
dist/
33
build/
44
node_modules/
5+
**/*.generated.ts

‎datahub-web-react/.eslintrc.js

+28-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
'plugin:vitest/recommended',
99
'prettier',
1010
],
11-
plugins: ['@typescript-eslint', '@stylistic/js', 'react-refresh'],
11+
plugins: ['@typescript-eslint', '@stylistic/js', 'react-refresh', 'import-alias'],
1212
parserOptions: {
1313
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
1414
sourceType: 'module', // Allows for the use of imports
@@ -23,6 +23,7 @@ module.exports = {
2323
'arrow-body-style': 'off',
2424
'class-methods-use-this': 'off',
2525
'import/no-extraneous-dependencies': 'off',
26+
'import/no-relative-packages': 'error',
2627
'import/prefer-default-export': 'off', // TODO: remove this lint rule
2728
'no-console': 'off',
2829
'no-plusplus': 'off',
@@ -50,18 +51,36 @@ module.exports = {
5051
'vitest/prefer-to-be': 'off',
5152
'@typescript-eslint/no-use-before-define': ['error', { functions: false, classes: false }],
5253
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
54+
'import-alias/import-alias': [
55+
'error',
56+
{
57+
aliases: [
58+
// Must be kept consistent with tsconfig.json, vite.config.ts, and .prettierrc.js
59+
{ alias: '@components/', matcher: '^src/alchemy-components/' },
60+
{ alias: '@app/', matcher: '^src/app/' },
61+
{ alias: '@conf/', matcher: '^src/conf/' },
62+
{ alias: '@graphql/', matcher: '^src/graphql/' },
63+
{ alias: '@graphql-mock/', matcher: '^src/graphql-mock/' },
64+
{ alias: '@images/', matcher: '^src/images/' },
65+
{ alias: '@providers/', matcher: '^src/providers/' },
66+
{ alias: '@utils/', matcher: '^src/utils/' },
67+
{ alias: '@types', matcher: '^src/types.generated' },
68+
{ alias: '@src/', matcher: '^src/' },
69+
],
70+
},
71+
],
5372
},
5473
settings: {
5574
react: {
5675
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
5776
},
5877
},
59-
overrides: [
60-
{
61-
files: ['src/app/searchV2/**/*.tsx', 'src/app/entityV2/**/*.tsx'],
62-
rules: {
63-
'import/no-cycle': 'off',
64-
},
65-
},
66-
],
78+
overrides: [
79+
{
80+
files: ['src/app/searchV2/**/*.tsx', 'src/app/entityV2/**/*.tsx'],
81+
rules: {
82+
'import/no-cycle': 'off',
83+
},
84+
},
85+
],
6786
};

‎datahub-web-react/.prettierrc.js

+12
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,16 @@ module.exports = {
44
singleQuote: true,
55
printWidth: 120,
66
tabWidth: 4,
7+
plugins: ['@trivago/prettier-plugin-sort-imports'],
8+
importOrder: [
9+
// Third party imports are first automatically, in their own group
10+
'^@components/(.*)$',
11+
// Have to specify all aliases otherwise they're considered third party
12+
'^(@app|@conf|@providers|@utils|@src)/(.*)$',
13+
'^(@graphql/|@graphql-mock/|@types)(.*)$',
14+
'^@images/(.*)$',
15+
'^[./]',
16+
],
17+
importOrderSeparation: true,
18+
importOrderSortSpecifiers: true,
719
};

‎datahub-web-react/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
"test-coverage": "yarn test run --coverage",
111111
"generate": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' graphql-codegen --config codegen.yml",
112112
"lint": "eslint . --ext .ts,.tsx --quiet && yarn format-check && yarn type-check",
113-
"lint-fix": "eslint '*/**/*.{ts,tsx}' --quiet --fix && yarn format",
113+
"lint-fix": "eslint . --ext .ts,.tsx --quiet --fix && yarn format",
114114
"format-check": "prettier --check src",
115115
"format": "prettier --write src",
116116
"type-check": "tsc --noEmit",
@@ -146,6 +146,7 @@
146146
"@storybook/test": "^8.1.11",
147147
"@storybook/theming": "^8.1.11",
148148
"@stylistic/eslint-plugin-js": "^3.1.0",
149+
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
149150
"@types/graphql": "^14.5.0",
150151
"@types/query-string": "^6.3.0",
151152
"@types/styled-components": "^5.1.7",
@@ -158,14 +159,15 @@
158159
"eslint-config-airbnb-typescript": "^17.0.0",
159160
"eslint-config-prettier": "^8.8.0",
160161
"eslint-plugin-import": "^2.25.3",
162+
"eslint-plugin-import-alias": "^1.2.0",
161163
"eslint-plugin-jsx-a11y": "^6.5.1",
162164
"eslint-plugin-react": "^7.28.0",
163165
"eslint-plugin-react-hooks": "^4.3.0",
164166
"eslint-plugin-react-refresh": "^0.4.6",
165167
"eslint-plugin-vitest": "^0.3.17",
166168
"jsdom": "^22.1.0",
167169
"less": "^4.2.0",
168-
"prettier": "^2.8.8",
170+
"prettier": "^3.5.3",
169171
"source-map-explorer": "^2.5.2",
170172
"storybook": "^8.1.11",
171173
"vite": "^4.5.6",

‎datahub-web-react/src/App.less

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
@font-face {
88
font-family: 'Manrope';
99
font-style: normal;
10-
src: local('Manrope'), url('./fonts/manrope.woff2') format('woff2');
10+
src:
11+
local('Manrope'),
12+
url('./fonts/manrope.woff2') format('woff2');
1113
}

‎datahub-web-react/src/App.test.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React from 'react';
2-
import { render } from '@testing-library/react';
31
import { MockedProvider } from '@apollo/client/testing';
4-
import { InnerApp } from './App';
5-
import { mocks } from './Mocks';
2+
import { render } from '@testing-library/react';
3+
import React from 'react';
4+
5+
import { InnerApp } from '@src/App';
6+
import { mocks } from '@src/Mocks';
67

78
// eslint-disable-next-line vitest/expect-expect
89
test('renders the app', async () => {

‎datahub-web-react/src/App.tsx

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import React from 'react';
2-
import Cookies from 'js-cookie';
3-
import { BrowserRouter as Router } from 'react-router-dom';
4-
import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache, ServerError } from '@apollo/client';
1+
import { ApolloClient, ApolloProvider, InMemoryCache, ServerError, createHttpLink } from '@apollo/client';
52
import { onError } from '@apollo/client/link/error';
3+
import Cookies from 'js-cookie';
4+
import React from 'react';
65
import { Helmet, HelmetProvider } from 'react-helmet-async';
7-
import './App.less';
8-
import './AppV2.less';
9-
import { Routes } from './app/Routes';
10-
import { PageRoutes } from './conf/Global';
11-
import { isLoggedInVar } from './app/auth/checkAuthStatus';
12-
import { GlobalCfg } from './conf';
13-
import possibleTypesResult from './possibleTypes.generated';
14-
import { ErrorCodes } from './app/shared/constants';
15-
import CustomThemeProvider from './CustomThemeProvider';
16-
import { useCustomTheme } from './customThemeContext';
6+
import { BrowserRouter as Router } from 'react-router-dom';
7+
8+
import { Routes } from '@app/Routes';
9+
import { isLoggedInVar } from '@app/auth/checkAuthStatus';
10+
import { ErrorCodes } from '@app/shared/constants';
11+
import { PageRoutes } from '@conf/Global';
12+
import '@src/App.less';
13+
import '@src/AppV2.less';
14+
import CustomThemeProvider from '@src/CustomThemeProvider';
15+
import { GlobalCfg } from '@src/conf';
16+
import { useCustomTheme } from '@src/customThemeContext';
17+
import possibleTypesResult from '@src/possibleTypes.generated';
1718

1819
/*
1920
Construct Apollo Client

‎datahub-web-react/src/AppConfigProvider.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { useEffect } from 'react';
2-
import './App.less';
3-
import { THIRD_PARTY_LOGGING_KEY } from './app/analytics/analytics';
4-
import { checkAuthStatus } from './app/auth/checkAuthStatus';
5-
import { AppConfigContext, DEFAULT_APP_CONFIG } from './appConfigContext';
6-
import { useAppConfigQuery } from './graphql/app.generated';
2+
3+
import { THIRD_PARTY_LOGGING_KEY } from '@app/analytics/analytics';
4+
import { checkAuthStatus } from '@app/auth/checkAuthStatus';
5+
import '@src/App.less';
6+
import { AppConfigContext, DEFAULT_APP_CONFIG } from '@src/appConfigContext';
7+
8+
import { useAppConfigQuery } from '@graphql/app.generated';
79

810
function changeFavicon(src) {
911
const links = document.querySelectorAll("link[rel~='icon']") as any;

‎datahub-web-react/src/AppV2.less

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
@font-face {
88
font-family: 'Manrope';
99
font-style: normal;
10-
src: local('Manrope'), url('./fonts/manrope.woff2') format('woff2');
10+
src:
11+
local('Manrope'),
12+
url('./fonts/manrope.woff2') format('woff2');
1113
}
1214

1315
@font-face {

‎datahub-web-react/src/CustomThemeProvider.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useEffect, useState } from 'react';
22
import { ThemeProvider } from 'styled-components';
3-
import { Theme } from './conf/theme/types';
4-
import defaultThemeConfig from './conf/theme/theme_light.config.json';
5-
import { CustomThemeContext } from './customThemeContext';
3+
4+
import defaultThemeConfig from '@conf/theme/theme_light.config.json';
5+
import { Theme } from '@conf/theme/types';
6+
import { CustomThemeContext } from '@src/customThemeContext';
67

78
interface Props {
89
children: React.ReactNode;

‎datahub-web-react/src/Mocks.tsx

+48-46
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,66 @@
11
import React from 'react';
2-
import { GetDatasetDocument, UpdateDatasetDocument, GetDatasetSchemaDocument } from './graphql/dataset.generated';
3-
import { GetDataFlowDocument } from './graphql/dataFlow.generated';
4-
import { GetDataJobDocument } from './graphql/dataJob.generated';
5-
import { GetBrowsePathsDocument, GetBrowseResultsDocument } from './graphql/browse.generated';
2+
3+
import { Entity } from '@app/entity/Entity';
4+
import { VIEW_ENTITY_PAGE } from '@app/entity/shared/constants';
5+
import { GenericEntityProperties } from '@app/entity/shared/types';
6+
import { ViewBuilderState } from '@app/entity/view/types';
7+
import { EntityCapabilityType } from '@app/entityV2/Entity';
8+
import { FetchedEntity } from '@app/lineage/types';
9+
import { DEFAULT_APP_CONFIG } from '@src/appConfigContext';
10+
11+
import { AppConfigDocument, GetEntityCountsDocument } from '@graphql/app.generated';
12+
import { GetBrowsePathsDocument, GetBrowseResultsDocument } from '@graphql/browse.generated';
13+
import { GetDataFlowDocument } from '@graphql/dataFlow.generated';
14+
import { GetDataJobDocument } from '@graphql/dataJob.generated';
15+
import { GetDatasetDocument, GetDatasetSchemaDocument, UpdateDatasetDocument } from '@graphql/dataset.generated';
16+
import { GetGlossaryTermDocument, GetGlossaryTermQuery } from '@graphql/glossaryTerm.generated';
17+
import { GetMeDocument } from '@graphql/me.generated';
18+
import { GetMlModelDocument } from '@graphql/mlModel.generated';
19+
import { GetMlModelGroupDocument } from '@graphql/mlModelGroup.generated';
20+
import { GetGrantedPrivilegesDocument } from '@graphql/policy.generated';
21+
import { GetQuickFiltersDocument } from '@graphql/quickFilters.generated';
22+
import { ListRecommendationsDocument } from '@graphql/recommendations.generated';
623
import {
7-
GetAutoCompleteResultsDocument,
824
GetAutoCompleteMultipleResultsDocument,
25+
GetAutoCompleteResultsDocument,
926
GetSearchResultsDocument,
10-
GetSearchResultsQuery,
1127
GetSearchResultsForMultipleDocument,
1228
GetSearchResultsForMultipleQuery,
13-
} from './graphql/search.generated';
14-
import { GetUserDocument } from './graphql/user.generated';
29+
GetSearchResultsQuery,
30+
} from '@graphql/search.generated';
31+
import { GetTagDocument } from '@graphql/tag.generated';
32+
import { GetUserDocument } from '@graphql/user.generated';
1533
import {
16-
Dataset,
34+
AppConfig,
35+
BusinessAttribute,
36+
Container,
1737
DataFlow,
38+
DataHubView,
39+
DataHubViewFilter,
40+
DataHubViewType,
1841
DataJob,
19-
GlossaryTerm,
20-
GlossaryNode,
42+
Dataset,
43+
EntityPrivileges,
44+
EntityRelationshipsResult,
2145
EntityType,
22-
PlatformType,
46+
FilterOperator,
47+
GlobalTags,
48+
GlossaryNode,
49+
GlossaryTerm,
50+
LogicalOperator,
51+
Maybe,
2352
MlModel,
2453
MlModelGroup,
25-
SchemaFieldDataType,
26-
ScenarioType,
54+
Owner,
55+
OwnershipType,
56+
PlatformPrivileges,
57+
PlatformType,
2758
RecommendationRenderType,
2859
RelationshipDirection,
29-
Container,
30-
PlatformPrivileges,
31-
FilterOperator,
32-
AppConfig,
33-
EntityPrivileges,
34-
BusinessAttribute,
35-
EntityRelationshipsResult,
36-
Maybe,
60+
ScenarioType,
61+
SchemaFieldDataType,
3762
SearchResult,
38-
DataHubViewType,
39-
LogicalOperator,
40-
DataHubView,
41-
DataHubViewFilter,
42-
GlobalTags,
43-
OwnershipType,
44-
Owner,
45-
} from './types.generated';
46-
import { GetTagDocument } from './graphql/tag.generated';
47-
import { GetMlModelDocument } from './graphql/mlModel.generated';
48-
import { GetMlModelGroupDocument } from './graphql/mlModelGroup.generated';
49-
import { GetGlossaryTermDocument, GetGlossaryTermQuery } from './graphql/glossaryTerm.generated';
50-
import { GetEntityCountsDocument, AppConfigDocument } from './graphql/app.generated';
51-
import { GetMeDocument } from './graphql/me.generated';
52-
import { ListRecommendationsDocument } from './graphql/recommendations.generated';
53-
import { FetchedEntity } from './app/lineage/types';
54-
import { DEFAULT_APP_CONFIG } from './appConfigContext';
55-
import { GetQuickFiltersDocument } from './graphql/quickFilters.generated';
56-
import { GetGrantedPrivilegesDocument } from './graphql/policy.generated';
57-
import { VIEW_ENTITY_PAGE } from './app/entity/shared/constants';
58-
import { Entity } from './app/entity/Entity';
59-
import { GenericEntityProperties } from './app/entity/shared/types';
60-
import { ViewBuilderState } from './app/entity/view/types';
61-
import { EntityCapabilityType } from './app/entityV2/Entity';
63+
} from '@types';
6264

6365
export const entityPrivileges: EntityPrivileges = {
6466
canEditLineage: true,

‎datahub-web-react/src/alchemy-components/.docs/Icons.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Meta, Source } from '@storybook/blocks';
22

33
import { AVAILABLE_ICONS } from '@components';
4+
45
import { IconGalleryWithSearch } from './mdx-components';
56

67
<Meta title="Icons" />

‎datahub-web-react/src/alchemy-components/.docs/Intro.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Meta, Description } from '@storybook/blocks';
1+
import { Description, Meta } from '@storybook/blocks';
2+
23
import ReadMe from '../README.mdx';
34

45
<Meta title="Introduction" />

‎datahub-web-react/src/alchemy-components/.docs/StyleGuide.mdx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { Meta, Source } from '@storybook/blocks';
22

33
import { Heading } from '@components';
4+
45
import { colors } from '@components/theme';
56

6-
import { Grid, FlexGrid, ColorCard, CopyButton, Seperator } from './mdx-components';
7+
import { ColorCard, CopyButton, FlexGrid, Grid, Seperator } from './mdx-components';
78

89
import borderSource from '@components/theme/foundations/borders?raw';
910
import colorsSource from '@components/theme/foundations/colors?raw';
10-
import typographySource from '@components/theme/foundations/typography?raw';
1111
import radiusSource from '@components/theme/foundations/radius?raw';
1212
import shadowsSource from '@components/theme/foundations/shadows?raw';
1313
import sizesSource from '@components/theme/foundations/sizes?raw';
1414
import spacingSource from '@components/theme/foundations/spacing?raw';
1515
import transitionSource from '@components/theme/foundations/transition?raw';
16+
import typographySource from '@components/theme/foundations/typography?raw';
1617
import zIndexSource from '@components/theme/foundations/zIndex?raw';
1718

1819
<Meta title="Style Guide" />

‎datahub-web-react/src/alchemy-components/.docs/mdx-components/CodeBlock.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import { DocsContext, Source } from '@storybook/blocks';
12
import React from 'react';
23

3-
import { Source, DocsContext } from '@storybook/blocks';
4-
54
export const CodeBlock = () => {
65
const context = React.useContext(DocsContext);
76

‎datahub-web-react/src/alchemy-components/.docs/mdx-components/CopyButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { Button, Icon } from '@components';
12
import React from 'react';
23

3-
import { Button, Icon } from '@components';
44
import { copyToClipboard } from './utils';
55

66
interface Props {

‎datahub-web-react/src/alchemy-components/.docs/mdx-components/GridList.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/*
22
Docs Only Component that helps to display a list of components in a grid layout.
33
*/
4-
54
import React, { ReactNode } from 'react';
65

76
const styles = {

0 commit comments

Comments
 (0)