merge main

.gitignore

@@ -112,9 +112,10 @@ venv.bak/
 
 # vscode
 .vscode/*
-!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
 !.vscode/extensions.json
-!.vscode/portal-ui.code-snippets
+!.vscode/default.settings.json
 
 # public
 context/app/static/public

.vscode/default.settings.json

@@ -0,0 +1,14 @@
+{
+  "eslint.workingDirectories": ["./context"],
+  "eslint.format.enable": true,
+  "[javascript,javascriptreact,typescript,typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.autopep8"
+  },
+  "python.formatting.provider": "autopep8",
+  "optional": {
+    "editor.formatOnSave": true
+  }
+}

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
-    "recommendations": [
-      "dbaeumer.vscode-eslint", 
-      "esbenp.prettier-vscode"
-    ]
-  }
-
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "ms-python.autopep8"
+  ]
+}

context/.eslintrc.yml

@@ -1,36 +1,100 @@
 extends:
-  - react-app
   - eslint:recommended
   - plugin:react/recommended
   - airbnb
-  - plugin:jest-dom/recommended
-  - plugin:testing-library/recommended
+  - airbnb/hooks
+  - prettier
+  - plugin:@typescript-eslint/recommended
   - plugin:prettier/recommended
-  - prettier/react
   - plugin:import/errors
   - plugin:import/warnings
-parser: "babel-eslint"
+parser: '@typescript-eslint/parser'
 globals:
   CDN_URL: readonly
+  flaskData: readonly
+  groupsToken: readonly
+  isAuthenticated: readonly
+  userEmail: readonly
+  workspacesToken: readonly
+  userGroups: readonly
+env:
+  browser: true
+  node: true
 plugins:
   - react
+  - '@typescript-eslint'
+  - prettier
+  - import
 settings:
   react:
     version: detect
   import/resolver:
     webpack:
       config: './build-utils/webpack.common.js'
 rules:
-  camelcase: [0]  # Preserving original name will make searching across codebase easier.
-  no-console: ["error", { allow: ["warn", "error"] }]
-  react/jsx-filename-extension: [0]  # Imports don't work if I change extension.
-  react/sort-comp: [0]  # Non-alphabetical groupings can make more sense.
-  react/jsx-one-expression-per-line: [0]  # Makes punctuation after tab awkward.
+  camelcase: [0] # Preserving original name will make searching across codebase easier.
+  no-console: ['error', { allow: ['warn', 'error'] }]
+  react/jsx-filename-extension: [0] # Imports don"t work if I change extension.
+  import/extensions: [0] # Same as above; we can eventually remove these rules to convert to ESM
+  react/sort-comp: [0] # Non-alphabetical groupings can make more sense.
+  react/jsx-one-expression-per-line: [0] # Makes punctuation after tab awkward.
   react/prop-types: [0]
-  import/prefer-default-export: [0]  # Hit eslint error: SyntaxError: Unexpected token, expected {
-  react/jsx-props-no-spreading: [0]
+  react/forbid-prop-types: [0]
+  import/prefer-default-export: [0] # Hit eslint error: SyntaxError: Unexpected token, expected {
+  react/jsx-props-no-spreading: [0] # common pattern, but with TypeScript it"s pretty safe
   jsx-a11y/label-has-associated-control:
     - 2
     - controlComponents:
-      - Switch
-  import/no-extraneous-dependencies: ["error", {"devDependencies": ["**/*.spec.js", "**/*.stories.js"]}]
+        - Switch
+  react/jsx-no-bind: [0] # We can revisit this later if we detect performance issues from unstable functions
+  '@typescript-eslint/no-unused-vars':
+    - 2 # Error on unmarked unused variables
+    - argsIgnorePattern: '^_' # Allow unused variables that start with _
+      ignoreRestSiblings: true # Allow unused variables when using destructuring to remove keys from an object
+
+overrides:
+  - files: ['**/*.spec.{js,jsx,ts,tsx}']
+    plugins:
+      - jest
+    extends:
+      - plugin:jest/recommended
+      - plugin:jest-dom/recommended
+      - plugin:testing-library/react
+    settings:
+      'import/resolver':
+        jest:
+          jestConfigFile: ./jest.config.js
+    env:
+      jest: true
+      jest/globals: true
+    rules:
+      import/no-extraneous-dependencies: [0]
+      '@typescript-eslint/no-var-requires': [0] # allow use of require in jest tests
+      jest/expect-expect: ['error', { 'assertFunctionNames': ['expect*'] }] # allow expect calls to be contained within helper functions that start with expect
+      '@typescript-eslint/no-empty-function': [0] # allow empty function placeholders in jest tests
+  - files: ['**/*.stories.{js,jsx,ts,tsx}']
+    extends:
+      - plugin:storybook/recommended
+    rules:
+      import/no-extraneous-dependencies: [0]
+      '@typescript-eslint/no-empty-function': [0] # allow empty function placeholders in stories
+      storybook/no-redundant-story-name: [0] # Some are needed for single story hoisting for multi word component names per comments - may need to be revisited/retested for the highlighted cases
+  - files: ['**/*.cy.{js,jsx,ts,tsx}']
+    plugins:
+      - cypress
+    extends:
+      - plugin:cypress/recommended
+    env:
+      cypress/globals: true
+    rules:
+      import/no-extraneous-dependencies: [0]
+  - files: ['**/build-utils/*.js']
+    rules:
+      '@typescript-eslint/no-var-requires': [0] # allow use of require
+      import/no-extraneous-dependencies: [0] # Allow devDependencies in webpack config
+  - files: ['**/__tests__/**/*.{js,jsx,ts,tsx}'] # Allow the "test" global in test fixtures
+    globals:
+      test: readonly
+    rules:
+      import/no-extraneous-dependencies: [0] # Allow devDependencies in test fixtures
+      '@typescript-eslint/no-empty-function': [0] # allow empty function placeholders in test fixtures

