diff --git a/hyperglass/ui/components/ColorModeToggle.js b/hyperglass/ui/components/ColorModeToggle.js
deleted file mode 100644
index e0f377d..0000000
--- a/hyperglass/ui/components/ColorModeToggle.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { forwardRef } from 'react';
-import { Button, useColorMode } from '@chakra-ui/core';
-
-const Sun = ({ color, size = '1.5rem', ...props }) => (
-
-);
-
-const Moon = ({ color, size = '1.5rem', ...props }) => (
-
-);
-
-const iconMap = { dark: Moon, light: Sun };
-const outlineColor = { dark: 'primary.300', light: 'primary.600' };
-
-export const ColorModeToggle = forwardRef((props, ref) => {
- const { colorMode, toggleColorMode } = useColorMode();
- const Icon = iconMap[colorMode];
-
- const label = `Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`;
-
- return (
-
- );
-});
diff --git a/hyperglass/ui/components/FormField.js b/hyperglass/ui/components/FormField.js
deleted file mode 100644
index 7d1f4ad..0000000
--- a/hyperglass/ui/components/FormField.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Flex, FormControl, FormLabel, FormErrorMessage, useColorMode } from '@chakra-ui/core';
-
-const labelColor = { dark: 'whiteAlpha.700', light: 'blackAlpha.700' };
-
-export const FormField = ({
- label,
- name,
- error,
- hiddenLabels,
- helpIcon,
- targetInfo,
- setTarget,
- labelAddOn,
- fieldAddOn,
- children,
- ...props
-}) => {
- const { colorMode } = useColorMode();
-
- return (
-
-
- {label}
- {labelAddOn || null}
-
- {children}
- {fieldAddOn && (
-
- {fieldAddOn}
-
- )}
-
- {error && error.message}
-
-
- );
-};
diff --git a/hyperglass/ui/components/Greeting.js b/hyperglass/ui/components/Greeting.js
deleted file mode 100644
index fd79296..0000000
--- a/hyperglass/ui/components/Greeting.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import {
- Button,
- Modal,
- ModalOverlay,
- ModalContent,
- ModalHeader,
- ModalFooter,
- ModalBody,
- ModalCloseButton,
- useColorMode,
- useDisclosure,
-} from '@chakra-ui/core';
-import { Markdown } from 'app/components';
-import { motion } from 'framer-motion';
-
-const bg = { light: 'white', dark: 'black' };
-const color = { light: 'black', dark: 'white' };
-
-const AnimatedModalContent = motion.custom(ModalContent);
-const AnimatedModalOverlay = motion.custom(ModalOverlay);
-
-export const Greeting = ({ greetingConfig, content, onClickThrough }) => {
- const { isOpen, onOpen, onClose } = useDisclosure(true);
- const { colorMode } = useColorMode();
-
- const handleClick = () => {
- onClickThrough(true);
- onClose();
- };
-
- return (
-
-
-
- {greetingConfig.title}
- {!greetingConfig.required && }
-
-
-
-
-
-
-
-
- );
-};
diff --git a/hyperglass/ui/components/Layout.js b/hyperglass/ui/components/Layout.js
deleted file mode 100644
index abd3e03..0000000
--- a/hyperglass/ui/components/Layout.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { useRef } from 'react';
-import { Flex, useColorMode } from '@chakra-ui/core';
-import { useConfig, useHyperglassState } from 'app/context';
-import { Debugger, Greeting, Footer, Header } from 'app/components';
-
-const bg = { light: 'white', dark: 'black' };
-const color = { light: 'black', dark: 'white' };
-
-export const Layout = ({ children }) => {
- const config = useConfig();
- const { colorMode } = useColorMode();
- const { greetingAck, setGreetingAck, setSubmitting, setFormData } = useHyperglassState();
- const containerRef = useRef(null);
-
- const resetForm = () => {
- containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
- setSubmitting(false);
- setFormData({});
- };
-
- return (
- <>
-
-
-
-
-
- {children}
-
-
- {config.developer_mode && }
-
- {config.web.greeting.enable && !greetingAck && (
-
- )}
-
- );
-};
diff --git a/hyperglass/ui/components/RequeryButton.js b/hyperglass/ui/components/RequeryButton.js
deleted file mode 100644
index da0d4fb..0000000
--- a/hyperglass/ui/components/RequeryButton.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Button, Icon, Tooltip } from '@chakra-ui/core';
-
-export const RequeryButton = ({ requery, bg = 'secondary', ...props }) => (
-
-
-
-);
diff --git a/hyperglass/ui/components/animated.ts b/hyperglass/ui/components/Util/animated.ts
similarity index 100%
rename from hyperglass/ui/components/animated.ts
rename to hyperglass/ui/components/Util/animated.ts
diff --git a/hyperglass/ui/components/Util/index.ts b/hyperglass/ui/components/Util/index.ts
index 4c0abb0..d7a1522 100644
--- a/hyperglass/ui/components/Util/index.ts
+++ b/hyperglass/ui/components/Util/index.ts
@@ -1 +1,2 @@
+export * from './animated';
export * from './if';
diff --git a/hyperglass/ui/components/buttons/colorMode.tsx b/hyperglass/ui/components/buttons/colorMode.tsx
new file mode 100644
index 0000000..8f1c584
--- /dev/null
+++ b/hyperglass/ui/components/buttons/colorMode.tsx
@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import dynamic from 'next/dynamic';
+import { Button, Icon } from '@chakra-ui/react';
+import { If } from '~/components';
+import { useColorMode, useColorValue } from '~/context';
+
+import type { TColorModeToggle } from './types';
+
+const Sun = dynamic(() => import('@meronex/icons/hi').then(i => i.HiSun));
+const Moon = dynamic(() => import('@meronex/icons/hi').then(i => i.HiMoon));
+
+const outlineColor = { dark: 'primary.300', light: 'primary.600' };
+
+export const ColorModeToggle = forwardRef((props, ref) => {
+ const { size = '1.5rem', ...rest } = props;
+ const { colorMode, toggleColorMode } = useColorMode();
+
+ const label = useColorValue('Switch to dark mode', 'Switch to light mode');
+
+ return (
+
+ );
+});
diff --git a/hyperglass/ui/components/copyButton/copyButton.tsx b/hyperglass/ui/components/buttons/copy.tsx
similarity index 100%
rename from hyperglass/ui/components/copyButton/copyButton.tsx
rename to hyperglass/ui/components/buttons/copy.tsx
diff --git a/hyperglass/ui/components/buttons/index.ts b/hyperglass/ui/components/buttons/index.ts
new file mode 100644
index 0000000..134ee4b
--- /dev/null
+++ b/hyperglass/ui/components/buttons/index.ts
@@ -0,0 +1,5 @@
+export * from './colorMode';
+export * from './copy';
+export * from './requery';
+export * from './reset';
+export * from './submit';
diff --git a/hyperglass/ui/components/buttons/requery.tsx b/hyperglass/ui/components/buttons/requery.tsx
new file mode 100644
index 0000000..ba373f5
--- /dev/null
+++ b/hyperglass/ui/components/buttons/requery.tsx
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+import { Button, Icon, Tooltip } from '@chakra-ui/react';
+
+import type { TRequeryButton } from './types';
+
+const Repeat = dynamic(() => import('@meronex/icons/fi').then(i => i.FiRepeat));
+
+export const RequeryButton = (props: TRequeryButton) => {
+ const { requery, bg = 'secondary', ...rest } = props;
+ return (
+
+
+
+ );
+};
diff --git a/hyperglass/ui/components/resetButton.tsx b/hyperglass/ui/components/buttons/reset.tsx
similarity index 100%
rename from hyperglass/ui/components/resetButton.tsx
rename to hyperglass/ui/components/buttons/reset.tsx
diff --git a/hyperglass/ui/components/submitButton/submitButton.tsx b/hyperglass/ui/components/buttons/submit.tsx
similarity index 100%
rename from hyperglass/ui/components/submitButton/submitButton.tsx
rename to hyperglass/ui/components/buttons/submit.tsx
diff --git a/hyperglass/ui/components/submitButton/types.ts b/hyperglass/ui/components/buttons/types.ts
similarity index 50%
rename from hyperglass/ui/components/submitButton/types.ts
rename to hyperglass/ui/components/buttons/types.ts
index 2226690..a28e74b 100644
--- a/hyperglass/ui/components/submitButton/types.ts
+++ b/hyperglass/ui/components/buttons/types.ts
@@ -1,5 +1,12 @@
-import { BoxProps } from '@chakra-ui/react';
+import type { BoxProps, ButtonProps } from '@chakra-ui/react';
+export interface TCopyButton extends ButtonProps {
+ copyValue: string;
+}
+
+export interface TColorModeToggle extends ButtonProps {
+ size?: string;
+}
export type TButtonSizeMap = {
xs: BoxProps;
sm: BoxProps;
@@ -15,3 +22,7 @@ export interface TSubmitButton extends BoxProps {
size: keyof TButtonSizeMap;
loadingText: string;
}
+
+export interface TRequeryButton extends ButtonProps {
+ requery(): void;
+}
diff --git a/hyperglass/ui/components/copyButton/index.ts b/hyperglass/ui/components/copyButton/index.ts
deleted file mode 100644
index 8fbb18e..0000000
--- a/hyperglass/ui/components/copyButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './copyButton';
diff --git a/hyperglass/ui/components/copyButton/types.ts b/hyperglass/ui/components/copyButton/types.ts
deleted file mode 100644
index 48d4b2f..0000000
--- a/hyperglass/ui/components/copyButton/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ButtonProps } from '@chakra-ui/react';
-
-export interface TCopyButton extends ButtonProps {
- copyValue: string;
-}
diff --git a/hyperglass/ui/components/Debugger.js b/hyperglass/ui/components/debugger.tsx
similarity index 65%
rename from hyperglass/ui/components/Debugger.js
rename to hyperglass/ui/components/debugger.tsx
index db048ba..52732e7 100644
--- a/hyperglass/ui/components/Debugger.js
+++ b/hyperglass/ui/components/debugger.tsx
@@ -1,55 +1,48 @@
-import * as React from 'react';
import {
- Button,
+ Tag,
Modal,
+ Stack,
+ Button,
+ useTheme,
+ ModalBody,
+ ModalHeader,
ModalOverlay,
ModalContent,
- ModalHeader,
- ModalBody,
- ModalCloseButton,
- Stack,
- Tag,
- useDisclosure,
useColorMode,
- useTheme,
-} from '@chakra-ui/core';
-import { useConfig, useMedia } from 'app/context';
-import { CodeBlock } from 'app/components';
-
-const prettyMediaSize = {
- sm: 'SMALL',
- md: 'MEDIUM',
- lg: 'LARGE',
- xl: 'X-LARGE',
-};
+ useDisclosure,
+ ModalCloseButton,
+} from '@chakra-ui/react';
+import { useConfig, useColorValue, useBreakpointValue } from '~/context';
+import { CodeBlock } from '~/components';
export const Debugger = () => {
const { isOpen: configOpen, onOpen: onConfigOpen, onClose: configClose } = useDisclosure();
const { isOpen: themeOpen, onOpen: onThemeOpen, onClose: themeClose } = useDisclosure();
+ const { colorMode } = useColorMode();
const config = useConfig();
const theme = useTheme();
- const bg = { light: 'white', dark: 'black' };
- const color = { light: 'black', dark: 'white' };
- const { colorMode } = useColorMode();
- const { mediaSize } = useMedia();
- const borderColor = { light: 'gray.100', dark: 'gray.600' };
+ const bg = useColorValue('white', 'black');
+ const color = useColorValue('black', 'white');
+ const borderColor = useColorValue('gray.100', 'gray.600');
+ const mediaSize =
+ useBreakpointValue({ base: 'SMALL', md: 'MEDIUM', lg: 'LARGE', xl: 'X-LARGE' }) ?? 'UNKNOWN';
return (
<>
+ borderWidth="1px"
+ position="relative"
+ justifyContent="center"
+ borderColor={borderColor}>
{colorMode.toUpperCase()}
- {prettyMediaSize[mediaSize]}
+ {mediaSize}
@@ -59,12 +52,7 @@ export const Debugger = () => {
-
+
Loaded Configuration
@@ -74,12 +62,7 @@ export const Debugger = () => {
-
+
Loaded Theme
diff --git a/hyperglass/ui/components/form/field.tsx b/hyperglass/ui/components/form/field.tsx
new file mode 100644
index 0000000..1f7dc7e
--- /dev/null
+++ b/hyperglass/ui/components/form/field.tsx
@@ -0,0 +1,44 @@
+import { Flex, FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react';
+import { If } from '~/components';
+import { useColorValue } from '~/context';
+import { useBooleanValue } from '~/hooks';
+
+import { TField } from './types';
+
+export const FormField = (props: TField) => {
+ const { label, name, error, hiddenLabels, labelAddOn, fieldAddOn, children, ...rest } = props;
+ const labelColor = useColorValue('blackAlpha.700', 'whiteAlpha.700');
+ const opacity = useBooleanValue(hiddenLabels, 0, undefined);
+ return (
+
+
+ {label}
+ {labelAddOn}
+
+ {children}
+
+
+ {fieldAddOn}
+
+
+ {error && error.message}
+
+ );
+};
diff --git a/hyperglass/ui/components/form/index.ts b/hyperglass/ui/components/form/index.ts
new file mode 100644
index 0000000..2ae91b3
--- /dev/null
+++ b/hyperglass/ui/components/form/index.ts
@@ -0,0 +1 @@
+export * from './field';
diff --git a/hyperglass/ui/components/form/types.ts b/hyperglass/ui/components/form/types.ts
new file mode 100644
index 0000000..cbb2f74
--- /dev/null
+++ b/hyperglass/ui/components/form/types.ts
@@ -0,0 +1,11 @@
+import type { FormControlProps } from '@chakra-ui/react';
+import type { FieldError } from 'react-hook-form';
+
+export interface TField extends FormControlProps {
+ name: string;
+ label: string;
+ error?: FieldError;
+ hiddenLabels: boolean;
+ labelAddOn?: React.ReactNode;
+ fieldAddOn?: React.ReactNode;
+}
diff --git a/hyperglass/ui/components/greeting/greeting.tsx b/hyperglass/ui/components/greeting/greeting.tsx
new file mode 100644
index 0000000..05e44e7
--- /dev/null
+++ b/hyperglass/ui/components/greeting/greeting.tsx
@@ -0,0 +1,62 @@
+import {
+ Modal,
+ Button,
+ ModalBody,
+ ModalHeader,
+ ModalFooter,
+ ModalOverlay,
+ ModalContent,
+ useDisclosure,
+ ModalCloseButton,
+} from '@chakra-ui/react';
+import { If, Markdown } from '~/components';
+import { useConfig, useColorValue } from '~/context';
+
+import type { TGreeting } from './types';
+
+export const Greeting = (props: TGreeting) => {
+ const { onClickThrough, ...rest } = props;
+ const { web, content } = useConfig();
+ const { isOpen, onClose } = useDisclosure();
+
+ const bg = useColorValue('white', 'black');
+ const color = useColorValue('black', 'white');
+
+ function handleClick(): void {
+ onClickThrough();
+ onClose();
+ return;
+ }
+
+ return (
+
+
+
+ {web.greeting.title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/hyperglass/ui/components/greeting/index.ts b/hyperglass/ui/components/greeting/index.ts
new file mode 100644
index 0000000..fe2d50b
--- /dev/null
+++ b/hyperglass/ui/components/greeting/index.ts
@@ -0,0 +1 @@
+export * from './greeting';
diff --git a/hyperglass/ui/components/greeting/types.ts b/hyperglass/ui/components/greeting/types.ts
new file mode 100644
index 0000000..2cc634e
--- /dev/null
+++ b/hyperglass/ui/components/greeting/types.ts
@@ -0,0 +1,5 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export interface TGreeting extends BoxProps {
+ onClickThrough(): void;
+}
diff --git a/hyperglass/ui/components/index.ts b/hyperglass/ui/components/index.ts
index f11c7d3..f8deda0 100644
--- a/hyperglass/ui/components/index.ts
+++ b/hyperglass/ui/components/index.ts
@@ -1,35 +1,29 @@
-export * from './animated';
-export * from './bgpTable';
+export * from './buttons';
export * from './card';
export * from './ChakraSelect';
export * from './codeBlock';
-export * from './ColorModeToggle';
export * from './CommunitySelect';
-export * from './copyButton';
export * from './countdown';
-export * from './Debugger';
+export * from './debugger';
export * from './footer';
-export * from './FormField';
-export * from './Greeting';
+export * from './form';
+export * from './greeting';
export * from './header';
export * from './HelpModal';
export * from './HyperglassForm';
export * from './label';
-export * from './Layout';
+export * from './layout';
export * from './loading';
export * from './LookingGlass';
export * from './markdown';
export * from './meta';
+export * from './output';
export * from './QueryLocation';
export * from './QueryTarget';
export * from './QueryType';
export * from './QueryVrf';
-export * from './RequeryButton';
-export * from './resetButton';
export * from './ResolvedTarget';
export * from './results';
-export * from './submitButton';
export * from './table';
-export * from './textOutput';
export * from './Title';
export * from './util';
diff --git a/hyperglass/ui/components/layout.tsx b/hyperglass/ui/components/layout.tsx
new file mode 100644
index 0000000..055c9c9
--- /dev/null
+++ b/hyperglass/ui/components/layout.tsx
@@ -0,0 +1,58 @@
+import { useRef } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { useConfig, useColorValue, useGlobalState } from '~/context';
+import { If, Debugger, Greeting, Footer, Header } from '~/components';
+import { useGreeting } from '~/hooks';
+
+export const Layout: React.FC = props => {
+ const { web, developer_mode } = useConfig();
+ const { isSubmitting, formData } = useGlobalState();
+ const [greetingAck, setGreetingAck] = useGreeting();
+
+ const bg = useColorValue('white', 'black');
+ const color = useColorValue('black', 'white');
+
+ const containerRef = useRef({} as HTMLDivElement);
+
+ function resetForm(): void {
+ containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ isSubmitting.set(false);
+ formData.set({ query_location: [], query_target: '', query_type: '', query_vrf: '' });
+ return;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/hyperglass/ui/components/bgpTable/cell.tsx b/hyperglass/ui/components/output/cell.tsx
similarity index 100%
rename from hyperglass/ui/components/bgpTable/cell.tsx
rename to hyperglass/ui/components/output/cell.tsx
diff --git a/hyperglass/ui/components/bgpTable/fields.tsx b/hyperglass/ui/components/output/fields.tsx
similarity index 100%
rename from hyperglass/ui/components/bgpTable/fields.tsx
rename to hyperglass/ui/components/output/fields.tsx
diff --git a/hyperglass/ui/components/bgpTable/index.ts b/hyperglass/ui/components/output/index.ts
similarity index 51%
rename from hyperglass/ui/components/bgpTable/index.ts
rename to hyperglass/ui/components/output/index.ts
index 01643f0..c22d499 100644
--- a/hyperglass/ui/components/bgpTable/index.ts
+++ b/hyperglass/ui/components/output/index.ts
@@ -1 +1,2 @@
export * from './table';
+export * from './text';
diff --git a/hyperglass/ui/components/bgpTable/table.tsx b/hyperglass/ui/components/output/table.tsx
similarity index 100%
rename from hyperglass/ui/components/bgpTable/table.tsx
rename to hyperglass/ui/components/output/table.tsx
diff --git a/hyperglass/ui/components/textOutput/textOutput.tsx b/hyperglass/ui/components/output/text.tsx
similarity index 100%
rename from hyperglass/ui/components/textOutput/textOutput.tsx
rename to hyperglass/ui/components/output/text.tsx
diff --git a/hyperglass/ui/components/bgpTable/types.ts b/hyperglass/ui/components/output/types.ts
similarity index 81%
rename from hyperglass/ui/components/bgpTable/types.ts
rename to hyperglass/ui/components/output/types.ts
index be1f3bd..b5e1a7f 100644
--- a/hyperglass/ui/components/bgpTable/types.ts
+++ b/hyperglass/ui/components/output/types.ts
@@ -1,6 +1,10 @@
-import type { FlexProps, TextProps } from '@chakra-ui/react';
+import type { BoxProps, FlexProps, TextProps } from '@chakra-ui/react';
import type { CellProps } from 'react-table';
+export interface TTextOutput extends Omit {
+ children: string;
+}
+
export interface TActive {
isActive: boolean;
}
diff --git a/hyperglass/ui/components/submitButton/index.ts b/hyperglass/ui/components/submitButton/index.ts
deleted file mode 100644
index 10bf562..0000000
--- a/hyperglass/ui/components/submitButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './submitButton';
diff --git a/hyperglass/ui/components/textOutput/index.ts b/hyperglass/ui/components/textOutput/index.ts
deleted file mode 100644
index 5351348..0000000
--- a/hyperglass/ui/components/textOutput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './textOutput';
diff --git a/hyperglass/ui/components/textOutput/types.ts b/hyperglass/ui/components/textOutput/types.ts
deleted file mode 100644
index 701a3c2..0000000
--- a/hyperglass/ui/components/textOutput/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { BoxProps } from '@chakra-ui/react';
-
-export interface TTextOutput extends Omit {
- children: string;
-}
diff --git a/hyperglass/ui/context/HyperglassProvider.tsx b/hyperglass/ui/context/HyperglassProvider.tsx
index 6ef1113..f9ee4bf 100644
--- a/hyperglass/ui/context/HyperglassProvider.tsx
+++ b/hyperglass/ui/context/HyperglassProvider.tsx
@@ -34,4 +34,8 @@ export const useMobile = (): boolean =>
export const useColorToken = (light: string, dark: string): ValueOf =>
useColorModeValue(useToken('colors', light), useToken('colors', dark));
-export { useColorModeValue as useColorValue, useBreakpointValue } from '@chakra-ui/react';
+export {
+ useColorMode,
+ useBreakpointValue,
+ useColorModeValue as useColorValue,
+} from '@chakra-ui/react';
diff --git a/hyperglass/ui/hooks/index.ts b/hyperglass/ui/hooks/index.ts
index 351bc72..f6915b8 100644
--- a/hyperglass/ui/hooks/index.ts
+++ b/hyperglass/ui/hooks/index.ts
@@ -1,5 +1,6 @@
-export * from './useStrf';
export * from './useBooleanValue';
+export * from './useGreeting';
export * from './useOpposingColor';
-export * from './useTableToString';
export * from './useSessionStorage';
+export * from './useStrf';
+export * from './useTableToString';
diff --git a/hyperglass/ui/hooks/types.ts b/hyperglass/ui/hooks/types.ts
index 56160bf..6fb647b 100644
--- a/hyperglass/ui/hooks/types.ts
+++ b/hyperglass/ui/hooks/types.ts
@@ -6,3 +6,5 @@ export interface TOpposingOptions {
export interface TStringTableData extends Omit {
output: TStructuredResponse;
}
+
+export type TUseGreetingReturn = [boolean, () => void];
diff --git a/hyperglass/ui/hooks/useGreeting.ts b/hyperglass/ui/hooks/useGreeting.ts
new file mode 100644
index 0000000..2f6b07b
--- /dev/null
+++ b/hyperglass/ui/hooks/useGreeting.ts
@@ -0,0 +1,18 @@
+import { useState } from '@hookstate/core';
+import { Persistence } from '@hookstate/persistence';
+
+import type { TUseGreetingReturn } from './types';
+
+export function useGreeting(): TUseGreetingReturn {
+ const state = useState(false);
+ state.attach(Persistence('plugin-persisted-data-key'));
+
+ function setAck(): void {
+ if (!state.get()) {
+ state.set(true);
+ }
+ return;
+ }
+
+ return [state.value, setAck];
+}
diff --git a/hyperglass/ui/package.json b/hyperglass/ui/package.json
index 62003d1..228e67d 100644
--- a/hyperglass/ui/package.json
+++ b/hyperglass/ui/package.json
@@ -19,6 +19,7 @@
"@emotion/react": "^11.1.1",
"@emotion/styled": "^11.0.0",
"@hookstate/core": "^3.0.1",
+ "@hookstate/persistence": "^3.0.0",
"@meronex/icons": "^4.0.0",
"add": "^2.0.6",
"axios": "^0.19.2",
diff --git a/hyperglass/ui/types/config.ts b/hyperglass/ui/types/config.ts
index 78fb15b..576cecb 100644
--- a/hyperglass/ui/types/config.ts
+++ b/hyperglass/ui/types/config.ts
@@ -42,11 +42,18 @@ export interface IConfigWebText {
rpki_unverified: string;
}
+export interface TConfigGreeting {
+ enable: boolean;
+ title: string;
+ button: string;
+ required: boolean;
+}
+
export interface IConfigWeb {
credit: { enable: boolean };
dns_provider: { name: string; url: string };
external_link: { enable: boolean; title: string; url: string };
- greeting: { enable: boolean; title: string; button: string; required: boolean };
+ greeting: TConfigGreeting;
help_menu: { enable: boolean; title: string };
logo: { width: string; height: string | null; light_format: string; dark_format: string };
terms: { enable: boolean; title: string };
diff --git a/hyperglass/ui/yarn.lock b/hyperglass/ui/yarn.lock
index 3bc2633..143d177 100644
--- a/hyperglass/ui/yarn.lock
+++ b/hyperglass/ui/yarn.lock
@@ -1790,6 +1790,11 @@
resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-3.0.1.tgz#dc46ea71e3bf0ab5c2dc024029c9210ed12fbb84"
integrity sha512-buRie83l3FYPLCuaBE68puE3XS19r2O+jwC/kH2ikIW7ww8AavndR3MspzMMkNpq2zL8pZtIcpiWJBbn4Uq2Vw==
+"@hookstate/persistence@^3.0.0":
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/@hookstate/persistence/-/persistence-3.0.0.tgz#973b30d3a3bb1b29f4f59b1afe0d914e71a23882"
+ integrity sha512-xiN22IW0Wjw/uTV1OEUpTtqB8DAJyRobYR3+iv1TyMf72o98KpaZqQrLPvXkfrjlZac5s052BypjpkttX/Cmhw==
+
"@meronex/icons@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@meronex/icons/-/icons-4.0.0.tgz#26e089a8a4ec176a5b6778fd54fcdd25b4746c67"