diff --git a/frontend/console/e2e/helpers.ts b/frontend/console/e2e/helpers.ts
index d4de948707..344ace0e99 100644
--- a/frontend/console/e2e/helpers.ts
+++ b/frontend/console/e2e/helpers.ts
@@ -15,6 +15,10 @@ export async function navigateToModule(page: Page, moduleName: string) {
export async function navigateToDecl(page: Page, moduleName: string, declName: string) {
await navigateToModule(page, moduleName)
+ // Some decls are hidden by default because they are not exported, so click
+ // the toggle to make them visible.
+ await page.locator('#hide-exported').click()
+
// Navigate to the decl page
await page.locator(`a#decl-${declName}`).click()
await expect(page).toHaveURL(new RegExp(`/modules/${moduleName}/verb/${declName}`))
diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx
index 192b50b6e8..8c03caeb56 100644
--- a/frontend/console/src/features/modules/ModulesTree.tsx
+++ b/frontend/console/src/features/modules/ModulesTree.tsx
@@ -1,4 +1,4 @@
-import { ArrowRight01Icon, ArrowShrink02Icon, CircleArrowRight02Icon, FileExportIcon, PackageIcon } from 'hugeicons-react'
+import { ArrowRight01Icon, ArrowShrink02Icon, CircleArrowRight02Icon, PackageIcon, Upload01Icon } from 'hugeicons-react'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Link, useParams, useSearchParams } from 'react-router-dom'
import { Multiselect, sortMultiselectOpts } from '../../components/Multiselect'
@@ -12,17 +12,14 @@ import {
declIcon,
declSumTypeIsExported,
declUrlFromInfo,
+ getHideUnexportedFromLocalStorage,
+ hasHideUnexportedInLocalStorage,
listExpandedModulesFromLocalStorage,
+ setHideUnexportedFromLocalStorage,
toggleModuleExpansionInLocalStorage,
} from './module.utils'
import { declTypeMultiselectOpts } from './schema/schema.utils'
-const ExportedIcon = () => (
-
-
-
-)
-
const DeclNode = ({ decl, href, isSelected }: { decl: DeclInfo; href: string; isSelected: boolean }) => {
const declRef = useRef(null)
@@ -45,12 +42,12 @@ const DeclNode = ({ decl, href, isSelected }: { decl: DeclInfo; href: string; is
ref={declRef}
className={classNames(
isSelected ? 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
+ declSumTypeIsExported(decl.value) ? '' : 'text-gray-400 dark:text-gray-500',
'group flex items-center gap-x-2 pl-4 pr-2 text-sm font-light leading-6 w-full cursor-pointer scroll-mt-10',
)}
>
{decl.value.name}
- {declSumTypeIsExported(decl.value) ? : []}
@@ -62,7 +59,8 @@ const ModuleSection = ({
isExpanded,
toggleExpansion,
selectedDeclTypes,
-}: { module: ModuleTreeItem; isExpanded: boolean; toggleExpansion: (m: string) => void; selectedDeclTypes: MultiselectOpt[] }) => {
+ hideUnexported,
+}: { module: ModuleTreeItem; isExpanded: boolean; toggleExpansion: (m: string) => void; selectedDeclTypes: MultiselectOpt[]; hideUnexported: boolean }) => {
const { moduleName, declName } = useParams()
const isSelected = useMemo(() => moduleName === module.name, [moduleName, module.name])
const moduleRef = useRef(null)
@@ -78,7 +76,13 @@ const ModuleSection = ({
}
}, [moduleName]) // moduleName is the selected module; module.name is the one being rendered
- const filteredDecls = useMemo(() => module.decls.filter((d) => !!selectedDeclTypes.find((o) => o.key === d.declType)), [module.decls, selectedDeclTypes])
+ const filteredDecls = useMemo(
+ () =>
+ module.decls
+ .filter((d) => !!selectedDeclTypes.find((o) => o.key === d.declType))
+ .filter((d) => !hideUnexported || (isSelected && declName === d.value.name) || declSumTypeIsExported(d.value)),
+ [module.decls, selectedDeclTypes, hideUnexported],
+ )
return (
@@ -130,6 +134,8 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => {
setExpandedModules(listExpandedModulesFromLocalStorage())
}, [moduleName, declName])
+ const [hideUnexported, setHideUnexported] = useState(hasHideUnexportedInLocalStorage() ? getHideUnexportedFromLocalStorage() : true)
+
function msOnChange(opts: MultiselectOpt[]) {
const params = new URLSearchParams()
if (opts.length !== declTypeMultiselectOpts.length) {
@@ -154,17 +160,32 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => {
setExpandedModules(listExpandedModulesFromLocalStorage())
}
+ function setHideUnexportedState(val: boolean) {
+ setHideUnexportedFromLocalStorage(val)
+ setHideUnexported(val)
+ }
+
modules.sort((m1, m2) => Number(m1.isBuiltin) - Number(m2.isBuiltin))
return (