context/.prettierrc.yml

@@ -2,3 +2,5 @@ semi: true
 trailingComma: "all"
 singleQuote: true
 printWidth: 120
+tabWidth: 2
+endOfLine: "lf"

context/.swcrc

@@ -1,8 +1,8 @@
 {
     "jsc": {
         "parser": {
-            "syntax": "ecmascript",
-            "jsx": true,
+            "syntax": "typescript",
+            "tsx": true,
             "numericSeparator": false,
             "classPrivateProperty": false,
             "privateMethod": false,
@@ -11,6 +11,7 @@
             "decorators": false,
             "decoratorsBeforeExport": false
         },
+        "externalHelpers": true,
         "target": "es2019",
         "loose": false,
         "experimental": {

context/Dockerfile

@@ -13,7 +13,7 @@ COPY .npmrc .
 
 RUN npm ci
 
-COPY .babelrc .babelrc
+COPY tsconfig.json tsconfig.json
 COPY .swcrc .swcrc
 COPY build-utils build-utils
 COPY app app

context/app/markdown/CHANGELOG.md

@@ -1,3 +1,16 @@
+## v0.74.0 - 2023-07-06
+
+- Add messaging for fair data principles to homepage, vitessce, and the dataset file browser.
+- Fixed homepage Vitessce demonstration link.
+- Fix flask data context destructuring to restore provenance features.
+- Update workspaces landing page messaging to instruct users without membership in the workspaces Globus group to request access.
+- Adjusted publication header to appear on one line only.
+- Fixed changelog file format.
+- Update project ESLint configuration and dependencies.
+- Remove Babel.
+- Introduce TypeScript.
+
+
 ## v0.73.1 - 2023-06-28
 
 - Adjust page-wide error boundary to prevent error messages from overflowing

context/app/markdown/dependencies.md

@@ -38,7 +38,6 @@ lxml>=4.9.1
 
 ```
 {
-"@babel/runtime": "^7.10.4",
 "@datapunt/matomo-tracker-js": "^0.5.1",
 "@elastic/datemath": "^5.0.3",
 "@elastic/eui": "^57.0.0",
@@ -63,6 +62,7 @@ lxml>=4.9.1
 "@visx/tooltip": "^1.7.2",
 "ajv": "^6.12.3",
 "bowser": "^2.11.0",
+"buffer": "^6.0.3",
 "chart.js": "^3.5.0",
 "d3": "^5.16.0",
 "d3-array": "^3.0.2",

context/app/static/js/components/Header/Dropdown/Dropdown.jsx

@@ -9,13 +9,13 @@ import MenuList from '@material-ui/core/MenuList';
 
 import { OffsetPopper } from './style';
 
-function Dropdown({ title, children, menuListId }) {
+function Dropdown({ title, children, menuListId, ...rest }) {
   const [open, toggle] = useReducer((v) => !v, false);
   const anchorRef = useRef(null);
 
   return (
     <>
-      <Button ref={anchorRef} onClick={toggle} style={{ color: 'white' }}>
+      <Button ref={anchorRef} onClick={toggle} style={{ color: 'white' }} {...rest}>
         {title}
         {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
       </Button>

context/app/static/js/components/Header/UserLinks/UserLinks.jsx

@@ -11,14 +11,19 @@ function UserLinks({ isAuthenticated, userEmail }) {
   const { isWorkspacesUser } = useAppContext();
 
   return (
-    <Dropdown title={<TruncatedSpan>{isAuthenticated ? userEmail || 'User' : 'User Profile'}</TruncatedSpan>}>
+    <Dropdown
+      title={<TruncatedSpan>{isAuthenticated ? userEmail || 'User' : 'User Profile'}</TruncatedSpan>}
+      data-testid="user-profile-dropdown"
+    >
       <DropdownLink href="/my-lists">My Lists</DropdownLink>
       {isWorkspacesUser && <DropdownLink href="/workspaces">My Workspaces</DropdownLink>}
       <StyledDivider />
       {isAuthenticated ? (
         <WarningDropdownLink href="/logout">Log Out</WarningDropdownLink>
       ) : (
-        <DropdownLink href="/login">Log In</DropdownLink>
+        <DropdownLink href="/login" data-testid="login-link">
+          Log In
+        </DropdownLink>
       )}
     </Dropdown>
   );

context/app/static/js/components/Header/UserLinks/UserLinks.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 import { fireEvent } from '@testing-library/react';
@@ -12,7 +11,7 @@ test('should be "User Profile" when not authenticated', () => {
   // In drop-down:
   expect(screen.getByText('My Lists')).toBeInTheDocument();
   expect(screen.getByText('Log In')).toBeInTheDocument();
-  expect(screen.queryByText('Log Out')).toBeNull();
+  expect(screen.queryByText('Log Out')).not.toBeInTheDocument();
 });
 
 test('should be logout button when authenticated', () => {
@@ -22,7 +21,7 @@ test('should be logout button when authenticated', () => {
   // In drop-down:
   expect(screen.getByText('My Lists')).toBeInTheDocument();
   expect(screen.getByText('Log Out')).toBeInTheDocument();
-  expect(screen.queryByText('Log In')).toBeNull();
+  expect(screen.queryByText('Log In')).not.toBeInTheDocument();
 });
 
 test('should display User when userEmail is empty', () => {

context/app/static/js/components/Providers.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FlaskDataContext, AppContext } from 'js/components/Contexts';
 import { ThemeProvider } from 'styled-components';
 import PropTypes from 'prop-types';
@@ -23,15 +23,25 @@ function Providers({
   isWorkspacesUser,
   flaskData,
 }) {
-  // injectFirst ensures styled-components takes priority over mui for styling
+  const appContext = useMemo(
+    () => ({
+      groupsToken,
+      workspacesToken,
+      isWorkspacesUser,
+      isAuthenticated,
+      userEmail,
+      ...endpoints,
+    }),
+    [groupsToken, workspacesToken, isWorkspacesUser, isAuthenticated, userEmail, endpoints],
+  );
+
   return (
+    // injectFirst ensures styled-components takes priority over mui for styling
     <StylesProvider generateClassName={generateClassName} injectFirst>
       <GlobalFonts />
       <MuiThemeProvider theme={theme}>
         <ThemeProvider theme={theme}>
-          <AppContext.Provider
-            value={{ groupsToken, workspacesToken, isWorkspacesUser, isAuthenticated, userEmail, ...endpoints }}
-          >
+          <AppContext.Provider value={appContext}>
             <FlaskDataContext.Provider value={flaskData}>
               <CssBaseline />
               <GlobalStyles />

context/app/static/js/components/cells/DatasetClusterChart/utils.spec.js

@@ -9,7 +9,7 @@ test.each([
   expect(removeUUIDFromOption(option, 'UUID')).toEqual(expected);
 });
 
-test('should ', () => {
+test('should', () => {
   expect(getOptionLabels(['123-UUID-xyz', 'abc-456-UUID'], 'UUID')).toStrictEqual({
     '123-UUID-xyz': '123-xyz',
     'abc-456-UUID': 'abc-456',

context/app/static/js/components/cells/DatasetClusterTooltip/DatasetClusterTooltip.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 

context/app/static/js/components/cells/tutorial/CellsTutorial/CellsTutorial.jsx

@@ -63,6 +63,12 @@ function CellsTutorial({ setParametersButtonRef, runQueryButtonRef }) {
       setOpenStepIndex(1);
     }
   };
+  const {
+    palette: {
+      info: { dark: arrowColor },
+    },
+    zIndex: { tutorial: zIndex },
+  } = themeContext;
 
   return (
     <>
@@ -84,8 +90,8 @@ function CellsTutorial({ setParametersButtonRef, runQueryButtonRef }) {
         tooltipComponent={TutorialTooltip}
         styles={{
           options: {
-            arrowColor: themeContext.palette.info.dark,
-            zIndex: themeContext.zIndex.tutorial,
+            arrowColor,
+            zIndex,
             overlayColor: 'rgba(0, 0, 0, 0)',
           },
         }}