remove grommet and forge-core (#1274)

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "eslint.workingDirectories": [
+    { "directory": "./assets", "changeProcessCWD": true }
+  ],
+  "files.associations": {
+    "**/src/archive/**/*": "plaintext"
+  }
+}

assets/.eslintignore

@@ -0,0 +1 @@
+/src/archive

assets/package.json

@@ -46,7 +46,7 @@
     "@nivo/pie": "0.83.0",
     "@nivo/radial-bar": "0.83.0",
     "@nivo/tooltip": "0.83.0",
-    "@pluralsh/design-system": "3.62.1",
+    "@pluralsh/design-system": "3.64.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-virtual": "3.0.1",
@@ -64,10 +64,7 @@
     "encrypt-storage": "2.13.2",
     "escape-carriage": "1.3.1",
     "filesize": "10.0.12",
-    "forge-core": "1.4.6",
     "fuse.js": "6.6.2",
-    "grommet": "2.34.2",
-    "grommet-icons": "4.10.0",
     "highlight.js": "11.9.0",
     "honorable": "1.0.0-beta.17",
     "honorable-theme-default": "1.0.0-beta.5",

assets/src/App.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
-import { Grommet } from 'grommet'
 import { IntercomProvider } from 'react-use-intercom'
 import { ApolloProvider } from '@apollo/client'
 import { mergeDeep } from '@apollo/client/utilities'
