From 0fba3f23205dd69afed7d2ad64bc2bacfce2e39d Mon Sep 17 00:00:00 2001 From: Beng Eu Date: Wed, 2 Mar 2022 14:25:07 +0800 Subject: [PATCH] feat: add storage settings with upload file size limit --- .../SettingsLayout/SettingsMenu.utils.ts | 6 ++ .../layouts/StorageLayout/StorageMenu.tsx | 9 ++- .../StorageSettings/StorageSettings.tsx | 79 +++++++++++++++++++ .../to-be-cleaned/Storage/StorageSidebar.js | 15 +++- .../components/to-be-cleaned/Storage/index.js | 2 + .../pages/project/[ref]/storage/settings.tsx | 38 +++++++++ 6 files changed, 146 insertions(+), 3 deletions(-) create mode 100644 studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx create mode 100644 studio/pages/project/[ref]/storage/settings.tsx diff --git a/studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts b/studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts index 1c6f13d71b2..eea18e36585 100644 --- a/studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts +++ b/studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts @@ -12,6 +12,12 @@ export const generateSettingsMenu = (ref: string): ProductMenuGroup[] => { { name: 'Database', key: 'database', url: `/project/${ref}/settings/database`, items: [] }, { name: 'API', key: 'api', url: `/project/${ref}/settings/api`, items: [] }, { name: 'Auth Settings', key: 'auth', url: `/project/${ref}/auth/settings`, items: [] }, + { + name: 'Storage Settings', + key: 'storage', + url: `/project/${ref}/storage/settings`, + items: [], + }, { name: 'Billing & Usage', key: 'billing', diff --git a/studio/components/layouts/StorageLayout/StorageMenu.tsx b/studio/components/layouts/StorageLayout/StorageMenu.tsx index 83e406a7d83..bf0df8fc04c 100644 --- a/studio/components/layouts/StorageLayout/StorageMenu.tsx +++ b/studio/components/layouts/StorageLayout/StorageMenu.tsx @@ -24,7 +24,7 @@ interface Props {} const StorageMenu: FC = () => { const router = useRouter() const { ref, bucketId } = router.query - const page = router.pathname.split('/')[4] as undefined | 'policies' | 'usage' + const page = router.pathname.split('/')[4] as undefined | 'policies' | 'settings' | 'usage' const { ui } = useStore() const projectRef = ui.selectedProject?.ref @@ -92,8 +92,13 @@ const StorageMenu: FC = () => {
- + + + + Settings + + Policies diff --git a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx new file mode 100644 index 00000000000..748158dbbd2 --- /dev/null +++ b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx @@ -0,0 +1,79 @@ +import useSWR from 'swr' +import { FC, useState } from 'react' +import { AutoField } from 'uniforms-bootstrap4' +import { Typography } from '@supabase/ui' + +import { API_URL } from 'lib/constants' +import { patch, get } from 'lib/common/fetch' +import { useStore } from 'hooks' +import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel' + +const StorageSettings: FC = ({ projectRef }) => { + const { data, error } = useSWR(`${API_URL}/projects/${projectRef}/config?app=storage`, get) + + if (error) { + return ( +
+ Error loading storage settings +
+ ) + } + + if (!data) { + return ( +
+ Loading... +
+ ) + } + + return +} + +const StorageConfig = ({ config, projectRef }: any) => { + const { ui } = useStore() + + const [updates, setUpdates] = useState(config) + + const updateConfig = async (updatedConfig: any) => { + try { + const response = await patch( + `${API_URL}/projects/${projectRef}/config?app=storage`, + updatedConfig + ) + if (response.error) { + throw response.error + } else { + ui.setNotification({ category: 'success', message: 'Settings saved' }) + } + } catch (error: any) { + ui.setNotification({ category: 'error', message: `Update config failed: ${error.message}` }) + } + } + + return ( +
+ updateConfig(model)} + onReset={() => setUpdates(config)} + > + + +
+ ) +} + +export default StorageSettings diff --git a/studio/components/to-be-cleaned/Storage/StorageSidebar.js b/studio/components/to-be-cleaned/Storage/StorageSidebar.js index dc387937def..fc12d8dcb6c 100644 --- a/studio/components/to-be-cleaned/Storage/StorageSidebar.js +++ b/studio/components/to-be-cleaned/Storage/StorageSidebar.js @@ -137,8 +137,21 @@ const StorageSidebar = ({
- +
+
diff --git a/studio/components/to-be-cleaned/Storage/index.js b/studio/components/to-be-cleaned/Storage/index.js index f35c92af17f..e903df9cd68 100644 --- a/studio/components/to-be-cleaned/Storage/index.js +++ b/studio/components/to-be-cleaned/Storage/index.js @@ -1,5 +1,6 @@ import StorageExplorer from './StorageExplorer/StorageExplorer' import StoragePolicies from './StoragePolicies/StoragePolicies' +import StorageSettings from './StorageSettings/StorageSettings' import StorageUsage from './StorageUsage/StorageUsage' import StorageSidebar from './StorageSidebar' @@ -10,6 +11,7 @@ import ToggleBucketPublicModal from './ToggleBucketPublicModal' export { StorageExplorer, StoragePolicies, + StorageSettings, StorageUsage, StorageSidebar, CreateBucketModal, diff --git a/studio/pages/project/[ref]/storage/settings.tsx b/studio/pages/project/[ref]/storage/settings.tsx new file mode 100644 index 00000000000..ecb47812553 --- /dev/null +++ b/studio/pages/project/[ref]/storage/settings.tsx @@ -0,0 +1,38 @@ +import React, { useEffect } from 'react' +import { useRouter } from 'next/router' +import { observer } from 'mobx-react-lite' + +import { API_URL, PROJECT_STATUS } from 'lib/constants' +import { useStore, withAuth } from 'hooks' +import { post } from 'lib/common/fetch' +import { StorageLayout } from 'components/layouts' +import { StorageSettings } from 'components/to-be-cleaned/Storage' + +/** + * PageLayout is used to setup layout - as usual it will requires inject global store + */ +const PageLayout = () => { + const router = useRouter() + const { ref } = router.query + + const { ui } = useStore() + const project = ui.selectedProject + + useEffect(() => { + if (project && project.status === PROJECT_STATUS.INACTIVE) { + post(`${API_URL}/projects/${ref}/restore`, {}) + } + }, [project]) + + if (!project) return
+ + return ( + +
+ +
+ + ) +} + +export default withAuth(observer(PageLayout))