From fe723a40d37fa0c2e1bf77c6828b4da0998821b1 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Mon, 20 Jan 2025 14:26:10 -0700 Subject: [PATCH] on change update for segments --- web/.cursorrules | 4 + web/package-lock.json | 129 +++++++++--------- web/package.json | 12 +- .../permissions/PermissionAppSegments.tsx | 21 ++- 4 files changed, 89 insertions(+), 77 deletions(-) diff --git a/web/.cursorrules b/web/.cursorrules index 8b5dd2db9..2b7663e87 100644 --- a/web/.cursorrules +++ b/web/.cursorrules @@ -13,3 +13,7 @@ You are a TypeScript expert with deep knowledge of the language's features and b - If newly defined element has a border, it should be 0.5px - Use React.memo() for performance optimization when appropriate - Prefer async/await over .then() for asynchronous operations + + +## ADDITIONAL PARAMS +- If we need to use useRouter, if needs to be from next/navigation \ No newline at end of file diff --git a/web/package-lock.json b/web/package-lock.json index f48d98d71..fa6cf2944 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -20,8 +20,8 @@ "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/auth-helpers-react": "^0.5.0", "@supabase/ssr": "^0.5.2", - "@supabase/supabase-js": "^2.47.16", - "@tanstack/react-query": "^5.64.1", + "@supabase/supabase-js": "^2.48.0", + "@tanstack/react-query": "^5.64.2", "@vercel/speed-insights": "^1.1.0", "ahooks": "^3.8.4", "antd": "5.23.0", @@ -51,7 +51,7 @@ "echarts-stat": "^1.2.0", "email-validator": "^2.0.4", "font-color-contrast": "^11.1.0", - "framer-motion": "^11.18.1", + "framer-motion": "^12.0.0", "html2canvas": "^1.4.1", "immer": "^10.1.1", "js-cookie": "^3.0.5", @@ -97,13 +97,13 @@ }, "devDependencies": { "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^14.3.1", - "@testing-library/user-event": "^14.5.1", + "@testing-library/react": "^16.2.0", + "@testing-library/user-event": "^14.6.0", "@types/canvas-confetti": "^1.9.0", "@types/jest": "^29.5.14", "@types/js-cookie": "^3.0.6", "@types/lodash-es": "^4.17.12", - "@types/node": "^20.17.14", + "@types/node": "^20", "@types/papaparse": "^5.3.15", "@types/pluralize": "^0.0.33", "@types/prettier": "^3.0.0", @@ -117,7 +117,7 @@ "eslint": "^8", "eslint-config-next": "14.2.3", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.2.2", + "eslint-plugin-prettier": "^5.2.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "monaco-editor-webpack-plugin": "^7.1.0", @@ -3751,9 +3751,9 @@ } }, "node_modules/@supabase/postgrest-js": { - "version": "1.17.11", - "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.17.11.tgz", - "integrity": "sha512-AOqqgQEhLVqzOMmA8Q0bxQFMfbozbjjQ1Tt4kprkstIKdRl4yZRaMdoVxFkCpU8ivmAe2xNfAVkNK+l16a9P0A==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.18.0.tgz", + "integrity": "sha512-DqUEVF5ZFytrYLAuywnUR0srhZbzSoLZePMfGFamYMNdMttBLwAWXJNJ5kBDHn2gK2n87NwLsIshUbdyxPtpsw==", "license": "MIT", "dependencies": { "@supabase/node-fetch": "^2.6.14" @@ -3803,15 +3803,15 @@ } }, "node_modules/@supabase/supabase-js": { - "version": "2.47.16", - "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.47.16.tgz", - "integrity": "sha512-FnoV0miLnYUL8ZTS94tSIyn+ogCwh5DB5f1fj1n4wHGNAqJSKFb8OQzLVlRFAH7cB9TKQ5eon3/n2lXUWY7GfA==", + "version": "2.48.0", + "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.48.0.tgz", + "integrity": "sha512-8ql5ra3NOIHLBYoFZpxYHRx05J/FmJAQW9EYax0lU4DsU1/5PC4yb2hxMcCIf0oimLcBgsogIaAqba+/9jaUVg==", "license": "MIT", "dependencies": { "@supabase/auth-js": "2.67.3", "@supabase/functions-js": "2.4.4", "@supabase/node-fetch": "2.6.15", - "@supabase/postgrest-js": "1.17.11", + "@supabase/postgrest-js": "1.18.0", "@supabase/realtime-js": "2.11.2", "@supabase/storage-js": "2.7.1" } @@ -3831,9 +3831,9 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.64.1", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.64.1.tgz", - "integrity": "sha512-978Wx4Wl4UJZbmvU/rkaM9cQtXXrbhK0lsz/UZhYIbyKYA8E4LdomTwyh2GHZ4oU0BKKoDH4YlKk2VscCUgNmg==", + "version": "5.64.2", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.64.2.tgz", + "integrity": "sha512-hdO8SZpWXoADNTWXV9We8CwTkXU88OVWRBcsiFrk7xJQnhm6WRlweDzMD+uH+GnuieTBVSML6xFa17C2cNV8+g==", "license": "MIT", "funding": { "type": "github", @@ -3841,12 +3841,12 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.64.1", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.64.1.tgz", - "integrity": "sha512-vW5ggHpIO2Yjj44b4sB+Fd3cdnlMJppXRBJkEHvld6FXh3j5dwWJoQo7mGtKI2RbSFyiyu/PhGAy0+Vv5ev9Eg==", + "version": "5.64.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.64.2.tgz", + "integrity": "sha512-3pakNscZNm8KJkxmovvtZ4RaXLyiYYobwleTMvpIGUoKRa8j8VlrQKNl5W8VUEfVfZKkikvXVddLuWMbcSCA1Q==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.64.1" + "@tanstack/query-core": "5.64.2" }, "funding": { "type": "github", @@ -3931,42 +3931,31 @@ "license": "MIT" }, "node_modules/@testing-library/react": { - "version": "14.3.1", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.1.tgz", - "integrity": "sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.2.0.tgz", + "integrity": "sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^9.0.0", - "@types/react-dom": "^18.0.0" + "@babel/runtime": "^7.12.5" }, "engines": { - "node": ">=14" + "node": ">=18" }, "peerDependencies": { - "react": "^18.0.0", - "react-dom": "^18.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/@testing-library/dom": { - "version": "9.3.4", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", - "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0 || ^19.0.0", + "@types/react-dom": "^18.0.0 || ^19.0.0", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" }, - "engines": { - "node": ">=14" + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } } }, "node_modules/@testing-library/user-event": { @@ -4004,7 +3993,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -7551,7 +7541,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dom-to-image": { "version": "2.6.0", @@ -8461,9 +8452,9 @@ } }, "node_modules/eslint-plugin-prettier": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.2.tgz", - "integrity": "sha512-1yI3/hf35wmlq66C8yOyrujQnel+v5l1Vop5Cl2I6ylyNTT1JbuUUnV3/41PzwTzcyDp/oF0jWE3HXvcH5AQOQ==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.3.tgz", + "integrity": "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==", "dev": true, "license": "MIT", "dependencies": { @@ -9201,13 +9192,13 @@ } }, "node_modules/framer-motion": { - "version": "11.18.1", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.1.tgz", - "integrity": "sha512-EQa8c9lWVOm4zlz14MsBJWr8woq87HsNmsBnQNvcS0hs8uzw6HtGAxZyIU7EGTVpHD1C1n01ufxRyarXcNzpPg==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.0.tgz", + "integrity": "sha512-S3V6UlZUa6km3TWJS5wH5hJs0RBgvLo2MYWINA2RwG+T/xGGKweJwEn38AtlDCjq9k70QFk7Op67jm8TAOb4qQ==", "license": "MIT", "dependencies": { - "motion-dom": "^11.18.1", - "motion-utils": "^11.18.1", + "motion-dom": "^12.0.0", + "motion-utils": "^12.0.0", "tslib": "^2.4.0" }, "peerDependencies": { @@ -12578,6 +12569,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -13678,18 +13670,18 @@ } }, "node_modules/motion-dom": { - "version": "11.18.1", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz", - "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz", + "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==", "license": "MIT", "dependencies": { - "motion-utils": "^11.18.1" + "motion-utils": "^12.0.0" } }, "node_modules/motion-utils": { - "version": "11.18.1", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz", - "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", "license": "MIT" }, "node_modules/mri": { @@ -14824,6 +14816,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -14839,6 +14832,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -14851,7 +14845,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/pretty-ms": { "version": "8.0.0", diff --git a/web/package.json b/web/package.json index 245297d27..c18efdb00 100644 --- a/web/package.json +++ b/web/package.json @@ -27,8 +27,8 @@ "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/auth-helpers-react": "^0.5.0", "@supabase/ssr": "^0.5.2", - "@supabase/supabase-js": "^2.47.16", - "@tanstack/react-query": "^5.64.1", + "@supabase/supabase-js": "^2.48.0", + "@tanstack/react-query": "^5.64.2", "@vercel/speed-insights": "^1.1.0", "ahooks": "^3.8.4", "antd": "5.23.0", @@ -58,7 +58,7 @@ "echarts-stat": "^1.2.0", "email-validator": "^2.0.4", "font-color-contrast": "^11.1.0", - "framer-motion": "^11.18.1", + "framer-motion": "^12.0.0", "html2canvas": "^1.4.1", "immer": "^10.1.1", "js-cookie": "^3.0.5", @@ -104,8 +104,8 @@ }, "devDependencies": { "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^14.3.1", - "@testing-library/user-event": "^14.5.1", + "@testing-library/react": "^16.2.0", + "@testing-library/user-event": "^14.6.0", "@types/canvas-confetti": "^1.9.0", "@types/jest": "^29.5.14", "@types/js-cookie": "^3.0.6", @@ -124,7 +124,7 @@ "eslint": "^8", "eslint-config-next": "14.2.3", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.2.2", + "eslint-plugin-prettier": "^5.2.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "monaco-editor-webpack-plugin": "^7.1.0", diff --git a/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx b/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx index 518d589b5..78e3c3292 100644 --- a/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx +++ b/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { AppSegmented } from '@/components'; import { PermissionApps } from './config'; import { useMemoizedFn, useMount, useSet } from 'ahooks'; @@ -13,12 +13,15 @@ import { } from '@/api/buster-rest'; import Link from 'next/link'; import { BusterRoutes, createBusterRoute } from '@/routes'; +import { useRouter } from 'next/navigation'; export const PermissionAppSegments: React.FC<{ datasetId: string; selectedApp: PermissionApps; }> = React.memo(({ datasetId, selectedApp }) => { const [prefetchedRoutes, setPrefetchedRoutes] = useSet(); + const router = useRouter(); + const ref = useRef(null); useDatasetListDatasetGroups(prefetchedRoutes.has(PermissionApps.DATASET_GROUPS) ? datasetId : ''); useDatasetListPermissionUsers(prefetchedRoutes.has(PermissionApps.USERS) ? datasetId : ''); @@ -72,9 +75,19 @@ export const PermissionAppSegments: React.FC<{ [] ); + const onChange = useMemoizedFn((value: SegmentedValue) => { + if (typeof value === 'string') { + const linkRef = ref.current?.querySelector(`a[data-value="${value}"]`); + const href = linkRef?.getAttribute('href'); + if (href) { + router.push(href); + } + } + }); + return ( -
- +
+
); @@ -95,7 +108,7 @@ const PrefetchRouteSegmentItem = React.memo( onHover: (route: PermissionApps) => void; }) => { return ( - + onHover(value)}> {label}