@@ -62,16 +61,7 @@ function ThemeProviders({ children }: { children: ReactNode }) {
           <CssBaseline />
           <GlobalStyle />
           <DocSearchStyles />
-          <PluralErrorBoundary>
-            <Grommet
-              className="grommet-root"
-              // @ts-ignore
-              theme={mergedStyledTheme}
-              themeMode={colorMode === 'light' ? 'light' : 'dark'}
-            >
-              {children}
-            </Grommet>
-          </PluralErrorBoundary>
+          <PluralErrorBoundary>{children}</PluralErrorBoundary>
         </OverlayContextProvider>
       </StyledThemeProvider>
     </ThemeProvider>

assets/src/components/repos/Configuration.jsx → assets/src/archive/components/repos/Configuration.jsx

@@ -11,16 +11,20 @@ import {
 
 import Toggle from 'react-toggle'
 
-import { ModalHeader } from '../utils/Modal'
-import { INSTALL_RECIPE, RECIPE_Q } from '../graphql/plural'
+import { ModalHeader } from '../../../components/utils/Modal'
+import { INSTALL_RECIPE, RECIPE_Q } from '../../../components/graphql/plural'
 
-import { LabelledInput } from '../utils/LabelledInput'
-import { appendConnection, deepFetch, updateCache } from '../../utils/graphql'
-import { BUILDS_Q } from '../graphql/builds'
+import { LabelledInput } from '../../../components/utils/LabelledInput'
+import {
+  appendConnection,
+  deepFetch,
+  updateCache,
+} from '../../../utils/graphql'
+import { BUILDS_Q } from '../../../components/graphql/builds'
 
-import { trimSuffix } from '../../utils/array'
+import { trimSuffix } from '../../../utils/array'
 
-import { LoginContext } from '../contexts'
+import { LoginContext } from '../../../components/contexts'
 
 import { Repository } from './SearchRepositories'
 import { ConfigurationType, MODAL_WIDTH, OperationType } from './constants'

assets/src/components/repos/Recipes.jsx → assets/src/archive/components/repos/Recipes.jsx

@@ -4,8 +4,8 @@ import { ModalHeader } from 'forge-core'
 import { Box, Text } from 'grommet'
 import { chunk } from 'lodash'
 
-import { RECIPES_Q } from '../graphql/plural'
-import ProviderIcon from '../utils/Provider'
+import { RECIPES_Q } from '../../../components/graphql/plural'
+import ProviderIcon from '../../../components/utils/Provider'
 
 import { MODAL_WIDTH, PROVIDER_WIDTH } from './constants'
 import { Container } from './Container'

assets/src/components/repos/SearchRepositories.jsx → assets/src/archive/components/repos/SearchRepositories.jsx

@@ -5,7 +5,7 @@ import { useQuery } from '@apollo/client'
 
 import { SearchIcon } from 'components/utils/SearchIcon'
 
-import { SEARCH_REPOS } from '../graphql/plural'
+import { SEARCH_REPOS } from '../../../components/graphql/plural'
 
 import { MODAL_WIDTH } from './constants'
 

assets/src/components/repos/Tags.jsx → assets/src/archive/components/repos/Tags.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Box, Keyboard, Text, TextInput } from 'grommet'
 import { Scroller, Tag as TagInner } from 'forge-core'
 
-import { extendConnection } from '../../utils/graphql'
+import { extendConnection } from '../../../utils/graphql'
 
 export function TagInput({ addTag, removeTag, tags, round, ...rest }) {
   const [current, setCurrent] = useState('')

assets/src/components/repos/installer/Application.tsx → assets/src/archive/components/repos/installer/Application.tsx

@@ -13,7 +13,7 @@ import { useQuery } from '@apollo/client'
 import { isNonNullable } from 'utils/isNonNullable'
 
 import { RECIPES_Q, RECIPE_Q } from '../../graphql/plural'
-import { Recipe, RepositoryContext } from '../../../generated/graphql'
+import { Recipe, RepositoryContext } from '../../../../generated/graphql'
 
 import { Configuration } from './Configuration'
 

assets/src/components/repos/installer/Configuration.tsx → assets/src/archive/components/repos/installer/Configuration.tsx

@@ -13,7 +13,7 @@ import {
   ConfigurationItem as ConfigurationItemType,
   Maybe,
   Recipe,
-} from '../../../generated/graphql'
+} from '../../../../generated/graphql'
 import { OperationType } from '../constants'
 
 import { ConfigurationItem } from './ConfigurationItem'

assets/src/components/repos/installer/ConfigurationItem.tsx → assets/src/archive/components/repos/installer/ConfigurationItem.tsx

@@ -2,7 +2,7 @@ import { FormField, Input, Switch, useActive } from '@pluralsh/design-system'
 import StartCase from 'lodash/startCase'
 import { useContext, useEffect, useMemo, useState } from 'react'
 
-import { deepFetch } from '../../../utils/graphql'
+import { deepFetch } from '../../../../utils/graphql'
 
 import { LoginContext } from '../../contexts'
 import { PluralContext } from '../../contexts/PluralContext'

assets/src/components/repos/installer/Installer.tsx → assets/src/archive/components/repos/installer/Installer.tsx

@@ -21,7 +21,7 @@ import LoadingIndicator from 'components/utils/LoadingIndicator'
 
 import { InstallationContext } from '../../Installations'
 import { BUILDS_Q } from '../../graphql/builds'
-import { appendConnection } from '../../../utils/graphql'
+import { appendConnection } from '../../../../utils/graphql'
 
 import { buildSteps, install, toDefaultSteps } from './helpers'
 import { QUERY_REPOS } from './query'

assets/src/components/repos/installer/helpers.tsx → assets/src/archive/components/repos/installer/helpers.tsx

@@ -12,7 +12,7 @@ import {
   Recipe,
   RecipeSection,
   RepositoryContext,
-} from '../../../generated/graphql'
+} from '../../../../generated/graphql'
 import { INSTALL_RECIPE, RECIPES_Q, RECIPE_Q } from '../../graphql/plural'
 
 import { Application } from './Application'

assets/src/components/apps/app/logs/LogContent.tsx

@@ -2,15 +2,15 @@ import { useEffect, useMemo, useState } from 'react'
 
 import TinyQueue from 'tinyqueue'
 
-import LegacyScroller from 'components/utils/LegacyScroller'
-
 import { last } from 'lodash'
 
 import { Div } from 'honorable'
 
