chore: update yaml-loader (pinterest#1124)

* chore: update yaml-loader

* remove json-loader

* fix storybook

.github/pr-title-checker-config.json

@@ -4,6 +4,6 @@
         "color": "EEEEEE"
     },
     "CHECKS": {
-        "regexp": "(build|fix|ci|docs|ui|refactor|test|feat|minor|MAJOR|BREAKING CHANGE)(\\(.+\\))?!?\\:"
+        "regexp": "(build|fix|ci|docs|ui|refactor|test|feat|minor|MAJOR|BREAKING CHANGE|\\[Snyk\\])(\\(.+\\))?!?\\:"
     }
 }

.storybook/main.js

@@ -7,4 +7,8 @@ module.exports = {
     core: {
         builder: 'webpack5',
     },
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-768238380
+    reactOptions: {
+        fastRefresh: true,
+    },
 };

.storybook/webpack.js

@@ -41,7 +41,7 @@ module.exports = async (config) => {
     config.module.rules.push({
         test: /\.ya?ml$/,
         include: path.resolve(__dirname, 'querybook/config'),
-        use: ['json-loader', 'yaml-loader'],
+        use: 'yaml-loader',
     });
     config.module.rules.push({
         test: /\.(ts|tsx)$/,

package.json

@@ -102,7 +102,7 @@
         "typescript": "4.4.4",
         "webpack": "5.65.0",
         "webpack-cli": "4.7.0",
-        "yaml-loader": "0.6.0",
+        "yaml-loader": "^0.8.0",
         "yup": "^0.32.11"
     },
     "devDependencies": {
@@ -168,7 +168,6 @@
         "eslint-plugin-unused-imports": "^2.0.0",
         "jest": "26.6.3",
         "jest-esm-transformer": "^1.0.0",
-        "json-loader": "^0.5.7",
         "postcss-loader": "^6.1.0",
         "postcss-preset-env": "6.7.0",
         "prettier": "2.7.1",

querybook/webapp/components/DataDoc/DataDocCellControl.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import toast from 'react-hot-toast';
 
+import DatadocConfig from 'config/datadoc.yaml';
 import { ComponentType, ElementType } from 'const/analytics';
 import { IDataCellMeta } from 'const/datadoc';
 import { useBoundFunc } from 'hooks/useBoundFunction';
@@ -16,16 +17,7 @@ import { IListMenuItem, ListMenu } from 'ui/Menu/ListMenu';
 const COPY_CELL_SHORTCUT = getShortcutSymbols(KeyMap.dataDoc.copyCell.key);
 const PASTE_CELL_SHORTCUT = getShortcutSymbols(KeyMap.dataDoc.pasteCell.key);
 
-const cellTypes: Record<
-    string,
-    {
-        key: string;
-        icon: string;
-        name?: string;
-        meta: Record<string, unknown>;
-        meta_default: Record<string, unknown>;
-    }
-> = require('config/datadoc.yaml').cell_types;
+const cellTypes = DatadocConfig.cell_types;
 
 interface IProps {
     index?: number;

querybook/webapp/components/DataDoc/DataDocLoading.tsx

@@ -1,11 +1,12 @@
 import { sample } from 'lodash';
 import React from 'react';
 
+import loadingHintsConfig from 'config/loading_hints.yaml';
 import { Icon } from 'ui/Icon/Icon';
 import { LoadingIcon } from 'ui/Loading/Loading';
 import { Subtitle, Title } from 'ui/Title/Title';
 
-const loadingHints: string[] = require('config/loading_hints.yaml').hints;
+const loadingHints = loadingHintsConfig.hints;
 
 export const DataDocLoading: React.FC = () => {
     const hint = sample(loadingHints);

querybook/webapp/components/DataTableViewMini/ColumnPanelView.tsx

@@ -2,13 +2,12 @@ import { ContentState } from 'draft-js';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import hiveTypeInfo from 'config/type_info.yaml';
 import { prettyPrintType } from 'lib/utils/complex-types';
 import { IStoreState } from 'redux/store/types';
 
 import { PanelSection, SubPanelSection } from './PanelSection';
 
-const hiveTypeInfo: Record<string, string> = require('config/type_info.yaml');
-
 interface IColumnPanelViewProps {
     columnId: number;
 }

querybook/webapp/components/Info/FAQ.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
+import faqsConfig from 'config/faqs.yaml';
 import { Content } from 'ui/Content/Content';
 import { Markdown } from 'ui/Markdown/Markdown';
 import { Subtitle } from 'ui/Title/Title';
 
 import './FAQ.scss';
 
-const faqs: Array<{ q: string; a: string }> = require('config/faqs.yaml').faqs;
+const faqs = faqsConfig.faqs;
 
 export const FAQ: React.FunctionComponent = () => (
     <div className="FAQ">

querybook/webapp/components/Landing/Landing.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { QuerybookSidebarUIGuide } from 'components/UIGuide/QuerybookSidebarUIGuide';
+import loadingHintsConfig from 'config/loading_hints.yaml';
 import { ComponentType, ElementType } from 'const/analytics';
 import { useShallowSelector } from 'hooks/redux/useShallowSelector';
 import { useBrowserTitle } from 'hooks/useBrowserTitle';
@@ -21,7 +22,7 @@ import { Column, Columns } from 'ui/Column/Column';
 
 import './Landing.scss';
 
-const querybookHints: string[] = require('config/loading_hints.yaml').hints;
+const querybookHints = loadingHintsConfig.hints;
 
 const DefaultLanding: React.FC = ({ children }) => {
     const { userInfo, recentDataDocs, favoriteDataDocs, environment } =

querybook/webapp/components/UserSettingsMenu/UserSettingsMenu.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { UserSettingsTab } from 'components/EnvironmentAppRouter/modalRoute/UserSettingsMenuRoute';
+import userSettingConfig from 'config/user_setting.yaml';
 import { titleize } from 'lib/utils';
 import { availableEnvironmentsSelector } from 'redux/environment/selector';
 import { notificationServiceSelector } from 'redux/notificationService/selector';
@@ -12,23 +13,6 @@ import { makeSelectOptions, Select } from 'ui/Select/Select';
 
 import './UserSettingsMenu.scss';
 
-const userSettingConfig: Record<
-    string,
-    {
-        options: Array<
-            | string
-            | {
-                  value: string;
-                  key: string;
-              }
-        >;
-        default: string;
-        helper: string;
-        tab: UserSettingsTab;
-        per_env?: boolean;
-    }
-> = require('config/user_setting.yaml');
-
 export const UserSettingsMenu: React.FC<{ tab: UserSettingsTab }> = ({
     tab,
 }) => {

querybook/webapp/config.d.ts

@@ -0,0 +1,76 @@
+declare module 'config/datadoc.yaml' {
+    const data: {
+        cell_types: Record<
+            string,
+            {
+                key: string;
+                icon: string;
+                name?: string;
+                meta: Record<string, unknown>;
+                meta_default: Record<string, unknown>;
+            }
+        >;
+    };
+    export default data;
+}
+
+declare module 'config/faqs.yaml' {
+    const data: {
+        faqs: Array<{ q: string; a: string }>;
+    };
+    export default data;
+}
+
+declare module 'config/loading_hints.yaml' {
+    const data: {
+        hints: string[];
+    };
+    export default data;
+}
+
+declare module 'config/type_info.yaml' {
+    const data: Record<string, string>;
+    export default data;
+}
+
+declare module 'config/user_setting.yaml' {
+    const data: Record<
+        string,
+        {
+            options: Array<
+                | string
+                | {
+                      value: string;
+                      key: string;
+                  }
+            >;
+            default: string;
+            helper: string;
+            tab: UserSettingsTab;
+            per_env?: boolean;
+        }
+    >;
+    export default data;
+}
+
+declare module 'config/query_result_limit.yaml' {
+    const data: {
+        default_query_result_size: number;
+        query_result_size_options: number[];
+    };
+    export default data;
+}
+
+declare module 'config/query_error.yaml' {
+    const data: Record<
+        string,
+        Record<
+            string,
+            {
+                regex: string;
+                message: string;
+            }
+        >
+    >;
+    export default data;
+}

querybook/webapp/const/queryResultLimit.ts

@@ -1,9 +1,8 @@
 // Make sure this is in increasing order
 // export const test = 5;
-
-const QueryResultLimitConfig = require('config/query_result_limit.yaml');
+import QueryResultLimitConfig from 'config/query_result_limit.yaml';
 
 export const StatementExecutionDefaultResultSize =
     QueryResultLimitConfig.default_query_result_size;
-export const StatementExecutionResultSizes: number[] =
+export const StatementExecutionResultSizes =
     QueryResultLimitConfig.query_result_size_options;

querybook/webapp/lib/query-result/error-suggestion.ts

@@ -1,20 +1,11 @@
+import queryErrorsByLanguage from 'config/query_error.yaml';
 import { IQueryEngine } from 'const/queryEngine';
 import {
     IQueryError,
     IQueryExecution,
     IStatementExecution,
 } from 'const/queryExecution';
 
-const queryErrorsByLanguage: Record<
-    string,
-    Record<
-        string,
-        {
-            regex: string;
-            message: string;
-        }
-    >
-> = require('config/query_error.yaml');
 const SHARED_ERROR_SUGGESTION = 'common';
 
 // Merge all the common in

querybook/webapp/redux/user/reducer.ts

@@ -1,22 +1,13 @@
 import { produce } from 'immer';
 
+import userSettingsConfig from 'config/user_setting.yaml';
 import localStore from 'lib/local-store';
 import { USER_SETTINGS_KEY } from 'lib/local-store/const';
 import { EnvironmentAction } from 'redux/environment/types';
 import { NotificationServiceAction } from 'redux/notificationService/types';
 
 import { IUserState, UserAction } from './types';
 
-const userSettingsConfig: Record<
-    string,
-    {
-        default: string;
-        helper: string;
-        options: Array<string | { value: string; key: string }>;
-        per_env?: boolean;
-    }
-> = require('config/user_setting.yaml');
-
 function computeUserSettings(
     customSetting: Record<string, string>,
     currentEnvId?: number

webpack.config.js

@@ -205,7 +205,7 @@ module.exports = (env, options) => {
                 {
                     test: /\.ya?ml$/,
                     include: path.resolve(__dirname, 'querybook/config'),
-                    use: ['json-loader', 'yaml-loader'],
+                    use: 'yaml-loader',
                 },
                 {
                     test: /\.md$/i,

yarn.lock

@@ -12422,6 +12422,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
   integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
 
+javascript-stringify@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
+  integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
+
 jest-changed-files@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
@@ -12911,11 +12916,6 @@ json-bigint@^1.0.0:
   dependencies:
     bignumber.js "^9.0.0"
 
-json-loader@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
-  integrity sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
-
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -19457,15 +19457,16 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml-loader@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/yaml-loader/-/yaml-loader-0.6.0.tgz#fe1c48b9f4803dace55a59a1474e790ba6ab1b48"
-  integrity sha512-1bNiLelumURyj+zvVHOv8Y3dpCri0F2S+DCcmps0pA1zWRLjS+FhZQg4o3aUUDYESh73+pKZNI18bj7stpReow==
+yaml-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/yaml-loader/-/yaml-loader-0.8.0.tgz#c839325e3fdee082b3768b2a21fe34fde5d96f61"
+  integrity sha512-LjeKnTzVBKWiQBeE2L9ssl6WprqaUIxCSNs5tle8PaDydgu3wVFXTbMfsvF2MSErpy9TDVa092n4q6adYwJaWg==
   dependencies:
-    loader-utils "^1.4.0"
-    yaml "^1.8.3"
+    javascript-stringify "^2.0.1"
+    loader-utils "^2.0.0"
+    yaml "^2.0.0"
 
-yaml@^1.10.0, yaml@^1.8.3:
+yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
@@ -19475,6 +19476,11 @@ yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
+yaml@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.1.tgz#3014bf0482dcd15147aa8e56109ce8632cd60ce4"
+  integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==
+
 yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"