Merge branch 'main' into ui/checkboxgrid-optimization

firecamp-dev · Sep 15, 2023 · 7769229 · 7769229
2 parents ea31e46 + fd2ec21
commit 7769229
Show file tree

Hide file tree

Showing 20 changed files with 683 additions and 49 deletions.
diff --git a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
@@ -281,10 +281,10 @@ const SidebarContainer: FC<any> = () => {
       </ActivityBar>
       {activeItem ? (
         <Resizable
-          width={'250'}
+          width={'265'}
           height="100%"
           right={true}
-          minWidth={'250'}
+          minWidth={'265'}
           maxWidth={'600'}
           className={cx({ closed: false })}
         >

diff --git a/...irecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx b/...irecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx
@@ -87,7 +87,7 @@ const InviteOrgMembers: FC<IProps> = ({
             classNames={{
               trigger: 'block',
               dropdown: '-mt-2 overflow-y-scroll invisible-scrollbar max-h-[200px]',
-              item: '!px-4',
+              item: '!px-4 whitespace-nowrap',
               itemRightSection: 'w-full'
             }}
             width={512}

diff --git a/platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx b/platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx
@@ -39,6 +39,7 @@ const FcAgentSelector: FC<any> = () => {
 
   return (
     <Popover
+      className="border border-app-border"
       content={
         <div className="p-6 w-96">
           <div className="text-base text-app-foreground mb-4">
@@ -64,6 +65,13 @@ const FcAgentSelector: FC<any> = () => {
             onSelect={() => _onSelectAgent(EFirecampAgent.Cloud)}
           />
 
+          <AgentItem
+            name={agentNamesMap[EFirecampAgent.Web]}
+            isSelected={agent == EFirecampAgent.Web}
+            description={`Sending your requests through your browser comes with <a href="#">limitations</a>`}
+            onSelect={() => _onSelectAgent(EFirecampAgent.Web)}
+          />
+
           <AgentItem
             name={`${agentNamesMap[EFirecampAgent.Extension]} (Coming Soon...)`}
             className={`mb-2`}
@@ -84,19 +92,12 @@ const FcAgentSelector: FC<any> = () => {
                 ) : <></>
             } */}
           </AgentItem>
-
-          <AgentItem
-            name={agentNamesMap[EFirecampAgent.Web]}
-            isSelected={agent == EFirecampAgent.Web}
-            description={`Sending your requests through your browser comes with <a href="#">limitations</a>`}
-            onSelect={() => _onSelectAgent(EFirecampAgent.Web)}
-          />
         </div>
       }
     >
       <Popover.Handler>
         <div
-          className="flex items-center"
+          className="flex items-center w-28	"
           onClick={() => checkExtAgentInstalled()}
         >
           <Info size={14} className="mr-1 text-primaryColor" />
@@ -120,10 +121,18 @@ const AgentItem: FC<IAgentItem> = ({
 }) => {
   return (
     <div
-      className={cx(className, 'text-base text-app-foreground flex items-start')}
+      className={cx(
+        className,
+        'text-base text-app-foreground flex items-start'
+      )}
     >
       <div className="pt-half" onClick={onSelect}>
-        <Checkbox checked={isSelected} id={name} disabled={disabled} classNames={{root: 'mr-2'}}/>
+        <Checkbox
+          checked={isSelected}
+          id={name}
+          disabled={disabled}
+          classNames={{ root: 'mr-2' }}
+        />
       </div>
       <div className="font-semibold ml-2">
         <label className="cursor-pointer" htmlFor={name}>

diff --git a/platform/firecamp-ui/src/components/checkbox/Checkbox.tsx b/platform/firecamp-ui/src/components/checkbox/Checkbox.tsx
@@ -24,7 +24,7 @@ export interface ICheckbox extends CheckboxProps {
 }
 
 const useStyles = createStyles(
-  (theme, { primary, labelPosition }: Partial<ICheckbox>) => ({
+  (theme, { primary, checked, labelPosition }: Partial<ICheckbox>) => ({
     disabled: {
       opacity: '50% !important',
       '&:checked': {
@@ -43,6 +43,23 @@ const useStyles = createStyles(
           ? theme.colors.gray[4]
           : theme.colors.dark[5],
       backgroundColor: 'transparent !important',
+      '&:focus': {
+        ...(checked && primary
+          ? {
+              borderColor: `${
+                theme.colors[theme.primaryColor][
+                  theme.colorScheme === 'dark' ? 8 : 6
+                ]
+              } !important`,
+            }
+          : {
+              borderColor: `${
+                theme.colorScheme === 'dark'
+                  ? theme.colors.gray[4]
+                  : theme.colors.dark[5]
+              } !important`,
+            }),
+      },
     },
     icon: {
       ...(primary
@@ -90,7 +107,7 @@ const Checkbox: FC<ICheckbox> = ({
   labelPosition,
   ...props
 }) => {
-  const { classes, cx, theme } = useStyles({ primary, labelPosition });
+  const { classes, cx, theme } = useStyles({ primary, checked, labelPosition });
   const customColor = primary
     ? 'primaryColor'
     : theme.colorScheme === 'dark'

diff --git a/platform/firecamp-ui/src/components/editors/monaco-v2/SingleLineEditor.tsx b/platform/firecamp-ui/src/components/editors/monaco-v2/SingleLineEditor.tsx
@@ -370,13 +370,13 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
   return (
     <>
       {placeholder && !value ? (
-        <div className="absolute top-0 left-0 text-input-placeholder text-lg leading-5	">
+        <div className="select-auto absolute top-0 left-0 text-input-placeholder text-lg leading-5	">
           {placeholder}
         </div>
       ) : (
         <></>
       )}
-      <div className={cx(className, { 'opacity-50': disabled })} style={style}>
+      <div className={cx('select-auto', className, { 'opacity-50': disabled })} style={style}>
         <MonacoEditor
           language={language}
           defaultValue={value}

diff --git a/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx b/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { Container, ContainerProps, createStyles } from '@mantine/core';
+
+const useStyles = createStyles(() => ({
+  root: {
+    padding: '0px',
+  },
+}));
+export interface IContainerLayout extends ContainerProps {
+  /**
+   * to use the container wrapped in flex layout
+   */
+  flex?: boolean;
+  /**
+   * When the child content overflows, this will add the necessary scrollbar and prevent the row from getting larger
+   */
+  overflow?: boolean;
+}
+const ContainerLayout: FC<IContainerLayout> = ({
+  flex = false,
+  overflow = false,
+  children = <></>,
+  className = '',
+  ...props
+}) => {
+  const { classes, cx } = useStyles();
+  return (
+    <Container
+      className={cx('invisible-scrollbar', { 'flex-1': flex }, {'overflow-auto': overflow}, classes.root, className)}
+      fluid
+      {...props}
+    >
+      {children}
+    </Container>
+  );
+};
+export default ContainerLayout;
diff --git a/platform/firecamp-ui/src/components/grid/FlexLayout.tsx b/platform/firecamp-ui/src/components/grid/FlexLayout.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import cx from 'classnames';
+import { Flex, FlexProps } from '@mantine/core';
+
+export interface IFlexLayout extends FlexProps {
+  /**
+   * to use the flex layout filling all available space
+   */
+  flex?: boolean;
+  /**
+   * When the child content overflows, this will add the necessary scrollbar and prevent the row from getting larger
+   */
+  overflow?: boolean;
+}
+const FlexLayout: FC<IFlexLayout> = ({
+  flex = false,
+  overflow = false,
+  children = <></>,
+  className = '',
+  ...props
+}) => {
+  return (
+    <Flex
+      direction={'row'}
+      className={cx({ 'flex-1': flex }, {'overflow-auto': overflow}, className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+};
+export default FlexLayout;