From 5a41f4a1ea510d8ba14715670acd96d52b43edc6 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Tue, 27 Dec 2022 18:48:21 -0800 Subject: [PATCH] Reorganize admin pages and consolidate some sections. For #1904 --- web/components/MainLayout.tsx | 18 ++-------- web/pages/admin/config-social-items.tsx | 2 +- .../AppearanceConfig.tsx} | 0 .../config/general}/EditInstanceDetails.tsx | 18 +++++----- .../config/general}/EditInstanceTags.tsx | 18 +++++----- .../admin/config/general}/EditPageContent.tsx | 14 ++++---- .../admin/config/general}/EditSocialLinks.tsx | 24 ++++++------- .../general/GeneralConfig.tsx} | 12 +++---- .../appearance.module.scss | 0 web/pages/admin/config/general/index.tsx | 28 +++++++++++++++ .../admin/config/server}/EditStorage.tsx | 24 ++++++------- .../server/ServerConfig.tsx} | 8 ++--- .../server/StorageConfig.tsx} | 6 +--- .../index.tsx => server/StreamKeys.tsx} | 4 +-- web/pages/admin/config/server/index.tsx | 34 +++++++++++++++++++ 15 files changed, 123 insertions(+), 87 deletions(-) rename web/pages/admin/config/{appearance/index.tsx => general/AppearanceConfig.tsx} (100%) rename web/{components/config => pages/admin/config/general}/EditInstanceDetails.tsx (89%) rename web/{components/config => pages/admin/config/general}/EditInstanceTags.tsx (87%) rename web/{components/config => pages/admin/config/general}/EditPageContent.tsx (89%) rename web/{components/config => pages/admin/config/general}/EditSocialLinks.tsx (93%) rename web/pages/admin/{config-public-details.tsx => config/general/GeneralConfig.tsx} (71%) rename web/pages/admin/config/{appearance => general}/appearance.module.scss (100%) create mode 100644 web/pages/admin/config/general/index.tsx rename web/{components/config => pages/admin/config/server}/EditStorage.tsx (91%) rename web/pages/admin/{config-server-details.tsx => config/server/ServerConfig.tsx} (57%) rename web/pages/admin/{config-storage.tsx => config/server/StorageConfig.tsx} (85%) rename web/pages/admin/config/{streamkeys/index.tsx => server/StreamKeys.tsx} (97%) create mode 100644 web/pages/admin/config/server/index.tsx diff --git a/web/components/MainLayout.tsx b/web/components/MainLayout.tsx index 2db81b58b..9955157ee 100644 --- a/web/components/MainLayout.tsx +++ b/web/components/MainLayout.tsx @@ -162,16 +162,12 @@ export const MainLayout: FC = ({ children }) => { const configurationMenu = [ { - label: General, + label: General, key: 'config-public-details', }, { - label: Server Setup, - key: 'config-server-details', - }, - { - label: Stream Keys, - key: 'config-streamkeys', + label: Server Setup, + key: 'config-server', }, { label: Video, @@ -189,14 +185,6 @@ export const MainLayout: FC = ({ children }) => { label: Notifications, key: 'config-notify', }, - { - label: Appearance, - key: 'config-appearance', - }, - { - label: S3 Storage, - key: 'config-storage', - }, ]; const menuItems = [ diff --git a/web/pages/admin/config-social-items.tsx b/web/pages/admin/config-social-items.tsx index 8f8248ebb..299027d67 100644 --- a/web/pages/admin/config-social-items.tsx +++ b/web/pages/admin/config-social-items.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Typography } from 'antd'; -import { EditSocialLinks } from '../../components/config/EditSocialLinks'; +import EditSocialLinks from './config/general/EditSocialLinks'; const { Title } = Typography; diff --git a/web/pages/admin/config/appearance/index.tsx b/web/pages/admin/config/general/AppearanceConfig.tsx similarity index 100% rename from web/pages/admin/config/appearance/index.tsx rename to web/pages/admin/config/general/AppearanceConfig.tsx diff --git a/web/components/config/EditInstanceDetails.tsx b/web/pages/admin/config/general/EditInstanceDetails.tsx similarity index 89% rename from web/components/config/EditInstanceDetails.tsx rename to web/pages/admin/config/general/EditInstanceDetails.tsx index 34e9defab..4d3390641 100644 --- a/web/components/config/EditInstanceDetails.tsx +++ b/web/pages/admin/config/general/EditInstanceDetails.tsx @@ -1,11 +1,11 @@ -import React, { useState, useContext, useEffect, FC } from 'react'; +import React, { useState, useContext, useEffect } from 'react'; import { Typography } from 'antd'; import { TextFieldWithSubmit, TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL, -} from './TextFieldWithSubmit'; -import { ServerStatusContext } from '../../utils/server-status-context'; +} from '../../../../components/config/TextFieldWithSubmit'; +import { ServerStatusContext } from '../../../../utils/server-status-context'; import { postConfigUpdateToAPI, TEXTFIELD_PROPS_INSTANCE_URL, @@ -16,14 +16,14 @@ import { FIELD_PROPS_YP, FIELD_PROPS_NSFW, FIELD_PROPS_HIDE_VIEWER_COUNT, -} from '../../utils/config-constants'; -import { UpdateArgs } from '../../types/config-section'; -import { ToggleSwitch } from './ToggleSwitch'; -import { EditLogo } from './EditLogo'; +} from '../../../../utils/config-constants'; +import { UpdateArgs } from '../../../../types/config-section'; +import { ToggleSwitch } from '../../../../components/config/ToggleSwitch'; +import { EditLogo } from '../../../../components/config/EditLogo'; const { Title } = Typography; -export const EditInstanceDetails: FC = () => { +export default function EditInstanceDetails() { const [formDataValues, setFormDataValues] = useState(null); const serverStatusData = useContext(ServerStatusContext); const { serverConfig } = serverStatusData || {}; @@ -161,4 +161,4 @@ export const EditInstanceDetails: FC = () => { ); -}; +} diff --git a/web/components/config/EditInstanceTags.tsx b/web/pages/admin/config/general/EditInstanceTags.tsx similarity index 87% rename from web/components/config/EditInstanceTags.tsx rename to web/pages/admin/config/general/EditInstanceTags.tsx index fc840e61c..76031d4b5 100644 --- a/web/components/config/EditInstanceTags.tsx +++ b/web/pages/admin/config/general/EditInstanceTags.tsx @@ -1,14 +1,14 @@ /* eslint-disable react/no-array-index-key */ -import React, { useContext, useState, useEffect, FC } from 'react'; +import React, { useContext, useState, useEffect } from 'react'; import { Typography, Tag } from 'antd'; -import { ServerStatusContext } from '../../utils/server-status-context'; +import { ServerStatusContext } from '../../../../utils/server-status-context'; import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI, -} from '../../utils/config-constants'; -import { TextField } from './TextField'; -import { UpdateArgs } from '../../types/config-section'; +} from '../../../../utils/config-constants'; +import { TextField } from '../../../../components/config/TextField'; +import { UpdateArgs } from '../../../../types/config-section'; import { createInputStatus, StatusState, @@ -16,12 +16,12 @@ import { STATUS_PROCESSING, STATUS_SUCCESS, STATUS_WARNING, -} from '../../utils/input-statuses'; -import { TAG_COLOR } from './EditValueArray'; +} from '../../../../utils/input-statuses'; +import { TAG_COLOR } from '../../../../components/config/EditValueArray'; const { Title } = Typography; -export const EditInstanceTags: FC = () => { +export default function EditInstanceTags() { const [newTagInput, setNewTagInput] = useState(''); const [submitStatus, setSubmitStatus] = useState(null); @@ -135,4 +135,4 @@ export const EditInstanceTags: FC = () => { ); -}; +} diff --git a/web/components/config/EditPageContent.tsx b/web/pages/admin/config/general/EditPageContent.tsx similarity index 89% rename from web/components/config/EditPageContent.tsx rename to web/pages/admin/config/general/EditPageContent.tsx index ead8bc872..6347e0998 100644 --- a/web/components/config/EditPageContent.tsx +++ b/web/pages/admin/config/general/EditPageContent.tsx @@ -1,29 +1,29 @@ // EDIT CUSTOM DETAILS ON YOUR PAGE -import React, { useState, useEffect, useContext, FC } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import { Typography, Button } from 'antd'; import CodeMirror from '@uiw/react-codemirror'; import { bbedit } from '@uiw/codemirror-theme-bbedit'; import { markdown, markdownLanguage } from '@codemirror/lang-markdown'; import { languages } from '@codemirror/language-data'; -import { ServerStatusContext } from '../../utils/server-status-context'; +import { ServerStatusContext } from '../../../../utils/server-status-context'; import { postConfigUpdateToAPI, RESET_TIMEOUT, API_CUSTOM_CONTENT, -} from '../../utils/config-constants'; +} from '../../../../utils/config-constants'; import { createInputStatus, StatusState, STATUS_ERROR, STATUS_PROCESSING, STATUS_SUCCESS, -} from '../../utils/input-statuses'; -import { FormStatusIndicator } from './FormStatusIndicator'; +} from '../../../../utils/input-statuses'; +import { FormStatusIndicator } from '../../../../components/config/FormStatusIndicator'; const { Title } = Typography; -export const EditPageContent: FC = () => { +export default function EditPageContent() { const [content, setContent] = useState(''); const [submitStatus, setSubmitStatus] = useState(null); const [hasChanged, setHasChanged] = useState(false); @@ -115,4 +115,4 @@ export const EditPageContent: FC = () => { ); -}; +} diff --git a/web/components/config/EditSocialLinks.tsx b/web/pages/admin/config/general/EditSocialLinks.tsx similarity index 93% rename from web/components/config/EditSocialLinks.tsx rename to web/pages/admin/config/general/EditSocialLinks.tsx index a9eb39869..9fb9662f9 100644 --- a/web/components/config/EditSocialLinks.tsx +++ b/web/pages/admin/config/general/EditSocialLinks.tsx @@ -1,31 +1,31 @@ -import React, { useState, useContext, useEffect, FC } from 'react'; +import React, { useState, useContext, useEffect } from 'react'; import { Typography, Table, Button, Modal, Input } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import { CaretDownOutlined, CaretUpOutlined, DeleteOutlined } from '@ant-design/icons'; -import { SocialDropdown } from './SocialDropdown'; -import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../utils/apis'; -import { ServerStatusContext } from '../../utils/server-status-context'; +import { SocialDropdown } from '../../../../components/config/SocialDropdown'; +import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis'; +import { ServerStatusContext } from '../../../../utils/server-status-context'; import { API_SOCIAL_HANDLES, postConfigUpdateToAPI, RESET_TIMEOUT, DEFAULT_SOCIAL_HANDLE, OTHER_SOCIAL_HANDLE_OPTION, -} from '../../utils/config-constants'; -import { SocialHandle, UpdateArgs } from '../../types/config-section'; +} from '../../../../utils/config-constants'; +import { SocialHandle, UpdateArgs } from '../../../../types/config-section'; import { isValidMatrixAccount, isValidAccount, isValidUrl, DEFAULT_TEXTFIELD_URL_PATTERN, -} from '../../utils/urls'; -import { TextField } from './TextField'; -import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses'; -import { FormStatusIndicator } from './FormStatusIndicator'; +} from '../../../../utils/urls'; +import { TextField } from '../../../../components/config/TextField'; +import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses'; +import { FormStatusIndicator } from '../../../../components/config/FormStatusIndicator'; const { Title } = Typography; -export const EditSocialLinks: FC = () => { +export default function EditSocialLinks() { const [availableIconsList, setAvailableIconsList] = useState([]); const [currentSocialHandles, setCurrentSocialHandles] = useState([]); @@ -364,4 +364,4 @@ export const EditSocialLinks: FC = () => { ); -}; +} diff --git a/web/pages/admin/config-public-details.tsx b/web/pages/admin/config/general/GeneralConfig.tsx similarity index 71% rename from web/pages/admin/config-public-details.tsx rename to web/pages/admin/config/general/GeneralConfig.tsx index 24293d657..bbc87f24e 100644 --- a/web/pages/admin/config-public-details.tsx +++ b/web/pages/admin/config/general/GeneralConfig.tsx @@ -1,17 +1,13 @@ import React from 'react'; -import { Typography } from 'antd'; -import { EditInstanceDetails } from '../../components/config/EditInstanceDetails'; -import { EditInstanceTags } from '../../components/config/EditInstanceTags'; -import { EditSocialLinks } from '../../components/config/EditSocialLinks'; -import { EditPageContent } from '../../components/config/EditPageContent'; - -const { Title } = Typography; +import EditInstanceDetails from './EditInstanceDetails'; +import EditInstanceTags from './EditInstanceTags'; +import EditSocialLinks from './EditSocialLinks'; +import EditPageContent from './EditPageContent'; export default function PublicFacingDetails() { return (
- General Settings

