cleaning stuff uppp

Author: toddtarsi

packages/selenium-ide/src/browser/components/AppBar/index.tsx

@@ -1,20 +1,32 @@
+import MenuIcon from '@mui/icons-material/Menu'
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 import React from 'react'
 import TabPanel from '../Tab/Panel'
-import SuiteControls from '../../windows/ProjectEditor/tabs/Suites/Controls'
-import TestControls from '../../windows/ProjectEditor/tabs/Tests/Controls'
-import { SUITES_TAB, TESTS_TAB } from '../../enums/tab'
+import SuiteControls from 'browser/windows/ProjectEditor/tabs/Suites/Controls'
+import TestControls from 'browser/windows/ProjectEditor/tabs/Tests/Controls'
+import { SUITES_TAB, TESTS_TAB } from 'browser/enums/tab'
 import { SIDEMainProps } from '../types'
 import AppBarTabs from './AppBarTabs'
-import { Paper } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import Paper from '@mui/material/Paper'
 import { getActiveTest } from '@seleniumhq/side-api'
 
-const SIDEAppBar: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
+type SIDEAppBarProps = Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>
+
+const SIDEAppBar: React.FC<SIDEAppBarProps> = ({
   session,
   setTab,
   tab,
 }) => {
+  const showDrawer = session.state.editor.showDrawer
   return (
     <Paper className="flex flex-row width-100 z-3" elevation={1} square>
+      <IconButton
+        aria-label={showDrawer ? 'Close drawer' : 'Open drawer'}
+        onClick={() => window.sideAPI.state.set('editor.showDrawer', !showDrawer)}
+      >
+        {showDrawer ? <MenuOpenIcon /> : <MenuIcon />}
+      </IconButton>
       <AppBarTabs setTab={setTab} tab={tab} />
       <div className="flex flex-1" />
       <TabPanel index={TESTS_TAB} value={tab}>

packages/selenium-ide/src/browser/components/ProjectEditor/index.tsx

@@ -13,6 +13,7 @@ import SIDEAppBar from '../AppBar'
 const ProjectEditor: React.FC<
   Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>
 > = ({ session, setTab, tab }) => {
+  const showDrawer = session.state.editor.showDrawer
   if (session.project.id === loadingID) {
     return <div id="loading" />
   }
@@ -23,21 +24,28 @@ const ProjectEditor: React.FC<
           <SIDEAppBar session={session} setTab={setTab} tab={tab} />
         </div>
         <div className="flex-1">
-          <PanelGroup
-            direction="horizontal"
-            id="drawer-editor"
-            {...usePanelGroup('drawer-editor')}
-          >
-            <Panel collapsible id="editor-drawer" order={1}>
-              <SIDEDrawer session={session} tab={tab} />
-            </Panel>
-            <PanelResizeHandle className="resize-bar" id="h-resize-1" />
-            <Panel id="editor-panel" order={2}>
-              <Box className="fill flex flex-col">
-                <Main session={session} setTab={setTab} tab={tab} />
-              </Box>
-            </Panel>
-          </PanelGroup>
+          {showDrawer && (
+            <PanelGroup
+              direction="horizontal"
+              id="drawer-editor"
+              {...usePanelGroup('drawer-editor')}
+            >
+              <Panel collapsible id="editor-drawer" order={1}>
+                <SIDEDrawer session={session} tab={tab} />
+              </Panel>
+              <PanelResizeHandle className="resize-bar" id="h-resize-1" />
+              <Panel id="editor-panel" order={2}>
+                <Box className="fill flex flex-col">
+                  <Main session={session} setTab={setTab} tab={tab} />
+                </Box>
+              </Panel>
+            </PanelGroup>
+          )}
+          {!showDrawer && (
+            <Box className="fill flex flex-col">
+              <Main session={session} setTab={setTab} tab={tab} />
+            </Box>
+          )}
         </div>
       </div>
     </DndProvider>

packages/selenium-ide/src/browser/helpers/preload.ts

@@ -69,7 +69,6 @@ export default async (api: NestedPartial<Api>, ...cbs: (() => void)[]) => {
     ...api,
     mutators: getApiSubset(mutators, api),
   } as ApiWithMutators
-  console.log(api, mutators, getApiSubset(mutators, api))
   if (cbs?.length) {
     for (const cb of cbs) {
       await cb()

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Suites/Editor/index.tsx

@@ -1,12 +1,14 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
 import Paper from '@mui/material/Paper'
+import { loadingID } from '@seleniumhq/side-api/dist/constants/loadingID'
 import { getActiveSuite } from '@seleniumhq/side-api/dist/helpers/getActiveData'
+import { TestShape } from '@seleniumhq/side-model'
+import { SIDEMainProps } from 'browser/components/types'
 import React from 'react'
 import SuiteEditor from './SuiteEditor'
 import AvailableSuiteTestList from './AvailableSuiteTestList'
-import { TestShape } from '@seleniumhq/side-model'
 import CurrentSuiteTestList from './CurrentSuiteTestList'
-import { SIDEMainProps } from 'browser/components/types'
-import { Box } from '@mui/material'
 
 const SuiteCustomizer: React.FC<Pick<SIDEMainProps, 'session'>> = ({
   session,
@@ -19,7 +21,13 @@ const SuiteCustomizer: React.FC<Pick<SIDEMainProps, 'session'>> = ({
     project: { tests },
     state: { activeSuiteID, editor },
   } = session
-
+  if (activeSuite.id === loadingID) {
+    return (
+      <Box className="flex-1 width-100" textAlign="center">
+        <Typography className="p-4">No Suite Selected</Typography>
+      </Box>
+    )
+  }
   return (
     <>
       <Box className="flex-1 flex-row no-overflow-y">
@@ -28,17 +36,9 @@ const SuiteCustomizer: React.FC<Pick<SIDEMainProps, 'session'>> = ({
           selectedIndexes={editor.selectedTestIndexes}
           tests={activeTests}
         />
-        <AvailableSuiteTestList
-          activeSuite={activeSuiteID}
-          allTests={tests}
-        />
+        <AvailableSuiteTestList activeSuite={activeSuiteID} allTests={tests} />
       </Box>
-      <Paper
-        className="flex-initial"
-        elevation={1}
-        id="suite-editor"
-        square
-      >
+      <Paper className="flex-initial" elevation={1} id="suite-editor" square>
         <SuiteEditor suite={activeSuite} />
       </Paper>
     </>

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Suites/SuiteSelector.tsx

@@ -18,7 +18,8 @@ const SuiteSelector: React.FC<Pick<SIDEMainProps, 'session'>> = ({
   const [disabled /*, setDisabled*/] = React.useState(false)
   const [confirmDelete, setConfirmDelete] = React.useState(false)
   const [confirmCreate, setConfirmCreate] = React.useState(false)
-  const activeSuiteName = suites.find((t) => t.id === activeSuiteID)?.name ?? ''
+  const matchingSuite = suites.find((t) => t.id === activeSuiteID)
+  const activeSuiteName = matchingSuite?.name ?? ''
   return (
     <>
       <EditorToolbar
@@ -31,7 +32,7 @@ const SuiteSelector: React.FC<Pick<SIDEMainProps, 'session'>> = ({
             ? async () => window.sideAPI.state.toggleSuiteMode('editor')
             : undefined
         }
-        editText='Edit Suite'
+        editText="Edit Suite"
         onRemove={
           activeSuiteID ? async () => setConfirmDelete(true) : undefined
         }
@@ -41,10 +42,12 @@ const SuiteSelector: React.FC<Pick<SIDEMainProps, 'session'>> = ({
             ? async () => window.sideAPI.state.toggleSuiteMode('viewer')
             : undefined
         }
-        viewText='View Suite Playback'
+        viewText="View Suite Playback"
       >
         <FormControl className="flex flex-1">
-          <InputLabel id="suite-select-label">Selected Suite</InputLabel>
+          <InputLabel id="suite-select-label" margin="dense" size='small'>
+            Selected Suite
+          </InputLabel>
           <Select
             label="suite-select-label"
             onChange={async (event) => {
@@ -56,7 +59,7 @@ const SuiteSelector: React.FC<Pick<SIDEMainProps, 'session'>> = ({
             margin="dense"
             placeholder={suites.length ? 'Select a suite' : 'No suites found'}
             size="small"
-            value={activeSuiteID}
+            value={matchingSuite?.id ?? ''}
           >
             {suites.map((t) => (
               <MenuItem key={t.id} value={t.id}>

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Suites/Viewer/index.tsx

@@ -1,9 +1,12 @@
+import Box from '@mui/material/Box'
 import List from '@mui/material/List'
+import Typography from '@mui/material/Typography'
 import { CoreSessionData, getActiveSuite, hasID } from '@seleniumhq/side-api'
 import { TestShape } from '@seleniumhq/side-model'
 import React from 'react'
 import SuiteViewerEntry from './Entry'
 import { SIDEMainProps } from 'browser/components/types'
+import { loadingID } from '@seleniumhq/side-api/src/constants/loadingID'
 
 export interface CurrentSuiteTestListProps {
   session: CoreSessionData
@@ -13,6 +16,13 @@ const SuiteViewer: React.FC<Pick<SIDEMainProps, 'session'>> = ({ session }) => {
   const tests = session.project.tests
   const testResults = session.state.playback.testResults
   const activeSuite = getActiveSuite(session)
+  if (activeSuite.id === loadingID) {
+    return (
+      <Box className="flex-1 width-100" textAlign="center">
+        <Typography className="p-4">No Suite Selected</Typography>
+      </Box>
+    )
+  }
   return (
     <>
       <List className="overflow-y pt-0" dense>

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandEditor.tsx

@@ -35,16 +35,23 @@ const CommandEditor: FC<CommandEditorProps> = ({
     ...command,
     command: isDisabled ? command.command.slice(2) : command.command,
   }
+  if (selectedCommandIndexes.length > 1) {
+    return (
+      <Stack className="p-4" spacing={1}>
+        <Typography className="centered py-4" variant="body2">
+          {selectedCommandIndexes.length} commands selected
+        </Typography>
+      </Stack>
+    )
+  }
   if (
-    selectedCommandIndexes.length !== 1 ||
-    !commands[correctedCommand.command]
+    !commands[correctedCommand.command] ||
+    selectedCommandIndexes.length === 0
   ) {
     return (
-      <Stack className="p-4" spacing={1} style={{ height: 240 }}>
+      <Stack className="p-4" spacing={1}>
         <Typography className="centered py-4" variant="body2">
-          {selectedCommandIndexes.length === 0
-            ? 'No commands selected'
-            : `${selectedCommandIndexes.length} commands selected`}
+          No commands selected
         </Typography>
       </Stack>
     )

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandList.tsx

@@ -58,7 +58,7 @@ const CommandList: FC<CommandListProps> = ({
       </EditorToolbar>
       <ReorderableList
         classes={{
-          root: 'overflow-y pt-0',
+          root: 'flex-1 flex-col overflow-y pt-0',
         }}
         dense
         aria-disabled={disabled}

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandListItem.tsx

@@ -16,15 +16,20 @@ const {
 } = window.sideAPI
 
 const commandTextFormat = { color: 'primary.main', typography: 'body2' }
+const commentTextFormat = {
+  color: 'info.main',
+  ml: 2,
+  typography: 'subtitle2',
+}
 const argTextFormat = {
   color: 'secondary.main',
-  typography: 'subtitle2',
   ml: 2,
+  typography: 'subtitle2',
 }
 const errorTextFormat = {
   color: 'error.main',
-  typography: 'caption',
   ml: 2,
+  typography: 'caption',
 }
 
 interface CommandRowProps {
@@ -54,7 +59,7 @@ export const defaultCommandState =
 const CommandRow: React.FC<CommandRowProps> = ({
   activeTest,
   commandState = defaultCommandState,
-  command: { command, id, isBreakpoint, opensWindow, target, value },
+  command: { command, comment, id, isBreakpoint, opensWindow, target, value },
   disabled = false,
   index,
   reorderPreview,
@@ -75,6 +80,7 @@ const CommandRow: React.FC<CommandRowProps> = ({
       className={mainClass}
       divider
       data-command-id={id}
+      data-command={commandText}
       dragType="COMMAND"
       id={id}
       index={index}
@@ -117,6 +123,10 @@ const CommandRow: React.FC<CommandRowProps> = ({
         }
         secondary={
           <>
+            <Box sx={errorTextFormat}>{commandState.message}</Box>
+            {comment && (
+              <Box sx={commentTextFormat}>// {comment}</Box>
+            )}
             <Box sx={argTextFormat}>{target}</Box>
             <Box sx={argTextFormat}>{value}</Box>
             <Box sx={errorTextFormat}>{commandState.message}</Box>

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandTable.tsx

@@ -64,7 +64,7 @@ const CommandList: FC<CommandListProps> = ({
       <ReorderableList
         aria-disabled={disabled}
         classes={{
-          root: 'overflow-y pt-0',
+          root: 'flex-1 flex-col overflow-y pt-0',
         }}
         dense
       >