From 6003ee3b7f66902c79e52c0593d8984d1cbe8b42 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Mon, 21 Oct 2024 10:48:50 -0700 Subject: [PATCH 1/6] project storage in progress --- .../src/synapse-client/SynapseClient.ts | 31 +++++++++++++++++++ .../src/synapse-queries/KeyFactory.ts | 4 +++ .../src/synapse-queries/entity/index.ts | 1 + .../entity/useProjectStorage.ts | 19 ++++++++++++ .../src/utils/APIConstants.ts | 5 +++ packages/synapse-types/src/ProjectStorage.ts | 17 ++++++++++ packages/synapse-types/src/index.ts | 1 + 7 files changed, 78 insertions(+) create mode 100644 packages/synapse-react-client/src/synapse-queries/entity/useProjectStorage.ts create mode 100644 packages/synapse-types/src/ProjectStorage.ts diff --git a/packages/synapse-react-client/src/synapse-client/SynapseClient.ts b/packages/synapse-react-client/src/synapse-client/SynapseClient.ts index acfec280ab..371aed706d 100644 --- a/packages/synapse-react-client/src/synapse-client/SynapseClient.ts +++ b/packages/synapse-react-client/src/synapse-client/SynapseClient.ts @@ -98,6 +98,8 @@ import { WIKI_PAGE_ID, TERMS_OF_USE_INFO, TERMS_OF_USE_STATUS, + PROJECT_STORAGE_USAGE, + PROJECT_STORAGE_LIMIT, } from '../utils/APIConstants' import { dispatchDownloadListChangeEvent } from '../utils/functions/dispatchDownloadListChangeEvent' import { BackendDestinationEnum, getEndpoint } from '../utils/functions' @@ -333,6 +335,8 @@ import { TermsOfServiceInfo, TermsOfServiceStatus, AccessToken, + ProjectStorageUsage, + ProjectStorageLocationLimit, } from '@sage-bionetworks/synapse-types' import { calculateFriendlyFileSize } from '../utils/functions/calculateFriendlyFileSize' import { @@ -5593,3 +5597,30 @@ export const getTermsOfServiceStatus = ( { signal }, ) } + +export const getProjectStorageUsage = ( + projectId: string, + accessToken: string | undefined = undefined, + signal?: AbortSignal, +): Promise => { + return doGet( + PROJECT_STORAGE_USAGE(projectId), + accessToken, + BackendDestinationEnum.REPO_ENDPOINT, + { signal }, + ) +} + +export const getProjectStorageLocationLimit = ( + request: ProjectStorageLocationLimit, + accessToken: string | undefined = undefined, + signal?: AbortSignal, +): Promise => { + return doPost( + PROJECT_STORAGE_LIMIT(request.projectId), + request, + accessToken, + BackendDestinationEnum.REPO_ENDPOINT, + { signal }, + ) +} diff --git a/packages/synapse-react-client/src/synapse-queries/KeyFactory.ts b/packages/synapse-react-client/src/synapse-queries/KeyFactory.ts index 3883ecb92d..8ffbd0d891 100644 --- a/packages/synapse-react-client/src/synapse-queries/KeyFactory.ts +++ b/packages/synapse-react-client/src/synapse-queries/KeyFactory.ts @@ -881,6 +881,10 @@ export class KeyFactory { public getTermsOfServiceStatus() { return this.getKey('termsOfServiceStatus') } + + public getProjectStorageUsageKey(projectId: string) { + return this.getKey('projectstorageusage', projectId) + } public getPaginatedDockerTagQueryKey( id: string, offset: string, diff --git a/packages/synapse-react-client/src/synapse-queries/entity/index.ts b/packages/synapse-react-client/src/synapse-queries/entity/index.ts index 375ae8242e..fb04acdb58 100644 --- a/packages/synapse-react-client/src/synapse-queries/entity/index.ts +++ b/packages/synapse-react-client/src/synapse-queries/entity/index.ts @@ -8,3 +8,4 @@ export * from './useGetEntityForum' export * from './useGetEntityHeaders' export * from './useGetQueryResultBundle' export * from './useSchema' +export * from './useProjectStorage' diff --git a/packages/synapse-react-client/src/synapse-queries/entity/useProjectStorage.ts b/packages/synapse-react-client/src/synapse-queries/entity/useProjectStorage.ts new file mode 100644 index 0000000000..68ddf43dcd --- /dev/null +++ b/packages/synapse-react-client/src/synapse-queries/entity/useProjectStorage.ts @@ -0,0 +1,19 @@ +/* + * Hooks to access Project Storage in Synapse + */ +import { useQuery, UseQueryOptions } from '@tanstack/react-query' +import SynapseClient from '../../synapse-client' +import { SynapseClientError, useSynapseContext } from '../../utils' +import { ProjectStorageUsage } from '@sage-bionetworks/synapse-types' + +export function useProjectStorageUsage( + projectId: string, + options?: Partial>, +) { + const { accessToken, keyFactory } = useSynapseContext() + return useQuery({ + ...options, + queryKey: keyFactory.getProjectStorageUsageKey(projectId), + queryFn: () => SynapseClient.getProjectStorageUsage(projectId, accessToken), + }) +} diff --git a/packages/synapse-react-client/src/utils/APIConstants.ts b/packages/synapse-react-client/src/utils/APIConstants.ts index 2c3eec90a9..80fb9a1943 100644 --- a/packages/synapse-react-client/src/utils/APIConstants.ts +++ b/packages/synapse-react-client/src/utils/APIConstants.ts @@ -97,6 +97,11 @@ export const REGISTER_ACCOUNT_STEP_2 = `${REPO}/account2` export const TERMS_OF_USE = `${AUTH}/termsOfUse2` export const TERMS_OF_USE_INFO = `${TERMS_OF_USE}/info` export const TERMS_OF_USE_STATUS = `${TERMS_OF_USE}/status` +const PROJECT = (projectId: string) => `${REPO}/project/${projectId}` +export const PROJECT_STORAGE_USAGE = (projectId: string) => + `${PROJECT(projectId)}/storage/usage` +export const PROJECT_STORAGE_LIMIT = (projectId: string) => + `${PROJECT(projectId)}/storage/limit` export const VERIFICATION_SUBMISSION = `${REPO}/verificationSubmission` export const VERIFICATION_SUBMISSION_STATE = (id: string) => `${VERIFICATION_SUBMISSION}/${id}/state` diff --git a/packages/synapse-types/src/ProjectStorage.ts b/packages/synapse-types/src/ProjectStorage.ts new file mode 100644 index 0000000000..c302ec1775 --- /dev/null +++ b/packages/synapse-types/src/ProjectStorage.ts @@ -0,0 +1,17 @@ +export type ProjectStorageUsage = { + projectId: string // The ID of the project + locations: ProjectStorageLocationUsage[] // List of storage location usages +} + +export type ProjectStorageLocationUsage = { + storageLocationId: string // The ID of the storage location + sumFileBytes: number // The total number of bytes of files currently associated with this project storage location + maxAllowedFileBytes?: number // The total number of allowed bytes for this project storage location (optional) + isOverLimit: boolean // Whether the project storage location is over its limit +} + +export type ProjectStorageLocationLimit = { + projectId: string // The ID of the project + storageLocationId: string // The ID of the storage location + maxAllowedFileBytes: string // Sets the limit on the number of file bytes for this storage location +} diff --git a/packages/synapse-types/src/index.ts b/packages/synapse-types/src/index.ts index a7011bedbe..232e8c5f60 100644 --- a/packages/synapse-types/src/index.ts +++ b/packages/synapse-types/src/index.ts @@ -71,6 +71,7 @@ export * from './PaginatedResults' export * from './PartPresignedUrl' export * from './Principal' export * from './ProjectHeader' +export * from './ProjectStorage' export * from './Provenance' export * from './ReferenceList' export * from './ResourceAccess' From a7e639230e5eb4a7826690a9256c1093ba3e16a3 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Mon, 21 Oct 2024 16:03:08 -0700 Subject: [PATCH 2/6] SWC-7063 with mock stories --- .../ProjectDataAvailability.tsx | 101 ++++++++++++++++++ .../ProjectStorage/ProjectStorage.stories.ts | 77 +++++++++++++ .../src/components/ProjectStorage/index.ts | 4 + .../src/components/index.ts | 1 + .../msw/handlers/projectStorageHandlers.ts | 26 +++++ .../mockProjectStorageLimits.ts | 41 +++++++ .../src/synapse-client/SynapseClient.ts | 16 --- .../src/utils/APIConstants.ts | 2 - .../functions/calculateFriendlyFileSize.ts | 7 +- 9 files changed, 255 insertions(+), 20 deletions(-) create mode 100644 packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx create mode 100644 packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts create mode 100644 packages/synapse-react-client/src/components/ProjectStorage/index.ts create mode 100644 packages/synapse-react-client/src/mocks/msw/handlers/projectStorageHandlers.ts create mode 100644 packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts diff --git a/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx b/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx new file mode 100644 index 0000000000..d44d3ad9c5 --- /dev/null +++ b/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx @@ -0,0 +1,101 @@ +import React from 'react' +import { Box, SxProps, Tooltip, Typography } from '@mui/material' +import { useTheme } from '@mui/material' +import { useSynapseContext } from '../../utils' +import { useProjectStorageUsage } from '../../synapse-queries' +import { SYNAPSE_STORAGE_LOCATION_ID } from 'src/synapse-client' +import HelpPopover from '../HelpPopover' +import { calculateFriendlyFileSize } from 'src/utils/functions/calculateFriendlyFileSize' + +export type ProjectDataAvailabilityProps = { + projectId?: string + sx?: SxProps +} +const usageBarWidth = 142 //px + +export const ProjectDataAvailability: React.FunctionComponent< + ProjectDataAvailabilityProps +> = ({ projectId, sx }) => { + const { accessToken } = useSynapseContext() + const isLoggedIn = !!accessToken + const { data } = useProjectStorageUsage(projectId!, { + enabled: !!projectId && isLoggedIn, + }) + + const projectDataUsageArray = data?.locations.filter( + v => parseInt(v.storageLocationId) == SYNAPSE_STORAGE_LOCATION_ID, + ) + const synapseStorageUsage = + projectDataUsageArray?.length == 1 ? projectDataUsageArray[0] : undefined + if (!synapseStorageUsage) { + return <> + } + const { sumFileBytes = 0, maxAllowedFileBytes = 1 } = synapseStorageUsage + const usageBarFilledPx = Math.min( + Math.round((sumFileBytes / maxAllowedFileBytes) * usageBarWidth), + usageBarWidth, + ) + const friendlySumFileBytes = calculateFriendlyFileSize(sumFileBytes, 1) + const friendlyMaxAllowedFileBytes = calculateFriendlyFileSize( + maxAllowedFileBytes, + 0, + ) + return ( + + + + Data Availability{' '} + {' '} + + + {synapseStorageUsage.maxAllowedFileBytes && ( + + + + 0 + + {/* Progress Bar */} + + + + + {friendlyMaxAllowedFileBytes} + + + + )} + + ) +} + +export default ProjectDataAvailability diff --git a/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts b/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts new file mode 100644 index 0000000000..fbc0ad8853 --- /dev/null +++ b/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts @@ -0,0 +1,77 @@ +import { Meta, StoryObj } from '@storybook/react' +import ProjectDataAvailability from './ProjectDataAvailability' +import { MOCK_REPO_ORIGIN } from 'src/utils/functions/getEndpoint' +import { getUserProfileHandlers } from 'src/mocks/msw/handlers/userProfileHandlers' +import { getEntityHandlers } from 'src/mocks/msw/handlers/entityHandlers' +import { getProjectStorageHandlers } from 'src/mocks/msw/handlers/projectStorageHandlers' +import { + OVER_LIMIT_PROJECT_ID, + UNDER_LIMIT_PROJECT_ID, +} from 'src/mocks/projectStorage/mockProjectStorageLimits' + +const meta = { + title: 'Synapse/ProjectStorage', + component: ProjectDataAvailability, + parameters: { + chromatic: { viewports: [600, 1200] }, + }, + argTypes: { + isAuthenticated: { + type: 'boolean', + }, + }, + args: { + isAuthenticated: true, + }, +} satisfies Meta +export default meta +type Story = StoryObj + +export const ProjectDataUnderLimit: Story = { + args: { + projectId: UNDER_LIMIT_PROJECT_ID, + sx: { backgroundColor: '#375574' }, + }, + parameters: { + stack: 'mock', + msw: { + handlers: [ + ...getUserProfileHandlers(MOCK_REPO_ORIGIN), + ...getEntityHandlers(MOCK_REPO_ORIGIN), + ...getProjectStorageHandlers(MOCK_REPO_ORIGIN), + ], + }, + }, +} + +export const ProjectDataOverLimit: Story = { + args: { + projectId: OVER_LIMIT_PROJECT_ID, + sx: { backgroundColor: '#375574' }, + }, + + parameters: { + stack: 'mock', + msw: { + handlers: [ + ...getUserProfileHandlers(MOCK_REPO_ORIGIN), + ...getEntityHandlers(MOCK_REPO_ORIGIN), + ...getProjectStorageHandlers(MOCK_REPO_ORIGIN), + ], + }, + }, +} + +export const ProjectDataStorageNotSet: Story = { + args: { projectId: 'syn31415123' }, + parameters: { + stack: 'mock', + msw: { + handlers: [ + ...getUserProfileHandlers(MOCK_REPO_ORIGIN), + ...getEntityHandlers(MOCK_REPO_ORIGIN), + ...getProjectStorageHandlers(MOCK_REPO_ORIGIN), + ], + }, + }, +} diff --git a/packages/synapse-react-client/src/components/ProjectStorage/index.ts b/packages/synapse-react-client/src/components/ProjectStorage/index.ts new file mode 100644 index 0000000000..46b8e38a1d --- /dev/null +++ b/packages/synapse-react-client/src/components/ProjectStorage/index.ts @@ -0,0 +1,4 @@ +import ProjectDataAvailability from './ProjectDataAvailability' +import type { ProjectDataAvailabilityProps } from './ProjectDataAvailability' +export { ProjectDataAvailability, ProjectDataAvailabilityProps } +export default ProjectDataAvailability diff --git a/packages/synapse-react-client/src/components/index.ts b/packages/synapse-react-client/src/components/index.ts index 5720db8de6..5d1caf1df6 100644 --- a/packages/synapse-react-client/src/components/index.ts +++ b/packages/synapse-react-client/src/components/index.ts @@ -43,6 +43,7 @@ export * from './ProjectViewCarousel' export * from './Programs' export * from './ProgrammaticTableDownload' export * from './ProvenanceGraph' +export * from './ProjectStorage' export * from './QueryContext' export * from './QueryCount' export * from './QueryWrapper' diff --git a/packages/synapse-react-client/src/mocks/msw/handlers/projectStorageHandlers.ts b/packages/synapse-react-client/src/mocks/msw/handlers/projectStorageHandlers.ts new file mode 100644 index 0000000000..84f7d779fc --- /dev/null +++ b/packages/synapse-react-client/src/mocks/msw/handlers/projectStorageHandlers.ts @@ -0,0 +1,26 @@ +import { rest } from 'msw' +import { PROJECT_STORAGE_USAGE } from '../../../utils/APIConstants' +import { BackendDestinationEnum, getEndpoint } from '../../../utils/functions' +import { + mockProjectStorageUsageOverLimit, + mockProjectStorageUsageUnderLimit, + OVER_LIMIT_PROJECT_ID, + UNDER_LIMIT_PROJECT_ID, +} from '../../../mocks/projectStorage/mockProjectStorageLimits' + +export const getProjectStorageHandlers = ( + backendOrigin = getEndpoint(BackendDestinationEnum.REPO_ENDPOINT), +) => [ + rest.get( + `${backendOrigin}${PROJECT_STORAGE_USAGE(OVER_LIMIT_PROJECT_ID)}`, + async (req, res, ctx) => { + return res(ctx.status(201), ctx.json(mockProjectStorageUsageOverLimit)) + }, + ), + rest.get( + `${backendOrigin}${PROJECT_STORAGE_USAGE(UNDER_LIMIT_PROJECT_ID)}`, + async (req, res, ctx) => { + return res(ctx.status(201), ctx.json(mockProjectStorageUsageUnderLimit)) + }, + ), +] diff --git a/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts b/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts new file mode 100644 index 0000000000..f990f8d928 --- /dev/null +++ b/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts @@ -0,0 +1,41 @@ +import { ProjectStorageUsage } from '@sage-bionetworks/synapse-types' +import { SYNAPSE_STORAGE_LOCATION_ID } from '../../synapse-client' + +export const OVER_LIMIT_PROJECT_ID = 'syn54321' +export const UNDER_LIMIT_PROJECT_ID = 'syn12345' + +export const mockProjectStorageUsageOverLimit: ProjectStorageUsage = { + projectId: OVER_LIMIT_PROJECT_ID, + locations: [ + { + storageLocationId: `${SYNAPSE_STORAGE_LOCATION_ID}`, + sumFileBytes: 1200000000, // 1.2 GB + maxAllowedFileBytes: 1073741824, // 1 GB limit + isOverLimit: true, // Over the limit + }, + { + storageLocationId: 'location-2', + sumFileBytes: 100000000, + maxAllowedFileBytes: 1073741824, + isOverLimit: false, + }, + ], +} + +export const mockProjectStorageUsageUnderLimit: ProjectStorageUsage = { + projectId: UNDER_LIMIT_PROJECT_ID, + locations: [ + { + storageLocationId: `${SYNAPSE_STORAGE_LOCATION_ID}`, + sumFileBytes: 500000000, + maxAllowedFileBytes: 1073741824, + isOverLimit: false, // Under the limit + }, + { + storageLocationId: 'location-2', + sumFileBytes: 1000, + maxAllowedFileBytes: 1073741824, + isOverLimit: true, + }, + ], +} diff --git a/packages/synapse-react-client/src/synapse-client/SynapseClient.ts b/packages/synapse-react-client/src/synapse-client/SynapseClient.ts index 371aed706d..6ddda2e908 100644 --- a/packages/synapse-react-client/src/synapse-client/SynapseClient.ts +++ b/packages/synapse-react-client/src/synapse-client/SynapseClient.ts @@ -99,7 +99,6 @@ import { TERMS_OF_USE_INFO, TERMS_OF_USE_STATUS, PROJECT_STORAGE_USAGE, - PROJECT_STORAGE_LIMIT, } from '../utils/APIConstants' import { dispatchDownloadListChangeEvent } from '../utils/functions/dispatchDownloadListChangeEvent' import { BackendDestinationEnum, getEndpoint } from '../utils/functions' @@ -336,7 +335,6 @@ import { TermsOfServiceStatus, AccessToken, ProjectStorageUsage, - ProjectStorageLocationLimit, } from '@sage-bionetworks/synapse-types' import { calculateFriendlyFileSize } from '../utils/functions/calculateFriendlyFileSize' import { @@ -5610,17 +5608,3 @@ export const getProjectStorageUsage = ( { signal }, ) } - -export const getProjectStorageLocationLimit = ( - request: ProjectStorageLocationLimit, - accessToken: string | undefined = undefined, - signal?: AbortSignal, -): Promise => { - return doPost( - PROJECT_STORAGE_LIMIT(request.projectId), - request, - accessToken, - BackendDestinationEnum.REPO_ENDPOINT, - { signal }, - ) -} diff --git a/packages/synapse-react-client/src/utils/APIConstants.ts b/packages/synapse-react-client/src/utils/APIConstants.ts index 80fb9a1943..cdbf8bbcfb 100644 --- a/packages/synapse-react-client/src/utils/APIConstants.ts +++ b/packages/synapse-react-client/src/utils/APIConstants.ts @@ -100,8 +100,6 @@ export const TERMS_OF_USE_STATUS = `${TERMS_OF_USE}/status` const PROJECT = (projectId: string) => `${REPO}/project/${projectId}` export const PROJECT_STORAGE_USAGE = (projectId: string) => `${PROJECT(projectId)}/storage/usage` -export const PROJECT_STORAGE_LIMIT = (projectId: string) => - `${PROJECT(projectId)}/storage/limit` export const VERIFICATION_SUBMISSION = `${REPO}/verificationSubmission` export const VERIFICATION_SUBMISSION_STATE = (id: string) => `${VERIFICATION_SUBMISSION}/${id}/state` diff --git a/packages/synapse-react-client/src/utils/functions/calculateFriendlyFileSize.ts b/packages/synapse-react-client/src/utils/functions/calculateFriendlyFileSize.ts index 67cdc01bc7..9778554527 100644 --- a/packages/synapse-react-client/src/utils/functions/calculateFriendlyFileSize.ts +++ b/packages/synapse-react-client/src/utils/functions/calculateFriendlyFileSize.ts @@ -10,7 +10,10 @@ const sufixes: string[] = [ 'YB', ] -export function calculateFriendlyFileSize(bytes: number) { +export function calculateFriendlyFileSize( + bytes: number, + fractionDigits?: number, +) { if (!bytes) { return '' } @@ -19,6 +22,6 @@ export function calculateFriendlyFileSize(bytes: number) { // tslint:disable-next-line return ( (!bytes && '0 Bytes') || - (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sufixes[i] + (bytes / Math.pow(1024, i)).toFixed(fractionDigits ?? 2) + ' ' + sufixes[i] ) } From f90d0179099679a9ae0f2feae5c84b9f8fea518f Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Tue, 22 Oct 2024 09:29:25 -0700 Subject: [PATCH 3/6] Update packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts Co-authored-by: Nick Grosenbacher --- .../src/components/ProjectStorage/ProjectStorage.stories.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts b/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts index fbc0ad8853..a0ba198742 100644 --- a/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts +++ b/packages/synapse-react-client/src/components/ProjectStorage/ProjectStorage.stories.ts @@ -12,9 +12,6 @@ import { const meta = { title: 'Synapse/ProjectStorage', component: ProjectDataAvailability, - parameters: { - chromatic: { viewports: [600, 1200] }, - }, argTypes: { isAuthenticated: { type: 'boolean', From 62f94154f7317a6eb2ea9c4a9964e7eb4e905c66 Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Tue, 22 Oct 2024 09:34:57 -0700 Subject: [PATCH 4/6] Update packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts Co-authored-by: Nick Grosenbacher --- .../src/mocks/projectStorage/mockProjectStorageLimits.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts b/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts index f990f8d928..acf27548d7 100644 --- a/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts +++ b/packages/synapse-react-client/src/mocks/projectStorage/mockProjectStorageLimits.ts @@ -35,7 +35,7 @@ export const mockProjectStorageUsageUnderLimit: ProjectStorageUsage = { storageLocationId: 'location-2', sumFileBytes: 1000, maxAllowedFileBytes: 1073741824, - isOverLimit: true, + isOverLimit: false, }, ], } From 1658aa59cf6e35906ce1bbf7d6fe453eb21c3abe Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Tue, 22 Oct 2024 10:34:38 -0700 Subject: [PATCH 5/6] fix imports --- .../components/ProjectStorage/ProjectDataAvailability.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx b/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx index d44d3ad9c5..ccfe8c8897 100644 --- a/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx +++ b/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx @@ -1,11 +1,10 @@ import React from 'react' import { Box, SxProps, Tooltip, Typography } from '@mui/material' -import { useTheme } from '@mui/material' import { useSynapseContext } from '../../utils' import { useProjectStorageUsage } from '../../synapse-queries' -import { SYNAPSE_STORAGE_LOCATION_ID } from 'src/synapse-client' +import { SYNAPSE_STORAGE_LOCATION_ID } from '../../synapse-client' import HelpPopover from '../HelpPopover' -import { calculateFriendlyFileSize } from 'src/utils/functions/calculateFriendlyFileSize' +import { calculateFriendlyFileSize } from '../../utils/functions/calculateFriendlyFileSize' export type ProjectDataAvailabilityProps = { projectId?: string From aa2e4fdb278dc657dcf71d59203bf02b1f0e86c7 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Tue, 22 Oct 2024 11:09:56 -0700 Subject: [PATCH 6/6] from code review - if maxAllowedFileBytes is 0 we show nothing --- .../src/components/ProjectStorage/ProjectDataAvailability.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx b/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx index ccfe8c8897..b0f8115c8c 100644 --- a/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx +++ b/packages/synapse-react-client/src/components/ProjectStorage/ProjectDataAvailability.tsx @@ -30,6 +30,9 @@ export const ProjectDataAvailability: React.FunctionComponent< return <> } const { sumFileBytes = 0, maxAllowedFileBytes = 1 } = synapseStorageUsage + if (maxAllowedFileBytes == 0) { + return <> + } const usageBarFilledPx = Math.min( Math.round((sumFileBytes / maxAllowedFileBytes) * usageBarWidth), usageBarWidth,