The following are displayed on your site to describe your stream and its content.{' '} + , + }, + { + label: `Appearance`, + key: '2', + children: , + }, + ]} + /> +

+ ); +} diff --git a/web/components/config/EditStorage.tsx b/web/pages/admin/config/server/EditStorage.tsx similarity index 91% rename from web/components/config/EditStorage.tsx rename to web/pages/admin/config/server/EditStorage.tsx index 5063f8103..f8de7a7ae 100644 --- a/web/components/config/EditStorage.tsx +++ b/web/pages/admin/config/server/EditStorage.tsx @@ -1,27 +1,27 @@ import { Button, Collapse } from 'antd'; import classNames from 'classnames'; -import React, { useContext, useState, useEffect, FC } from 'react'; -import { UpdateArgs } from '../../types/config-section'; -import { ServerStatusContext } from '../../utils/server-status-context'; -import { AlertMessageContext } from '../../utils/alert-message-context'; +import React, { useContext, useState, useEffect } from 'react'; +import { UpdateArgs } from '../../../../types/config-section'; +import { ServerStatusContext } from '../../../../utils/server-status-context'; +import { AlertMessageContext } from '../../../../utils/alert-message-context'; import { postConfigUpdateToAPI, API_S3_INFO, RESET_TIMEOUT, S3_TEXT_FIELDS_INFO, -} from '../../utils/config-constants'; +} from '../../../../utils/config-constants'; import { createInputStatus, StatusState, STATUS_ERROR, STATUS_PROCESSING, STATUS_SUCCESS, -} from '../../utils/input-statuses'; -import { TextField } from './TextField'; -import { FormStatusIndicator } from './FormStatusIndicator'; -import { isValidUrl } from '../../utils/urls'; -import { ToggleSwitch } from './ToggleSwitch'; +} from '../../../../utils/input-statuses'; +import { TextField } from '../../../../components/config/TextField'; +import { FormStatusIndicator } from '../../../../components/config/FormStatusIndicator'; +import { isValidUrl } from '../../../../utils/urls'; +import { ToggleSwitch } from '../../../../components/config/ToggleSwitch'; const { Panel } = Collapse; @@ -64,7 +64,7 @@ function checkSaveable(formValues: any, currentValues: any) { return false; } -export const EditStorage: FC = () => { +export default function EditStorage() { const [formDataValues, setFormDataValues] = useState(null); const [submitStatus, setSubmitStatus] = useState(null); @@ -255,4 +255,4 @@ export const EditStorage: FC = () => { ); -}; +} diff --git a/web/pages/admin/config-server-details.tsx b/web/pages/admin/config/server/ServerConfig.tsx similarity index 57% rename from web/pages/admin/config-server-details.tsx rename to web/pages/admin/config/server/ServerConfig.tsx index c835ad433..23e9d6c39 100644 --- a/web/pages/admin/config-server-details.tsx +++ b/web/pages/admin/config/server/ServerConfig.tsx @@ -1,15 +1,11 @@ import React from 'react'; -import { Typography } from 'antd'; -import { EditInstanceDetails } from '../../components/config/EditInstanceDetails2'; - -const { Title } = Typography; +import { EditInstanceDetails } from '../../../../components/config/EditInstanceDetails2'; export default function ConfigServerDetails() { return (
- Server Settings

- You should change your stream key from the default and keep it safe. For most people + You should change your admin password from the default and keep it safe. For most people it's likely the other settings will not need to be changed.

diff --git a/web/pages/admin/config-storage.tsx b/web/pages/admin/config/server/StorageConfig.tsx similarity index 85% rename from web/pages/admin/config-storage.tsx rename to web/pages/admin/config/server/StorageConfig.tsx index 02ec3ac61..f3e1d4e78 100644 --- a/web/pages/admin/config-storage.tsx +++ b/web/pages/admin/config/server/StorageConfig.tsx @@ -1,13 +1,9 @@ -import { Typography } from 'antd'; import React from 'react'; -import { EditStorage } from '../../components/config/EditStorage'; - -const { Title } = Typography; +import EditStorage from './EditStorage'; export default function ConfigStorageInfo() { return ( <> - Storage

Owncast supports optionally using external storage providers to stream your video. Learn more about this by visiting our{' '} diff --git a/web/pages/admin/config/streamkeys/index.tsx b/web/pages/admin/config/server/StreamKeys.tsx similarity index 97% rename from web/pages/admin/config/streamkeys/index.tsx rename to web/pages/admin/config/server/StreamKeys.tsx index 48183ce47..aac9b5b3e 100644 --- a/web/pages/admin/config/streamkeys/index.tsx +++ b/web/pages/admin/config/server/StreamKeys.tsx @@ -5,7 +5,7 @@ import { ServerStatusContext } from '../../../../utils/server-status-context'; import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis'; -const { Title, Paragraph } = Typography; +const { Paragraph } = Typography; const { Item } = Form; const saveKeys = async (keys, setError) => { @@ -25,7 +25,6 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE const handleAddKey = (newkey: any) => { const updatedKeys = [...streamKeys, newkey]; - console.log(updatedKeys); setFieldInConfigState({ fieldName: 'streamKeys', value: updatedKeys, @@ -114,7 +113,6 @@ const StreamKeys = () => { return (

- Streaming Keys A streaming key is used with your broadcasting software to authenticate itself to Owncast. Most people will only need one. However, if you share a server with others or you want diff --git a/web/pages/admin/config/server/index.tsx b/web/pages/admin/config/server/index.tsx new file mode 100644 index 000000000..2f380dae1 --- /dev/null +++ b/web/pages/admin/config/server/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Tabs } from 'antd'; + +import StreamKeys from './StreamKeys'; +import ServerConfig from './ServerConfig'; +import StorageConfig from './StorageConfig'; + +export default function PublicFacingDetails() { + return ( +
+ , + }, + { + label: `Stream Keys`, + key: '2', + children: , + }, + { + label: `S3 Object Storage`, + key: '3', + children: , + }, + ]} + /> +
+ ); +}