fix(sentry): SKFP-1379 sentry and JS errors

kids-first · Jan 2, 2025 · c7824d0 · c7824d0
1 parent 3369273
commit c7824d0
Show file tree

Hide file tree

Showing 18 changed files with 646 additions and 417 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@babel/core": "^7.26.0",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@ferlab/ui": "^10.14.6",
+    "@ferlab/ui": "^10.15.2",
     "@loadable/component": "^5.16.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@react-keycloak/core": "^3.2.0",

diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '@ant-design/icons';
 import Gravatar from '@ferlab/ui/core/components/Gravatar';
 import { useKeycloak } from '@react-keycloak/web';
-import { Dropdown, Menu, PageHeader, Space, Typography } from 'antd';
+import { Dropdown, PageHeader, Space, Typography } from 'antd';
 import { formatProvider } from 'auth/keycloak-api/utils';
 import cx from 'classnames';
 import { getFTEnvVarByKey } from 'helpers/EnvVariables';
@@ -186,52 +186,50 @@ const Header = () => {
           <Dropdown
             key="user-menu"
             trigger={['click']}
-            overlay={
-              <Menu
-                items={[
-                  {
-                    key: 'email',
-                    disabled: true,
-                    label: (
-                      <Space size={4} className={styles.userMenuEmail}>
-                        <Typography.Text>Signed in with</Typography.Text>
-                        <Typography.Text strong>
-                          {tokenParsed.email || formatProvider(tokenParsed.identity_provider)}
-                        </Typography.Text>
-                      </Space>
-                    ),
-                  },
-                  {
-                    type: 'divider',
-                  },
-                  {
-                    key: 'profile_settings',
-                    label: (
-                      <Link to={`/profile/settings`}>
-                        <Space>
-                          <UserOutlined />
-                          {intl.get('layout.user.menu.settings')}
-                        </Space>
-                      </Link>
-                    ),
-                  },
-                  {
-                    key: 'logout',
-                    label: (
+            menu={{
+              items: [
+                {
+                  key: 'email',
+                  disabled: true,
+                  label: (
+                    <Space size={4} className={styles.userMenuEmail}>
+                      <Typography.Text>Signed in with</Typography.Text>
+                      <Typography.Text strong>
+                        {tokenParsed.email || formatProvider(tokenParsed.identity_provider)}
+                      </Typography.Text>
+                    </Space>
+                  ),
+                },
+                {
+                  type: 'divider',
+                },
+                {
+                  key: 'profile_settings',
+                  label: (
+                    <Link to={`/profile/settings`}>
                       <Space>
-                        <LogoutOutlined />
-                        {intl.get('layout.user.menu.logout')}
+                        <UserOutlined />
+                        {intl.get('layout.user.menu.settings')}
                       </Space>
-                    ),
-                    onClick: () => {
-                      trackLogout();
-                      dispatch(userActions.cleanLogout());
-                      window.sessionStorage.clear();
-                    },
+                    </Link>
+                  ),
+                },
+                {
+                  key: 'logout',
+                  label: (
+                    <Space>
+                      <LogoutOutlined />
+                      {intl.get('layout.user.menu.logout')}
+                    </Space>
+                  ),
+                  onClick: () => {
+                    trackLogout();
+                    dispatch(userActions.cleanLogout());
+                    window.sessionStorage.clear();
                   },
-                ]}
-              />
-            }
+                },
+              ],
+            }}
           >
             <a
               className={cx(styles.userMenuTrigger, styles.menuTrigger)}

diff --git a/src/components/PublicLayout/Header/index.tsx b/src/components/PublicLayout/Header/index.tsx
@@ -182,7 +182,7 @@ const Header = () => {
               href=""
             >
               <LaptopOutlined />
-              <span className={style.resources}>Resources</span>
+              <span className={style.resources}>{intl.get('layout.main.menu.resources')}</span>
               <DownOutlined />
             </a>
           </Dropdown>,

diff --git a/src/components/uiKit/reports/DownloadClinicalDataDropdown.tsx b/src/components/uiKit/reports/DownloadClinicalDataDropdown.tsx
@@ -2,7 +2,7 @@ import intl from 'react-intl-universal';
 import { useDispatch } from 'react-redux';
 import { DownloadOutlined } from '@ant-design/icons';
 import { ISqonGroupFilter, ISyntheticSqon } from '@ferlab/ui/core/data/sqon/types';
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown } from 'antd';
 import { INDEXES } from 'graphql/constants';
 import { generateSelectionSqon } from 'views/DataExploration/utils/selectionSqon';
 
@@ -23,37 +23,34 @@ const DownloadClinicalDataDropdown = ({ participantIds, sqon, type = 'default' }
   const getCurrentSqon = (): ISyntheticSqon =>
     sqon || generateSelectionSqon(INDEXES.PARTICIPANT, participantIds);
 
-  const menu = (
-    <Menu
-      onClick={(e) =>
-        dispatch(
-          fetchReport({
-            data: {
-              sqon: getCurrentSqon(),
-              name: ReportType.CLINICAL_DATA,
-              withFamily: e.key === CLINICAL_DATA_WITH_FAMILY,
-            },
-          }),
-        )
-      }
-      items={[
-        {
-          key: ReportType.CLINICAL_DATA,
-          label: intl.get('api.report.clinicalData.participant', { count: participantIds.length }),
-        },
-        {
-          key: CLINICAL_DATA_WITH_FAMILY,
-          label: intl.get('api.report.clinicalData.family', { count: participantIds.length }),
-        },
-      ]}
-    />
-  );
+  const menu = {
+    onClick: (e: any) =>
+      dispatch(
+        fetchReport({
+          data: {
+            sqon: getCurrentSqon(),
+            name: ReportType.CLINICAL_DATA,
+            withFamily: e.key === CLINICAL_DATA_WITH_FAMILY,
+          },
+        }),
+      ),
+    items: [
+      {
+        key: ReportType.CLINICAL_DATA,
+        label: intl.get('api.report.clinicalData.participant', { count: participantIds.length }),
+      },
+      {
+        key: CLINICAL_DATA_WITH_FAMILY,
+        label: intl.get('api.report.clinicalData.family', { count: participantIds.length }),
+      },
+    ],
+  };
 
   return (
     <Dropdown
       key="actionDropdown"
       disabled={participantIds.length === 0}
-      overlay={menu}
+      menu={menu}
       placement="bottomLeft"
     >
       <Button type={type} icon={<DownloadOutlined />}>

diff --git a/src/components/uiKit/reports/DownloadFileManifestModal/index.tsx b/src/components/uiKit/reports/DownloadFileManifestModal/index.tsx
@@ -49,7 +49,7 @@ const DownloadFileManifestModal = ({
         </Button>
       </Tooltip>
       <Modal
-        visible={isModalVisible}
+        open={isModalVisible}
         title={intl.get('api.report.fileManifest.title')}
         okText={intl.get('api.report.fileManifest.okText')}
         okButtonProps={{ disabled: hasTooManyFiles }}

diff --git a/src/components/uiKit/reports/DownloadRequestAccessModal/index.tsx b/src/components/uiKit/reports/DownloadRequestAccessModal/index.tsx
@@ -50,7 +50,7 @@ const DownloadRequestAccessModal = ({
         {intl.get('api.report.requestAccess.button')}
       </Button>
       <Modal
-        visible={isModalVisible}
+        open={isModalVisible}
         title={intl.get('api.report.requestAccess.title')}
         okText={intl.get('api.report.requestAccess.okText')}
         okButtonProps={{ disabled: hasTooManyFiles }}

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -504,6 +504,7 @@ const en = {
         explore: 'Data Exploration',
         help: 'Help',
         participants: 'Participants',
+        resources: 'Resources',
         studies: 'Studies',
         variants: 'Variants',
         website: 'Website',

diff --git a/src/views/Dashboard/components/DashboardCards/SavedFilters/EditModal/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedFilters/EditModal/index.tsx
@@ -26,7 +26,7 @@ const EditModal = ({ visible = false, onCancel, filter }: OwnProps) => {
         onCancel();
         editForm.resetFields();
       }}
-      visible={visible}
+      open={visible}
       onOk={() => editForm.submit()}
       okText={intl.get('components.querybuilder.header.modal.edit.okText')}
     >

diff --git a/src/views/Dashboard/components/DashboardCards/SavedFilters/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedFilters/index.tsx
@@ -20,7 +20,6 @@ import SavedFiltersListItem from './ListItem';
 import styles from './index.module.css';
 
 const { Text } = Typography;
-const { TabPane } = Tabs;
 
 type SavedFilterListWrapperOwnprops = {
   tag: SavedFilterTag;
@@ -112,51 +111,53 @@ const SavedFilters = ({ id, key, className = '' }: DashboardCardProps) => {
         <Tabs
           className={cx(styles.setTabs, 'navNoMarginBtm')}
           defaultActiveKey={SavedFilterTag.ParticipantsExplorationPage}
-        >
-          <TabPane
-            key={SavedFilterTag.ParticipantsExplorationPage}
-            tab={
-              <div>
-                <FileSearchOutlined />
-                Data Exploration (
-                {
-                  savedFilters.filter((s) => s.tag === SavedFilterTag.ParticipantsExplorationPage)
-                    .length
-                }
-                )
-              </div>
-            }
-          >
-            <SavedFilterListWrapper
-              tag={SavedFilterTag.ParticipantsExplorationPage}
-              savedFilters={savedFilters}
-              fetchingError={fetchingError}
-              isLoading={isLoading}
-            />
-          </TabPane>
-
-          <TabPane
-            key={SavedFilterTag.VariantsExplorationPage}
-            tab={
-              <div>
-                <LineStyleIcon height={14} width={14} />
-                Variants (
-                {
-                  savedFilters.filter((s) => s.tag === SavedFilterTag.VariantsExplorationPage)
-                    .length
-                }
-                )
-              </div>
-            }
-          >
-            <SavedFilterListWrapper
-              tag={SavedFilterTag.VariantsExplorationPage}
-              savedFilters={savedFilters}
-              fetchingError={fetchingError}
-              isLoading={isLoading}
-            />
-          </TabPane>
-        </Tabs>
+          items={[
+            {
+              key: SavedFilterTag.ParticipantsExplorationPage,
+              label: (
+                <div>
+                  <FileSearchOutlined />
+                  Data Exploration (
+                  {
+                    savedFilters.filter((s) => s.tag === SavedFilterTag.ParticipantsExplorationPage)
+                      .length
+                  }
+                  )
+                </div>
+              ),
+              children: (
+                <SavedFilterListWrapper
+                  tag={SavedFilterTag.ParticipantsExplorationPage}
+                  savedFilters={savedFilters}
+                  fetchingError={fetchingError}
+                  isLoading={isLoading}
+                />
+              ),
+            },
+            {
+              key: SavedFilterTag.VariantsExplorationPage,
+              label: (
+                <div>
+                  <LineStyleIcon height={14} width={14} />
+                  Variants (
+                  {
+                    savedFilters.filter((s) => s.tag === SavedFilterTag.VariantsExplorationPage)
+                      .length
+                  }
+                  )
+                </div>
+              ),
+              children: (
+                <SavedFilterListWrapper
+                  tag={SavedFilterTag.VariantsExplorationPage}
+                  savedFilters={savedFilters}
+                  fetchingError={fetchingError}
+                  isLoading={isLoading}
+                />
+              ),
+            },
+          ]}
+        />
       }
     />
   );

diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/CreateEditModal/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedSets/CreateEditModal/index.tsx
@@ -150,6 +150,7 @@ const CreateEditModal = ({
       okButtonProps={{ disabled: isLoading, loading: isLoading || isUpdating }}
       okText="Save"
       destroyOnClose
+      forceRender
     >
       <Form
         form={form}