From 31cc6f076774e327b5b9029f9a39e68b1571cb8c Mon Sep 17 00:00:00 2001 From: Julian Waller Date: Sun, 13 Oct 2024 20:38:31 +0100 Subject: [PATCH] wip: versions visibility --- webui/src/Modules/ModuleManagePanel.tsx | 68 +------------- webui/src/Modules/ModuleVersionsTable.tsx | 106 +++++++++++----------- 2 files changed, 60 insertions(+), 114 deletions(-) diff --git a/webui/src/Modules/ModuleManagePanel.tsx b/webui/src/Modules/ModuleManagePanel.tsx index 284b0a4506..4b5b74e785 100644 --- a/webui/src/Modules/ModuleManagePanel.tsx +++ b/webui/src/Modules/ModuleManagePanel.tsx @@ -1,40 +1,12 @@ -import React, { useCallback, useContext, useEffect, useMemo, useState, version } from 'react' -import { ConnectionsContext, LoadingRetryOrError, socketEmitPromise } from '../util.js' -import { CRow, CCol, CButton, CFormSelect, CAlert } from '@coreui/react' -import { TextInputField } from '../Components/index.js' -import { nanoid } from 'nanoid' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { - faLock, - faPlug, - faPlus, - faQuestion, - faQuestionCircle, - faStar, - faSync, - faToiletsPortable, - faTrash, - faWarning, -} from '@fortawesome/free-solid-svg-icons' -import { isLabelValid } from '@companion-app/shared/Label.js' -import { ClientConnectionConfig } from '@companion-app/shared/Model/Common.js' -import { useOptionsAndIsVisible } from '../Hooks/useOptionsAndIsVisible.js' -import { ExtendedInputField } from '@companion-app/shared/Model/Options.js' +import React, { useContext, useEffect, useState } from 'react' +import { socketEmitPromise } from '../util.js' +import { CRow, CCol } from '@coreui/react' import { RootAppStoreContext } from '../Stores/RootAppStore.js' import { observer } from 'mobx-react-lite' -import type { - ModuleVersionInfo, - ModuleVersionMode, - NewClientModuleInfo, - NewClientModuleVersionInfo2, -} from '@companion-app/shared/Model/ModuleInfo.js' -import { ModuleStoreModuleInfoStore, ModuleStoreModuleInfoVersion } from '@companion-app/shared/Model/ModulesStore.js' +import type { NewClientModuleInfo, NewClientModuleVersionInfo2 } from '@companion-app/shared/Model/ModuleInfo.js' +import { ModuleStoreModuleInfoStore } from '@companion-app/shared/Model/ModulesStore.js' import { RefreshModuleInfo } from './RefreshModuleInfo.js' -import semver from 'semver' -import { faDochub } from '@fortawesome/free-brands-svg-icons' -import { toJS } from 'mobx' import { LastUpdatedTimestamp } from './LastUpdatedTimestamp.js' -import { isModuleApiVersionCompatible } from '@companion-app/shared/ModuleApiVersionCheck.js' import { ModuleVersionsTable } from './ModuleVersionsTable.js' import { CustomModuleVersionsTable } from './CustomModuleVersionsTable.js' @@ -88,38 +60,8 @@ const ModuleManagePanelInner = observer(function ModuleManagePanelInner({ }: ModuleManagePanelInnerProps) { const { socket } = useContext(RootAppStoreContext) - const [error, setError] = useState(null) - const [reloadToken, setReloadToken] = useState(nanoid()) - const moduleStoreInfo = useModuleStoreInfo(moduleId) - const doRetryConfigLoad = useCallback(() => setReloadToken(nanoid()), []) - - /** - * Store/builtin Versions table - * sorted by version number - * Install/uninstall button - * plug icon indicating in use (hover for a count) - * Icon indicating latest stable - * Icon indicating latest prerelease - * Indicate prerelease in version number field? - * Options to filter to just installed/available - * - * Above table, show when info last refreshed, and a button to refresh - * quick option to install latest? - * - * filter by installed/available with extra option to show deprecated (default hidden) - * also option to show prerelease (default hidden) - * - * should stable and prerelease be separate? - * - * - * Separate table of 'custom' modules? - * I am tempted to combine them, but as numbers can collide will that be confusing? - * - * - */ - return (
diff --git a/webui/src/Modules/ModuleVersionsTable.tsx b/webui/src/Modules/ModuleVersionsTable.tsx index c994911372..cf43dc6935 100644 --- a/webui/src/Modules/ModuleVersionsTable.tsx +++ b/webui/src/Modules/ModuleVersionsTable.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useContext, useState } from 'react' import { socketEmitPromise } from '../util.js' -import { CButton } from '@coreui/react' +import { CButton, CButtonGroup } from '@coreui/react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faLock, @@ -19,6 +19,7 @@ import { ModuleStoreModuleInfoStore, ModuleStoreModuleInfoVersion } from '@compa import semver from 'semver' import { isModuleApiVersionCompatible } from '@companion-app/shared/ModuleApiVersionCheck.js' import { ModuleVersionUsageIcon } from './ModuleVersionUsageIcon.js' +import { useTableVisibilityHelper, VisibilityButton } from '../Components/TableVisibility.js' interface ModuleVersionsTableProps { moduleInfo: NewClientModuleInfo @@ -45,66 +46,62 @@ export const ModuleVersionsTable = observer(function ModuleVersionsTable({ const allVersionNumbers = Array.from(allVersionsSet).sort((a, b) => semver.compare(b, a)) + const visibleVersions = useTableVisibilityHelper( + `modules_visible_versions:${moduleInfo.baseInfo.id}`, + { + availableStable: true, + availableDeprecated: false, + availablePrerelease: false, + } + ) + return ( + - {allVersionNumbers.map((versionId) => ( - - ))} + {allVersionNumbers.map((versionId) => { + const storeInfo = storeModuleVersions.get(versionId) + const installedInfo = installedModuleVersions.get(versionId) + if (storeInfo) { + // Hide based on visibility settings + if (storeInfo.deprecationReason && !visibleVersions.visiblity.availableDeprecated) return null + if (storeInfo.isPrerelease && !visibleVersions.visiblity.availablePrerelease) return null + + if ( + !storeInfo.deprecationReason && + !storeInfo.isPrerelease && + !installedInfo && + !visibleVersions.visiblity.availableStable + ) + return null + } + + return ( + + ) + })} {/* {hiddenCount > 0 && (
Version  - {/* - - Dev - - - Builtin - - - Store - - - Custom - - */} + + + + +
@@ -118,6 +115,12 @@ export const ModuleVersionsTable = observer(function ModuleVersionsTable({ ) }) +interface VisibleVersionsState { + availableStable: boolean + availableDeprecated: boolean + availablePrerelease: boolean +} + interface ModuleVersionRowProps { moduleId: string versionId: string @@ -153,6 +156,7 @@ const ModuleVersionRow = observer(function ModuleVersionRow({ {versionId} + {storeInfo?.isPrerelease && } {storeInfo?.deprecationReason && } {storeInfo?.releasedAt ? new Date(storeInfo?.releasedAt).toDateString() : 'Unknown'}