feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Live mockup

workspaces/frontend/.prettierignore

@@ -0,0 +1 @@
+package.json

workspaces/frontend/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

workspaces/frontend/config/stylePaths.js

@@ -7,9 +7,21 @@ module.exports = {
     path.resolve(relativeDir, 'node_modules/@patternfly/patternfly'),
     path.resolve(relativeDir, 'node_modules/@patternfly/react-styles/css'),
     path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
-    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
-    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
-    path.resolve(relativeDir, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
-    path.resolve(relativeDir, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
-  ]
+    path.resolve(
+      relativeDir,
+      'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly',
+    ),
+    path.resolve(
+      relativeDir,
+      'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css',
+    ),
+    path.resolve(
+      relativeDir,
+      'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css',
+    ),
+    path.resolve(
+      relativeDir,
+      'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css',
+    ),
+  ],
 };

workspaces/frontend/config/webpack.common.js

@@ -19,10 +19,10 @@ module.exports = (env) => {
               loader: 'ts-loader',
               options: {
                 transpileOnly: true,
-                experimentalWatchApi: true
-              }
-            }
-          ]
+                experimentalWatchApi: true,
+              },
+            },
+          ],
         },
         {
           test: /\.(svg|ttf|eot|woff|woff2)$/,
@@ -31,10 +31,16 @@ module.exports = (env) => {
           // if they live under a 'fonts' or 'pficon' directory
           include: [
             path.resolve(relativeDir, 'node_modules/patternfly/dist/fonts'),
-            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
-            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
+            path.resolve(
+              relativeDir,
+              'node_modules/@patternfly/react-core/dist/styles/assets/fonts',
+            ),
+            path.resolve(
+              relativeDir,
+              'node_modules/@patternfly/react-core/dist/styles/assets/pficon',
+            ),
             path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/fonts'),
-            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/pficon')
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/pficon'),
           ],
           use: {
             loader: 'file-loader',
@@ -93,30 +99,33 @@ module.exports = (env) => {
             path.resolve(relativeDir, 'node_modules/patternfly'),
             path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/images'),
             path.resolve(relativeDir, 'node_modules/@patternfly/react-styles/css/assets/images'),
-            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
             path.resolve(
               relativeDir,
-              'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
+              'node_modules/@patternfly/react-core/dist/styles/assets/images',
             ),
             path.resolve(
               relativeDir,
-              'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
+              'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images',
             ),
             path.resolve(
               relativeDir,
-              'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
-            )
+              'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images',
+            ),
+            path.resolve(
+              relativeDir,
+              'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images',
+            ),
           ],
           type: 'asset/inline',
           use: [
             {
               options: {
                 limit: 5000,
                 outputPath: 'images',
-                name: '[name].[ext]'
-              }
-            }
-          ]
+                name: '[name].[ext]',
+              },
+            },
+          ],
         },
         {
           test: /\.s[ac]ss$/i,
@@ -128,35 +137,35 @@ module.exports = (env) => {
             // Compiles Sass to CSS
             'sass-loader',
           ],
-        }
-      ]
+        },
+      ],
     },
     output: {
       filename: '[name].bundle.js',
       path: path.resolve(relativeDir, 'dist'),
-      publicPath: ASSET_PATH
+      publicPath: ASSET_PATH,
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.resolve(relativeDir, 'src', 'index.html')
+        template: path.resolve(relativeDir, 'src', 'index.html'),
       }),
       new Dotenv({
         systemvars: true,
-        silent: true
+        silent: true,
       }),
       new CopyPlugin({
-        patterns: [{ from: './src/images', to: 'images' }]
-      })
+        patterns: [{ from: './src/images', to: 'images' }],
+      }),
     ],
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],
       plugins: [
         new TsconfigPathsPlugin({
-          configFile: path.resolve(relativeDir, './tsconfig.json')
-        })
+          configFile: path.resolve(relativeDir, './tsconfig.json'),
+        }),
       ],
       symlinks: false,
-      cacheWithContext: false
-    }
+      cacheWithContext: false,
+    },
   };
-};
+};

workspaces/frontend/config/webpack.dev.js

@@ -26,7 +26,7 @@ module.exports = merge(common('development'), {
     },
     proxy: [
       {
-        context: ["/api"],
+        context: ['/api'],
         target: {
           host: PROXY_HOST,
           protocol: PROXY_PROTOCOL,

workspaces/frontend/config/webpack.prod.js

@@ -15,24 +15,24 @@ module.exports = merge(common('production'), {
       new TerserJSPlugin({}),
       new CssMinimizerPlugin({
         minimizerOptions: {
-          preset: ['default', { mergeLonghand: false }]
-        }
-      })
-    ]
+          preset: ['default', { mergeLonghand: false }],
+        },
+      }),
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
       filename: '[name].css',
-      chunkFilename: '[name].bundle.css'
-    })
+      chunkFilename: '[name].bundle.css',
+    }),
   ],
   module: {
     rules: [
       {
         test: /\.css$/,
         include: [...stylePaths],
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
-      }
-    ]
-  }
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
 });

workspaces/frontend/jest.config.js

@@ -12,21 +12,19 @@ module.exports = {
   coverageDirectory: 'coverage',
 
   // An array of directory names to be searched recursively up from the requiring module's location
-  moduleDirectories: [
-    'node_modules',
-    '<rootDir>/src'
-  ],
+  moduleDirectories: ['node_modules', '<rootDir>/src'],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
-    '@app/(.*)': '<rootDir>/src/app/$1'
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '@app/(.*)': '<rootDir>/src/app/$1',
   },
 
   // A preset that is used as a base for Jest's configuration
   preset: 'ts-jest/presets/js-with-ts',
 
   // The test environment that will be used for testing.
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
 };