Merge pull request #8299 from sagemathinc/explorer-merge-search-terminal

explorer: merge search and terminal

Author: williamstein

src/packages/frontend/_projects.sass

@@ -70,9 +70,10 @@
 .cc-project-files-create-dropdown
   > .dropdown.btn-group
     display: flex
+    flex: 1 0 auto
 
 .cc-project-files-path-nav
-  min-width: 35vw
+  flex: 1 0 auto
   > div,
   > nav
     background-color: $COL_GRAY_LLL

src/packages/frontend/account/avatar/users-viewing.tsx

@@ -16,7 +16,7 @@ import { Loading } from "@cocalc/frontend/components";
 import { cmp } from "@cocalc/util/misc";
 import { Avatar } from "./avatar";
 
-// How frequently all UsersViewing componenents are completely updated.
+// How frequently all UsersViewing components are completely updated.
 // This is only needed to ensure that faces fade out; any newly added faces
 // will still be displayed instantly.  Also, updating more frequently updates
 // the line positions in the tooltip.

src/packages/frontend/components/search-input.tsx

@@ -41,11 +41,11 @@ interface Props {
 }
 
 export const SearchInput: React.FC<Props> = React.memo((props) => {
-  const [value, set_value] = useState<string>(
+  const [value, setValue] = useState<string>(
     props.value ?? props.default_value ?? "",
   );
   // if value changes, we update as well!
-  useEffect(() => set_value(props.value ?? ""), [props.value]);
+  useEffect(() => setValue(props.value ?? ""), [props.value]);
 
   const [ctrl_down, set_ctrl_down] = useState<boolean>(false);
   const [shift_down, set_shift_down] = useState<boolean>(false);
@@ -70,7 +70,7 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
   }
 
   function clear_value(): void {
-    set_value("");
+    setValue("");
     props.on_change?.("", get_opts());
     props.on_clear?.();
   }
@@ -140,7 +140,7 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
       onChange={(e) => {
         e.preventDefault();
         const value = e.target?.value ?? "";
-        set_value(value);
+        setValue(value);
         props.on_change?.(value, get_opts());
         if (!value) clear_value();
       }}

src/packages/frontend/components/tip.tsx

@@ -105,7 +105,7 @@ export const Tip: React.FC<Props> = React.memo((props: Props) => {
       mouseLeaveDelay: delayHide / 1000,
     };
 
-    props.overlayStyle = Object.assign({}, popover_style);
+    props.styles = { root: Object.assign({}, popover_style) };
 
     if (tip) {
       return (

src/packages/frontend/cspell.json

@@ -33,7 +33,9 @@
     "undeleting",
     "tolerations",
     "rtypes",
-    "rclass"
+    "rclass",
+    "ipython",
+    "Miniterm"
   ],
   "ignoreWords": [
     "LLMs",

src/packages/frontend/project/explorer/action-bar.tsx

@@ -3,16 +3,13 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+import { Space } from "antd";
 import * as immutable from "immutable";
 import { throttle } from "lodash";
 import React, { useEffect, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import {
-  Button,
-  ButtonGroup,
-  ButtonToolbar,
-} from "@cocalc/frontend/antd-bootstrap";
+import { Button, ButtonToolbar } from "@cocalc/frontend/antd-bootstrap";
 import { Gap, Icon } from "@cocalc/frontend/components";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import { CustomSoftwareInfo } from "@cocalc/frontend/custom-software/info-bar";
@@ -22,6 +19,7 @@ import { labels } from "@cocalc/frontend/i18n";
 import { file_actions, ProjectActions } from "@cocalc/frontend/project_store";
 import * as misc from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
+
 import { useProjectContext } from "../context";
 
 const ROW_INFO_STYLE = {
@@ -301,9 +299,9 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
       action_buttons = [...ACTION_BUTTONS_MULTI];
     }
     return (
-      <ButtonGroup>
+      <Space.Compact>
         {action_buttons.map((v) => render_action_button(v))}
-      </ButtonGroup>
+      </Space.Compact>
     );
   }
 
@@ -318,7 +316,7 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
         return;
       }
       return (
-        <ButtonGroup>
+        <Space.Compact>
           <CustomSoftwareInfo
             project_id={props.project_id}
             images={props.images}
@@ -328,7 +326,7 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
             show_custom_software_reset={!!props.show_custom_software_reset}
             project_is_running={!!props.project_is_running}
           />
-        </ButtonGroup>
+        </Space.Compact>
       );
     } else {
       return render_action_buttons();
@@ -341,9 +339,9 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
     <div style={{ flex: "1 0 auto" }}>
       <div ref={buttonRef} style={{ flex: "1 0 auto" }}>
         <ButtonToolbar style={{ whiteSpace: "nowrap", padding: "0" }}>
-          <ButtonGroup>
+          <Space.Compact>
             {props.project_is_running ? render_check_all_button() : undefined}
-          </ButtonGroup>
+          </Space.Compact>
           {render_button_area()}
         </ButtonToolbar>
       </div>