You don't have any configurations created yet, you can start by
@@ -40,14 +32,12 @@ const ConfigurationNoConfigPrompt = (
variant={ArButtonVariants.SUCCESS}
slot={ArPopoverSlots.ANCHOR}
onClick={() =>
- dispatch(
- setModalState({
- show: true,
- isSticky: true,
- content: ,
- closeHandler: () => dispatch(setModalState({ show: false })),
- }),
- )
+ setModalState({
+ show: true,
+ isSticky: true,
+ content: ,
+ closeHandler: () => setModalState({ show: false }),
+ })
}
/>
- dispatch(
- setModalState({
- show: true,
- isSticky: true,
- content:
,
- closeHandler: () => dispatch(setModalState({ show: false })),
- }),
- )
+ setModalState({
+ show: true,
+ isSticky: true,
+ content:
,
+ closeHandler: () => setModalState({ show: false }),
+ })
}
/>
{
const { namespace, fetchNamespaces } = props
const configurations = namespace?.configs
- const dispatch = useAppDispatch()
+ const { notify } = useNotification()
+ const { setModalState } = useModalState()
const addConfig = (key: string, value: string, _id?: string) => {
const payload: ObjectType = {
@@ -39,7 +37,7 @@ const ConfigurationViewer = (props: ConfigurationViewerProps): JSX.Element => {
version: "v1",
}
_id && (payload._id = _id)
- Network.post(
+ post(
API_CONFIG.CONFIG[process.env.NODE_ENV] +
ENDPOINTS.CONFIG.ROOT +
ENDPOINTS.CONFIG.SAVE +
@@ -49,30 +47,26 @@ const ConfigurationViewer = (props: ConfigurationViewerProps): JSX.Element => {
.then((res) => {
if (res.status === 200) {
fetchNamespaces()
- dispatch(
- notify({
- show: true,
- message: "Added a new config successfully",
- type: ArAlertType.SUCCESS,
- uid: uuid(),
- }),
- )
+ notify({
+ show: true,
+ message: "Added a new config successfully",
+ type: ArAlertType.SUCCESS,
+ uid: uuid(),
+ })
}
})
.catch((e) => {
- dispatch(
- notify({
- show: true,
- message: "Failed to add new config",
- type: ArAlertType.ERROR,
- uid: uuid(),
- }),
- )
+ notify({
+ show: true,
+ message: "Failed to add new config",
+ type: ArAlertType.ERROR,
+ uid: uuid(),
+ })
})
}
const deleteConfig = (_id?: string) => {
- Network.get(
+ get(
API_CONFIG.CONFIG[process.env.NODE_ENV] +
ENDPOINTS.CONFIG.ROOT +
ENDPOINTS.CONFIG.DELETE +
@@ -84,25 +78,21 @@ const ConfigurationViewer = (props: ConfigurationViewerProps): JSX.Element => {
.then((res) => {
if (res.status === 200) {
fetchNamespaces()
- dispatch(
- notify({
- show: true,
- message: "Removed config successfully",
- type: ArAlertType.SUCCESS,
- uid: uuid(),
- }),
- )
+ notify({
+ show: true,
+ message: "Removed config successfully",
+ type: ArAlertType.SUCCESS,
+ uid: uuid(),
+ })
}
})
.catch((e) => {
- dispatch(
- notify({
- show: true,
- message: "Failed to delete config",
- type: ArAlertType.ERROR,
- uid: uuid(),
- }),
- )
+ notify({
+ show: true,
+ message: "Failed to delete config",
+ type: ArAlertType.ERROR,
+ uid: uuid(),
+ })
})
}
return (
@@ -140,33 +130,31 @@ const ConfigurationViewer = (props: ConfigurationViewerProps): JSX.Element => {
Org: {},
Namespace: {
onClick: () =>
- dispatch(
- setModalState({
- show: true,
- isSticky: true,
- content: ,
- closeHandler: () =>
- dispatch(setModalState({ show: false })),
- }),
- ),
+ setModalState({
+ show: true,
+ isSticky: true,
+ content: ,
+ closeHandler: () => setModalState({ show: false }),
+ }),
},
}}
/>
-
- dispatch(
+ events={{
+ onClick: () =>
setModalState({
show: true,
isSticky: true,
content: ,
- closeHandler: () => dispatch(setModalState({ show: false })),
+ closeHandler: () => setModalState({ show: false }),
}),
- )
- }
+ }}
/>
diff --git a/src/Confitron.page.scss b/src/Confitron.page.scss
new file mode 100755
index 0000000..e2530d7
--- /dev/null
+++ b/src/Confitron.page.scss
@@ -0,0 +1,14 @@
+.ar-ConfigurationsPage {
+ .ar-ConfigurationNoConfigPrompt {
+ background-color: var(--ar-bg-base);
+
+ .ar-ConfigurationNoConfigPrompt__message {
+ line-height: 1.5rem;
+ text-align: center;
+ }
+ }
+
+ .ar-ConfigurationPage__tree-badge {
+ top: -10px;
+ }
+}
diff --git a/src/Confitron.tsx b/src/Confitron.tsx
new file mode 100755
index 0000000..5eb1048
--- /dev/null
+++ b/src/Confitron.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { v4 as uuid } from "uuid"
+import { ArAlertType, ArBadgeType, Namespace, TreeListData } from "@armco/types"
+import { API_CONFIG, ENDPOINTS } from "@armco/configs/endpoints"
+import { get } from "@armco/utils/network"
+import {
+ useLoggedIn,
+ useModalState,
+ useNotification,
+ usePanelContent,
+} from "@armco/utils/hooks"
+import { ErrorBoundary, Modal, Main } from "@armco/components"
+import ConfigurationList from "./ConfigurationList"
+import ConfigurationLoginPrompt from "./ConfigurationLoginPrompt"
+import ConfigurationNoConfigPrompt from "./ConfigurationNoConfigPrompt"
+import ConfigurationViewer from "./ConfigurationViewer"
+import "./Confitron.page.scss"
+
+const Confitron = (): JSX.Element => {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const [namespaces, setNamespaces] = useState
>()
+ const [sidebarJuice, setSidebarJuice] = useState>()
+ const [namespace, setSelectedNamespace] = useState()
+ const { isLoggedIn } = useLoggedIn()
+ const { notify } = useNotification()
+ const { modalState } = useModalState()
+ const { panelContent: rightPanelContent } = usePanelContent(false)
+
+ useEffect(() => {
+ const orgTree: Array = []
+ const onItemSelect = (tld: TreeListData) => {
+ const ns = tld.data
+ // setSelectedNamespace(orgTree[0].children[0].data)
+ navigate("/config/" + ns._id, { replace: true, state: ns })
+ }
+ namespaces &&
+ namespaces.forEach((namespace) => {
+ const org = namespace.org
+ if (org._id) {
+ let orgTreeItem = orgTree.find((item) => item.label === org.name)
+ if (!orgTreeItem) {
+ orgTreeItem = { label: org.name, data: org, children: [] }
+ orgTree.push(orgTreeItem)
+ }
+ orgTreeItem.children?.push({
+ label: namespace.name,
+ data: namespace,
+ badges: [
+ {
+ text: "NS",
+ type: ArBadgeType.COMPLETE,
+ },
+ ],
+ onItemSelect,
+ })
+ }
+ })
+ setSidebarJuice(orgTree)
+ const ns = orgTree[0] && orgTree[0].children && orgTree[0].children[0].data
+ ns && navigate("/config/" + ns._id, { replace: true, state: ns })
+ }, [namespaces])
+
+ useEffect(() => {
+ const urlParts = location.pathname.split("/").filter((part) => !!part)
+ if (urlParts.length > 1 && !!location.state) {
+ setSelectedNamespace(location.state)
+ }
+ }, [location])
+
+ useEffect(() => {
+ isLoggedIn && fetchNamespaces()
+ }, [isLoggedIn])
+
+ const fetchNamespaces = () => {
+ get(
+ API_CONFIG.CONFIG[process.env.NODE_ENV] +
+ ENDPOINTS.NAMESPACE.ROOT +
+ ENDPOINTS.NAMESPACE.FETCHALL,
+ )
+ .then((res) => {
+ if (res.status === 200) {
+ setNamespaces(res.body)
+ }
+ })
+ .catch((e) => {
+ notify({
+ show: true,
+ message: "Failed to fetch your spaces",
+ type: ArAlertType.ERROR,
+ uid: uuid(),
+ })
+ })
+ }
+
+ return (
+
+ }
+ mainContent={
+
+ {isLoggedIn ? (
+ namespace ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+ }
+ rightPanelContent={rightPanelContent}
+ />
+
+
+ )
+}
+
+export default Confitron
diff --git a/src/app/components/NamespaceInfoBox/NamespaceInfoBox.component.scss b/src/NamespaceInfoBox.component.scss
similarity index 100%
rename from src/app/components/NamespaceInfoBox/NamespaceInfoBox.component.scss
rename to src/NamespaceInfoBox.component.scss
diff --git a/src/app/components/NamespaceInfoBox/NamespaceInfoBox.tsx b/src/NamespaceInfoBox.tsx
similarity index 78%
rename from src/app/components/NamespaceInfoBox/NamespaceInfoBox.tsx
rename to src/NamespaceInfoBox.tsx
index 4ad75b5..69bf173 100755
--- a/src/app/components/NamespaceInfoBox/NamespaceInfoBox.tsx
+++ b/src/NamespaceInfoBox.tsx
@@ -3,15 +3,9 @@ import { v4 as uuid } from "uuid"
import hljs from "highlight.js/lib/core"
import javascript from "highlight.js/lib/languages/javascript"
import { NamespaceInfoBoxProps } from "@armco/types"
-import {
- Alert,
- API_CONFIG,
- ENDPOINTS,
- Helper,
- Link,
- LoadableIcon,
- Text,
-} from ".."
+import { API_CONFIG, ENDPOINTS } from "@armco/configs/endpoints"
+import { copyOrPrompt } from "@armco/utils/helper"
+import { Alert, Link, Icon, Text } from "@armco/components"
import "highlight.js/styles/github.css"
import "./NamespaceInfoBox.component.scss"
@@ -67,7 +61,7 @@ const NamespaceInfoBox = (props: NamespaceInfoBoxProps): JSX.Element => {
label={nsLink}
classes="ar-NamespaceInfoBox__namespace-link px-3 py-2 mb-3"
onClick={() => {
- Helper.copyOrPrompt(nsLink, () => {
+ copyOrPrompt(nsLink, () => {
show({ displayed: true })
setMessage("Link Copied!")
})
@@ -82,7 +76,7 @@ const NamespaceInfoBox = (props: NamespaceInfoBoxProps): JSX.Element => {
label={nsAllLink}
classes="ar-NamespaceInfoBox__namespace-link px-3 py-2 mb-3"
onClick={() => {
- Helper.copyOrPrompt(nsAllLink, () => {
+ copyOrPrompt(nsAllLink, () => {
show({ displayed: true })
setMessage("Link Copied!")
})
@@ -90,19 +84,25 @@ const NamespaceInfoBox = (props: NamespaceInfoBoxProps): JSX.Element => {
preemptNavigation
/>
-
{
- const code = codeRef.current?.innerText
- Helper.copyOrPrompt(code, () => {
- show({ displayed: true })
- setMessage(
- "Copied code for integrating your configurations",
- )
- })
+ attributes={{
+ classes: "ar-NamespaceInfoBox__copy-button position-absolute",
+ colors: {
+ fillColor: "grey",
+ hoverFillColor: "black",
+ },
+ }}
+ events={{
+ onClick: () => {
+ const code = codeRef.current?.innerText
+ copyOrPrompt(code, () => {
+ show({ displayed: true })
+ setMessage(
+ "Copied code for integrating your configurations",
+ )
+ })
+ },
}}
/>
diff --git a/src/app/components/NamespaceOrgForm/NamespaceOrgForm.component.scss b/src/NamespaceOrgForm.component.scss
similarity index 100%
rename from src/app/components/NamespaceOrgForm/NamespaceOrgForm.component.scss
rename to src/NamespaceOrgForm.component.scss
diff --git a/src/app/components/NamespaceOrgForm/NamespaceOrgForm.tsx b/src/NamespaceOrgForm.tsx
similarity index 74%
rename from src/app/components/NamespaceOrgForm/NamespaceOrgForm.tsx
rename to src/NamespaceOrgForm.tsx
index 7bca274..475eefe 100755
--- a/src/app/components/NamespaceOrgForm/NamespaceOrgForm.tsx
+++ b/src/NamespaceOrgForm.tsx
@@ -7,18 +7,11 @@ import {
FunctionType,
NamespaceOrgFormProps,
} from "@armco/types"
-import {
- API_CONFIG,
- Button,
- ENDPOINTS,
- Loader,
- NamespaceInfoBox,
- Network,
- notify,
- setModalState,
- TextInput,
- useAppDispatch,
-} from ".."
+import { API_CONFIG, ENDPOINTS } from "@armco/configs/endpoints"
+import { useNotification, useModalState } from "@armco/utils/hooks"
+import { post } from "@armco/utils/network"
+import { Button, Loader, TextInput } from "@armco/components"
+import NamespaceInfoBox from "./NamespaceInfoBox"
import "./NamespaceOrgForm.component.scss"
const NamespaceOrgForm = (props: NamespaceOrgFormProps): JSX.Element => {
@@ -26,7 +19,8 @@ const NamespaceOrgForm = (props: NamespaceOrgFormProps): JSX.Element => {
const [namespace, setNamespace] = useState()
const [org, setOrg] = useState()
const [loading, setLoading] = useState()
- const dispatch = useAppDispatch()
+ const { notify } = useNotification()
+ const { setModalState } = useModalState()
const nsURL =
API_CONFIG.CONFIG[process.env.NODE_ENV] +
@@ -69,38 +63,32 @@ const NamespaceOrgForm = (props: NamespaceOrgFormProps): JSX.Element => {
content="Submit"
onClick={() => {
setLoading(true)
- Network.post(nsURL, { org, namespace })
+ post(nsURL, { org, namespace })
.then((res) => {
console.log(res)
setLoading(false)
if (res.status === 200) {
- dispatch(
- notify({
- show: true,
- message: "Namespace created successfully!",
- type: ArAlertType.SUCCESS,
- uid: uuid(),
- }),
- )
- dispatch(
- setModalState({
- content: namespace ? (
-
- ) : null,
- }),
- )
+ notify({
+ show: true,
+ message: "Namespace created successfully!",
+ type: ArAlertType.SUCCESS,
+ uid: uuid(),
+ })
+ setModalState({
+ content: namespace ? (
+
+ ) : null,
+ })
}
})
.catch((err) => {
setLoading(false)
- dispatch(
- notify({
- show: true,
- message: "Failed to create namespace/org",
- type: ArAlertType.ERROR,
- uid: uuid(),
- }),
- )
+ notify({
+ show: true,
+ message: "Failed to create namespace/org",
+ type: ArAlertType.ERROR,
+ uid: uuid(),
+ })
})
}}
/>
@@ -108,7 +96,7 @@ const NamespaceOrgForm = (props: NamespaceOrgFormProps): JSX.Element => {
variant={ArButtonVariants.SECONDARY}
size={ArSizes.SMALL}
content="Cancel"
- onClick={() => dispatch(setModalState({ show: false }))}
+ onClick={() => setModalState({ show: false })}
/>
- In Page Home
-
- )
-}
-
-export default Home
\ No newline at end of file
diff --git a/src/app/pages/Home/index.ts b/src/app/pages/Home/index.ts
deleted file mode 100755
index 50d1f40..0000000
--- a/src/app/pages/Home/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Home from "./Home.jsx"
-
-export default Home
diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts
deleted file mode 100755
index ba9140d..0000000
--- a/src/app/pages/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/* PLOP_INJECT_IMPORT */
-import Home from "./Home"
-
-export {
- /* PLOP_INJECT_EXPORT */
- Home,
-}
\ No newline at end of file
diff --git a/src/app/routes.ts b/src/app/routes.ts
deleted file mode 100644
index 4ba356b..0000000
--- a/src/app/routes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-const ROUTES = [
- {
- path: "/",
- class: "landing",
- element: "Home",
- },
-]
-
-export default ROUTES
diff --git a/src/app/static/styles/global.scss b/src/app/static/styles/global.scss
deleted file mode 100644
index 7defc06..0000000
--- a/src/app/static/styles/global.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-html, body, #root {
- height: 100%;
- width: 100%;
-}
-
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/app/store.ts b/src/app/store.ts
deleted file mode 100644
index c4249ae..0000000
--- a/src/app/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
-import counterReducer from "../features/counter/counterSlice"
-
-export const store = configureStore({
- reducer: {
- counter: counterReducer,
- },
-})
-
-export type AppDispatch = typeof store.dispatch
-export type RootState = ReturnType
-export type AppThunk = ThunkAction<
- ReturnType,
- RootState,
- unknown,
- Action
->
diff --git a/src/app/types/route.d.ts b/src/app/types/route.d.ts
deleted file mode 100644
index 29a8471..0000000
--- a/src/app/types/route.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-interface RouteConfig {
- path: String
- class?: String
- element: String | JSX.Element | null
- children?: Array
-}
diff --git a/src/app/utils/helper.tsx b/src/app/utils/helper.tsx
deleted file mode 100644
index 921dac2..0000000
--- a/src/app/utils/helper.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-class Helper {
- static populateComponentsInRoutes(routes: RouteConfig[], components: any) {
- routes &&
- routes.forEach((route) => {
- const Component: JSX.ElementType =
- components[route.element as keyof object]
- route.element =
- if (route.children) {
- Helper.populateComponentsInRoutes(route.children, components)
- }
- })
- }
-}
-
-export default Helper
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 4b03c8d..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import { BrowserRouter } from "react-router-dom"
-import { Provider } from "react-redux"
-import { store } from "./app/store"
-import Router from "./app/Router"
-import "./app/static/styles/global.scss"
-
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
-
-root.render(
-
-
-
-
-
-
- ,
-)
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 461cd0b..0f9692d 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -4,7 +4,7 @@
declare namespace NodeJS {
interface ProcessEnv {
- readonly NODE_ENV: "development" | "production" | "test"
+ readonly NODE_ENV: "development" | "production"
readonly PUBLIC_URL: string
}
}
@@ -40,16 +40,16 @@ declare module "*.png" {
}
declare module "*.webp" {
- const src: string
- export default src
+ const src: string
+ export default src
}
declare module "*.svg" {
import * as React from "react"
- export const ReactComponent: React.FunctionComponent & { title?: string }>
+ export const ReactComponent: React.FunctionComponent<
+ React.SVGProps & { title?: string }
+ >
const src: string
export default src
diff --git a/src/setupTests.ts b/src/setupTests.ts
deleted file mode 100644
index 6a0fd12..0000000
--- a/src/setupTests.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom"
diff --git a/vite-dev.config.ts b/vite-dev.config.ts
new file mode 100644
index 0000000..4e709f7
--- /dev/null
+++ b/vite-dev.config.ts
@@ -0,0 +1,42 @@
+import { resolve } from "path"
+import { glob } from "glob"
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react(), libInjectCss(), dts({ outDir: "build/types" })],
+ build: {
+ outDir: "build",
+ lib: {
+ entry: glob.sync(resolve(__dirname, "src/**/!(*.d|Test).{ts,tsx}")),
+ },
+ sourcemap: true,
+ rollupOptions: {
+ treeshake: true,
+ external: [
+ new RegExp("react*"),
+ new RegExp("highcharts*"),
+ new RegExp("@armco/*"),
+ "d3",
+ "uuid",
+ ],
+ output: [
+ {
+ format: "es",
+ dir: "build/es",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ {
+ format: "cjs",
+ dir: "build/cjs",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ ],
+ },
+ },
+})
diff --git a/vite-run.config.ts b/vite-run.config.ts
new file mode 100644
index 0000000..aa2903e
--- /dev/null
+++ b/vite-run.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+import { config } from "dotenv"
+
+config()
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ define: {
+ "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+ },
+ plugins: [react()],
+ server: {
+ open: true,
+ },
+ build: {
+ outDir: "build",
+ sourcemap: true,
+ },
+ test: {
+ globals: true,
+ environment: "jsdom",
+ setupFiles: "src/setupTests",
+ mockReset: true,
+ },
+})
diff --git a/vite.config.ts b/vite.config.ts
index ae3d7cd..1ea18ad 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,41 @@
+import { resolve } from "path"
+import { glob } from "glob"
import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
- server: {
- open: true,
- },
+ plugins: [react(), libInjectCss(), dts({ outDir: "build/types" })],
build: {
outDir: "build",
- sourcemap: true,
- },
- test: {
- globals: true,
- environment: "jsdom",
- setupFiles: "src/setupTests",
- mockReset: true,
+ lib: {
+ entry: glob.sync(resolve(__dirname, "src/**/!(*.d|Test).{ts,tsx}")),
+ },
+ rollupOptions: {
+ treeshake: true,
+ external: [
+ new RegExp("react*"),
+ new RegExp("highcharts*"),
+ new RegExp("@armco/*"),
+ "d3",
+ "uuid",
+ ],
+ output: [
+ {
+ format: "es",
+ dir: "build/es",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ {
+ format: "cjs",
+ dir: "build/cjs",
+ entryFileNames: "[name].js",
+ chunkFileNames: "[name]-chunk.js",
+ },
+ ],
+ },
},
})