Format all source files under frontend/src using prettier (#2462)

* Format frontend/src * Fix lint errors * Update snapshots
kubeflow · Oct 22, 2019 · b72de99 · b72de99
1 parent 1efcb5d
commit b72de99
Show file tree

Hide file tree

Showing 149 changed files with 11,554 additions and 7,910 deletions.
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -0,0 +1,2 @@
+src/generated
+server
diff --git a/frontend/README.md b/frontend/README.md
@@ -79,6 +79,10 @@ To understand more what prettier is: [What is Prettier](https://prettier.io/docs
   ```
 - For others, refer to https://prettier.io/docs/en/editors.html
 
+### Format Code Manually
+
+Run `npm run format`.
+
 ### Escape hatch
 
 If there's some code that you don't want being formatted by prettier, follow

diff --git a/frontend/package.json b/frontend/package.json
@@ -44,6 +44,7 @@
     "build": "npm run lint && react-scripts-ts build",
     "docker": "COMMIT_HASH=`git rev-parse HEAD`; docker build -q -t ml-pipelines-frontend:${COMMIT_HASH} --build-arg COMMIT_HASH=${COMMIT_HASH} --build-arg DATE=\"`date -u`\" -f Dockerfile ..",
     "eject": "react-scripts-ts eject",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "java": "java -version",
     "lint": "tslint -c ./tslint.prod.json -p .",
     "mock:api": "ts-node-dev -O '{\"module\": \"commonjs\"}' mock-backend/mock-api-server.ts 3001",

diff --git a/frontend/src/Css.tsx b/frontend/src/Css.tsx
@@ -122,7 +122,7 @@ export const theme = createMuiTheme({
         },
         color: color.theme,
         marginRight: 10,
-        padding: '0 8px'
+        padding: '0 8px',
       },
     },
     MuiDialogActions: {
@@ -162,7 +162,7 @@ export const theme = createMuiTheme({
     },
     MuiInput: {
       input: { padding: 0 },
-      root: { padding: 0 }
+      root: { padding: 0 },
     },
     MuiInputAdornment: {
       positionEnd: {
@@ -175,13 +175,13 @@ export const theme = createMuiTheme({
         backgroundColor: '#666',
         color: '#f1f1f1',
         fontSize: 12,
-      }
+      },
     },
   },
   palette,
   typography: {
     fontFamily: fonts.main,
-    fontSize: fontsize.base + ' !important' as any,
+    fontSize: (fontsize.base + ' !important') as any,
     useNextVariants: true,
   },
 });
@@ -247,7 +247,7 @@ export const commonCss = stylesheet({
   infoIcon: {
     color: color.lowContrast,
     height: 16,
-    width: 16
+    width: 16,
   },
   link: {
     $nest: {
@@ -280,8 +280,7 @@ export const commonCss = stylesheet({
     whiteSpace: 'pre-wrap',
   },
   scrollContainer: {
-    background:
-      `linear-gradient(white 30%, rgba(255,255,255,0)),
+    background: `linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-corner at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-corner at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%`,

diff --git a/frontend/src/TestUtils.tsx b/frontend/src/TestUtils.tsx
@@ -64,11 +64,16 @@ export default class TestUtils {
    * to be set after component initialization.
    */
   // tslint:disable-next-line:variable-name
-  public static generatePageProps(PageElement: new (_: PageProps) => Page<any, any>,
-    location: Location, matchValue: match,
-    historyPushSpy: jest.SpyInstance<unknown> | null, updateBannerSpy: jest.SpyInstance<unknown> | null,
-    updateDialogSpy: jest.SpyInstance<unknown> | null, updateToolbarSpy: jest.SpyInstance<unknown> | null,
-    updateSnackbarSpy: jest.SpyInstance<unknown> | null): PageProps {
+  public static generatePageProps(
+    PageElement: new (_: PageProps) => Page<any, any>,
+    location: Location,
+    matchValue: match,
+    historyPushSpy: jest.SpyInstance<unknown> | null,
+    updateBannerSpy: jest.SpyInstance<unknown> | null,
+    updateDialogSpy: jest.SpyInstance<unknown> | null,
+    updateToolbarSpy: jest.SpyInstance<unknown> | null,
+    updateSnackbarSpy: jest.SpyInstance<unknown> | null,
+  ): PageProps {
     const pageProps = {
       history: { push: historyPushSpy } as any,
       location: location as any,
@@ -88,7 +93,10 @@ export default class TestUtils {
     return pageProps;
   }
 
-  public static getToolbarButton(updateToolbarSpy: jest.SpyInstance<unknown>, buttonKey: string): ToolbarActionConfig {
+  public static getToolbarButton(
+    updateToolbarSpy: jest.SpyInstance<unknown>,
+    buttonKey: string,
+  ): ToolbarActionConfig {
     const lastCallIdx = updateToolbarSpy.mock.calls.length - 1;
     const lastCall = updateToolbarSpy.mock.calls[lastCallIdx][0];
     return lastCall.actions[buttonKey];