+import { StandardScroller } from 'components/utils/SmoothScroller'
+
+import LogInfo from './LogInfo'
 import LogLine from './LogLine'
 import { Level } from './misc'
-import LogInfo from './LogInfo'
 
 export function determineLevel(line) {
   if (/fatal/i.test(line)) return Level.FATAL
@@ -83,7 +83,6 @@ export default function LogContent({
   setLoader,
   addLabel,
   updateFunc,
-  fullscreen = false,
 }) {
   const [open, setOpen] = useState<any>(null)
   const [timestamp, setTimestamp] = useState<any>()
@@ -104,7 +103,7 @@ export default function LogContent({
 
   return (
     <>
-      <LegacyScroller
+      <StandardScroller
         listRef={listRef}
         setListRef={setListRef}
         setLoader={setLoader}
@@ -141,7 +140,6 @@ export default function LogContent({
           stream={stream}
           addLabel={addLabel}
           onClose={() => setOpen(null)}
-          marginTop={fullscreen ? '0' : '104px'}
         />
       )}
     </>

assets/src/components/apps/app/logs/LogInfo.tsx

@@ -3,19 +3,12 @@ import { Div, Flex } from 'honorable'
 import { LogsInfoPanel } from './LogsInfoPanel'
 import { ts } from './misc'
 
-export default function LogInfo({
-  stream,
-  stamp,
-  addLabel,
-  onClose,
-  marginTop = '0',
-}) {
+export default function LogInfo({ stream, stamp, addLabel, onClose }) {
   return (
     <LogsInfoPanel
       title="Log info"
       subtitle="Select an attribute below to apply a filter."
       onClose={onClose}
-      marginTop={marginTop}
     >
       {[['timestamp', ts(stamp)], ...Object.entries(stream)].map(
         ([key, value]: any) => (

assets/src/components/apps/app/logs/LogsCard.tsx

@@ -11,13 +11,7 @@ import LogsScrollIndicator from './LogsScrollIndicator'
 const POLL_INTERVAL = 10 * 1000
 const LIMIT = 1000
 
-export function LogsCard({
-  namespace,
-  query,
-  addLabel,
-  fullscreen = false,
-  height = 800,
-}: any) {
+export function LogsCard({ namespace, query, addLabel, height = 800 }: any) {
   const [listRef, setListRef] = useState<any>(null)
   const [live, setLive] = useState(true)
   const [loader, setLoader] = useState<any>(null)
@@ -60,7 +54,6 @@ export function LogsCard({
             updateFunc={null}
             onScroll={(arg) => setLive(!arg)}
             addLabel={addLabel}
-            fullscreen={fullscreen}
           />
         ) : (
           <LoadingIndicator />

assets/src/components/apps/app/logs/LogsFilters.tsx

@@ -17,13 +17,7 @@ function selectedFilter(labels, search, spec) {
   return true
 }
 
-export default function LogsFilters({
-  labels,
-  search,
-  setSearch,
-  setLabels,
-  fullscreen = false,
-}) {
+export default function LogsFilters({ labels, search, setSearch, setLabels }) {
   const { appName } = useParams()
   const [open, setOpen] = useState<boolean>(false)
   const { data } = useQuery(LOG_FILTER_Q, { variables: { namespace: appName } })
@@ -68,7 +62,6 @@ export default function LogsFilters({
           title="Filters"
           subtitle="Select an attribute below to apply a filter."
           onClose={() => setOpen(false)}
-          marginTop={fullscreen ? '0' : '104px'}
         >
           {logFilters.map(({ metadata: { name }, spec }) => {
             const selected = selectedFilter(labels, search, spec)

assets/src/components/apps/app/logs/LogsFullScreen.tsx

@@ -90,7 +90,6 @@ export default function LogsFullScreen({
               setSearch={setSearch}
               labels={labels}
               setLabels={setLabels}
-              fullscreen
             />
           </div>
           <LogsLabels