From c8bf74a719e56afc9c8cc1dc3db65b250059e72b Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Mon, 17 Feb 2025 14:12:20 +0100 Subject: [PATCH] refactor: migrate chakra alert to custom component --- .../components/external-link/ExternalLink.tsx | 11 ++-- .../automations-panel/AutomationForm.tsx | 24 +++------ .../feature-settings-panel/UrlPresetsForm.tsx | 52 +++++++++---------- .../custom-fields/CustomFields.tsx | 28 +++++----- .../panel/general-panel/ViewSettingsForm.tsx | 27 ++++++---- .../panel/interface-panel/InterfacePanel.tsx | 27 ---------- .../panel/sources-panel/GSheetInfo.tsx | 24 ++++----- 7 files changed, 78 insertions(+), 115 deletions(-) delete mode 100644 apps/client/src/features/app-settings/panel/interface-panel/InterfacePanel.tsx diff --git a/apps/client/src/common/components/external-link/ExternalLink.tsx b/apps/client/src/common/components/external-link/ExternalLink.tsx index 9e7f42a59..ab043c555 100644 --- a/apps/client/src/common/components/external-link/ExternalLink.tsx +++ b/apps/client/src/common/components/external-link/ExternalLink.tsx @@ -14,7 +14,6 @@ interface ExternalLinkProps { export default function ExternalLink(props: ExternalLinkProps) { const { href, inline, children } = props; - const classes = cx([style.link, inline ? style.inline : null]); const handleClick = (event: MouseEvent) => { event.preventDefault(); @@ -22,8 +21,14 @@ export default function ExternalLink(props: ExternalLinkProps) { }; return ( - - {children} + + {children} ); } diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx index 312b7ee28..bf5f143c5 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx @@ -1,16 +1,6 @@ import { useEffect, useMemo } from 'react'; import { Controller, useFieldArray, useForm } from 'react-hook-form'; -import { - Alert, - AlertDescription, - AlertIcon, - Button, - IconButton, - Input, - Radio, - RadioGroup, - Select, -} from '@chakra-ui/react'; +import { Button, IconButton, Input, Radio, RadioGroup, Select } from '@chakra-ui/react'; import { IoAdd } from '@react-icons/all-files/io5/IoAdd'; import { IoTrash } from '@react-icons/all-files/io5/IoTrash'; import { Automation, AutomationDTO, HTTPOutput, isHTTPOutput, isOSCOutput, OSCOutput } from 'ontime-types'; @@ -18,6 +8,7 @@ import { Automation, AutomationDTO, HTTPOutput, isHTTPOutput, isOSCOutput, OSCOu import { addAutomation, editAutomation, testOutput } from '../../../../common/api/automation'; import { maybeAxiosError } from '../../../../common/api/utils'; import ExternalLink from '../../../../common/components/external-link/ExternalLink'; +import Info from '../../../../common/components/info/Info'; import Tag from '../../../../common/components/tag/Tag'; import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings'; import useCustomFields from '../../../../common/hooks-query/useCustomFields'; @@ -291,13 +282,10 @@ export default function AutomationForm(props: AutomationFormProps) {

Outputs

- - - - Automation outputs can be used to send data from Ontime to external software. - See the documentation for templates - - + + Automation outputs can be used to send data from Ontime to external software. + See the documentation for templates + {fieldOutputs.map((output, index) => { if (isOSCOutput(output)) { diff --git a/apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx b/apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx index 7385c4034..9b03d6636 100644 --- a/apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx +++ b/apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import { useFieldArray, useForm } from 'react-hook-form'; -import { Alert, AlertDescription, AlertIcon, Button, IconButton, Input, Switch } from '@chakra-ui/react'; +import { Button, IconButton, Input, Switch } from '@chakra-ui/react'; import { IoAdd } from '@react-icons/all-files/io5/IoAdd'; import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline'; import { IoTrash } from '@react-icons/all-files/io5/IoTrash'; @@ -10,6 +10,7 @@ import { postUrlPresets } from '../../../../common/api/urlPresets'; import { maybeAxiosError } from '../../../../common/api/utils'; import TooltipActionBtn from '../../../../common/components/buttons/TooltipActionBtn'; import ExternalLink from '../../../../common/components/external-link/ExternalLink'; +import Info from '../../../../common/components/info/Info'; import useUrlPresets from '../../../../common/hooks-query/useUrlPresets'; import { preventEscape } from '../../../../common/utils/keyEvent'; import { handleLinks } from '../../../../common/utils/linkUtils'; @@ -108,32 +109,29 @@ export default function UrlPresetsForm() { - - - - URL presets are user defined aliases to Ontime URLs -
-
- Preset Name
- The alias for the URL. This will be the URL you will be calling. eg:
- - Preset name cam3 called as{' '} - http://localhost:4001/cam3 - -
- URL Segment
- The corresponding alias path and configuration parameters. eg:
- - URL segment backstage?hidePast=true&stopCycle=true corresponds to - complete URL - http://localhost:4001/backstage?hidePast=true&stopCycle=true - -
- You will need to save the changes before the presets are functional. -
- See the docs - - + + URL presets are user defined aliases to Ontime URLs +
+
+ Preset Name
+ The alias for the URL. This will be the URL you will be calling. eg:
+ + Preset name cam3 called as{' '} + http://localhost:4001/cam3 + +
+ URL Segment
+ The corresponding alias path and configuration parameters. eg:
+ + URL segment backstage?hidePast=true&stopCycle=true corresponds to + complete URL + http://localhost:4001/backstage?hidePast=true&stopCycle=true + +
+ You will need to save the changes before the presets are functional. +
+ See the docs + diff --git a/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx b/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx index 8b3daee5a..f55ff604e 100644 --- a/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx +++ b/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx @@ -1,10 +1,11 @@ import { useState } from 'react'; -import { Alert, AlertDescription, AlertIcon, Button } from '@chakra-ui/react'; +import { Button } from '@chakra-ui/react'; import { IoAdd } from '@react-icons/all-files/io5/IoAdd'; import { CustomField, CustomFieldLabel } from 'ontime-types'; import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields'; import ExternalLink from '../../../../../common/components/external-link/ExternalLink'; +import Info from '../../../../../common/components/info/Info'; import useCustomFields from '../../../../../common/hooks-query/useCustomFields'; import { customFieldsDocsUrl } from '../../../../../externals'; import * as Panel from '../../../panel-utils/PanelUtils'; @@ -55,20 +56,17 @@ export default function CustomFields() { - - - - Custom fields allow for additional information to be added to an event. -
-
- This data is not used by Ontime, but provides place for cueing or department specific information (eg. - light, sound, camera). -
-
- Custom fields can be used width the Integrations feature using the generated key. - See the docs - - + + Custom fields allow for additional information to be added to an event. +
+
+ This data is not used by Ontime, but provides place for cueing or department specific information (eg. + light, sound, camera). +
+
+ Custom fields can be used width the Integrations feature using the generated key. + See the docs + {isAdding && } diff --git a/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx b/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx index a060b54d6..5ef39c2f1 100644 --- a/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx +++ b/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx @@ -1,15 +1,17 @@ import { useEffect } from 'react'; import { Controller, useForm } from 'react-hook-form'; -import { Alert, AlertDescription, AlertIcon, Button, Input, Switch } from '@chakra-ui/react'; +import { Button, Input, Switch } from '@chakra-ui/react'; import { ViewSettings } from 'ontime-types'; import { maybeAxiosError } from '../../../../common/api/utils'; import { postViewSettings } from '../../../../common/api/viewSettings'; import ExternalLink from '../../../../common/components/external-link/ExternalLink'; +import Info from '../../../../common/components/info/Info'; import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker'; import useInfo from '../../../../common/hooks-query/useInfo'; import useViewSettings from '../../../../common/hooks-query/useViewSettings'; import { preventEscape } from '../../../../common/utils/keyEvent'; +import { isOntimeCloud } from '../../../../externals'; import * as Panel from '../../panel-utils/PanelUtils'; const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/'; @@ -85,16 +87,19 @@ export default function ViewSettingsForm() { - - - - You can the Ontime views or customise its styles by modifying the provided CSS file.
- The CSS file is in the user directory at {`${info.publicDir}/user/styles/override.css`} -
-
- See the docs - - + + You can the Ontime views or customise its styles by modifying the provided CSS file. +
+ {!isOntimeCloud && ( + <> +
+ The loaded CSS file is in the user directory at{' '} + {`${info.publicDir}/user/styles/override.css`} +
+ + )} + See the docs + diff --git a/apps/client/src/features/app-settings/panel/interface-panel/InterfacePanel.tsx b/apps/client/src/features/app-settings/panel/interface-panel/InterfacePanel.tsx deleted file mode 100644 index 3496a41c7..000000000 --- a/apps/client/src/features/app-settings/panel/interface-panel/InterfacePanel.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react'; - -import * as Panel from '../../panel-utils/PanelUtils'; - -import EditorSettingsForm from './EditorSettingsForm'; - -export default function InterfacePanel() { - return ( - <> - Interface - - - - - Interface settings -
-
- These concern settings that are applied to this user in this browser. -
- It will not affect other users or other browsers. - - - - - - ); -} diff --git a/apps/client/src/features/app-settings/panel/sources-panel/GSheetInfo.tsx b/apps/client/src/features/app-settings/panel/sources-panel/GSheetInfo.tsx index e05871a33..86e1a0e0c 100644 --- a/apps/client/src/features/app-settings/panel/sources-panel/GSheetInfo.tsx +++ b/apps/client/src/features/app-settings/panel/sources-panel/GSheetInfo.tsx @@ -1,21 +1,17 @@ -import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react'; - import ExternalLink from '../../../../common/components/external-link/ExternalLink'; +import Info from '../../../../common/components/info/Info'; const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadsheet-gsheet/'; export default function GSheetInfo() { return ( - - - - Ontime allows you to synchronize your rundown with a Google Sheet. -
-
- To enable this feature, you will need to generate tokens in your Google account and provide them to Ontime. -
- Once set up, you will be able to synchronize data between Ontime and your Google Sheet.
- See the docs - - + + Ontime allows you to synchronize your rundown with a Google Sheet. +
+
+ To enable this feature, you will need to generate tokens in your Google account and provide them to Ontime. +
+ Once set up, you will be able to synchronize data between Ontime and your Google Sheet.
+ See the docs + ); }