more react-bootstrap --> antd-bootstrap

Author: williamstein

src/packages/frontend/project/explorer/file-listing/file-listing.tsx

@@ -29,7 +29,7 @@ import { TERM_MODE_CHAR } from "./utils";
 
 import * as misc from "@cocalc/util/misc";
 import { FormattedMessage } from "react-intl";
-const { Col, Row } = require("react-bootstrap");
+import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
 
 interface Props {
   // TODO: everything but actions/redux should be immutable JS data, and use shouldComponentUpdate

src/packages/frontend/project/explorer/file-listing/file-row.tsx

@@ -5,8 +5,7 @@
 
 import { Button, Popover } from "antd";
 import memoizeOne from "memoize-one";
-import { Col, Row } from "react-bootstrap";
-
+import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import { CSS, React, useState } from "@cocalc/frontend/app-framework";
 import { Icon, IconName, TimeAgo, Tip } from "@cocalc/frontend/components";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
@@ -202,7 +201,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
       props.actions.open_file({
         path,
         foreground,
-        explicit:true,
+        explicit: true,
       });
       if (foreground) {
         props.actions.set_file_search("");
@@ -356,7 +355,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
       <Col sm={1} xs={3} onClick={handle_click}>
         {render_icon()}
       </Col>
-      <Col sm={4} smPush={5} xs={6}>
+      <Col sm={4} xs={6}>
         {render_timestamp()}
         {props.isdir ? (
           <>
@@ -369,7 +368,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
           </span>
         )}
       </Col>
-      <Col sm={5} smPull={4} xs={12} onClick={handle_click}>
+      <Col sm={5} xs={12} onClick={handle_click}>
         {render_name()}
       </Col>
     </Row>

src/packages/frontend/project/explorer/file-listing/help-alert.tsx

@@ -4,8 +4,7 @@
  */
 
 import React from "react";
-
-const { Alert } = require("react-bootstrap");
+import { Alert } from "@cocalc/frontend/antd-bootstrap";
 
 const help_alert_error_syle: React.CSSProperties = {
   marginTop: "10px",

src/packages/frontend/project/explorer/file-listing/listing-header.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { TypedMap } from "@cocalc/frontend/app-framework";
 import { Icon, Gap } from "@cocalc/frontend/components";
-const { Row, Col } = require("react-bootstrap");
+import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
 
 // TODO: Flatten active_file_sort for easy PureComponent use
 interface Props {
@@ -59,13 +59,13 @@ export const ListingHeader: React.FC<Props> = (props: Props) => {
       <Col sm={1} xs={3}>
         {render_sort_link("type", "Type")}
       </Col>
-      <Col sm={4} smPush={5} xs={6}>
+      <Col sm={4} xs={6}>
         {render_sort_link("time", "Date Modified")}
         <span className="pull-right">
           {render_sort_link("size", "Size/Download/View")}
         </span>
       </Col>
-      <Col sm={5} smPull={4} xs={12}>
+      <Col sm={5} xs={12}>
         {render_sort_link("name", "Name")}
       </Col>
     </Row>

src/packages/frontend/project/explorer/file-listing/terminal-mode-display.tsx

@@ -3,38 +3,38 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import React from "react";
-const { Alert, Row, Col } = require("react-bootstrap");
-
-const row_style: React.CSSProperties = {
-  textAlign: "left",
-  color: "#888",
-  marginTop: "5px",
-  wordWrap: "break-word",
-};
-
-const alert_style: React.CSSProperties = {
-  marginTop: "5px",
-  fontWeight: "bold",
-};
+import { Alert } from "antd";
+import { A } from "@cocalc/frontend/components/A";
+import { useState } from "react";
 
 export function TerminalModeDisplay() {
+  const [extra, setExtra] = useState<boolean>(false);
   return (
-    <Row style={row_style}>
-      <Col sm={2} />
-      <Col sm={8}>
-        <Alert style={alert_style} bsStyle="info">
-          You are in{" "}
-          <a
-            target="_blank"
-            href="https://github.com/sagemathinc/cocalc/wiki/File-Listing#terminal-mode"
-          >
-            terminal mode
-          </a>
-          .
-        </Alert>
-      </Col>
-      <Col sm={2} />
-    </Row>
+    <Alert
+      banner
+      type="info"
+      style={{ margin: "5px 0 15px 0" }}
+      message={
+        <>
+          You are in <a onClick={() => setExtra(!extra)}>terminal mode</a>.
+        </>
+      }
+      description={
+        extra && (
+          <>
+            Terminal mode is triggered by a leading <code>/</code> in the file
+            filter box. If you would like to display all folders instead, enter
+            a space in front of the <code>/</code>. Terminal mode allows you to
+            quickly use common commands like <code>mv</code> or <code>cp</code>{" "}
+            in the displayed directory without having to click on the file
+            listing UI. Start{" "}
+            <A href="https://www.google.com/search?q=introduction+to+command+line">
+              here
+            </A>{" "}
+            for learning how to use the command line.
+          </>
+        )
+      }
+    />
   );
 }

src/packages/frontend/project/explorer/mini-terminal.tsx

@@ -217,6 +217,7 @@ const MiniTerminal0: React.FC<Props> = (props: Readonly<Props>) => {
           top: 0,
           color: COLORS.GRAY_M,
           fontSize: "10pt",
+          background: "white",
         }}
       >
         <Icon name="times" />

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

@@ -4,7 +4,6 @@
  */
 
 import React from "react";
-
 import { redux } from "@cocalc/frontend/app-framework";
 import { Icon, SearchInput } from "@cocalc/frontend/components";
 import { ProjectActions } from "@cocalc/frontend/project_store";
@@ -200,6 +199,7 @@ export const SearchBar = React.memo((props: Props) => {
               color: "#666",
               fontSize: "14pt",
               position: "absolute",
+              background: "white",
             }}
           >
             <Icon name="times" />
@@ -283,7 +283,7 @@ export const SearchBar = React.memo((props: Props) => {
         autoSelect
         placeholder={intl.formatMessage({
           id: "project.explorer.search-bar.placeholder",
-          defaultMessage: "Search or create file",
+          defaultMessage: "Filter files (/ for terminal)...",
         })}
         value={file_search}
         on_change={on_change}
@@ -295,7 +295,7 @@ export const SearchBar = React.memo((props: Props) => {
       />
       {render_file_creation_error()}
       {render_help_info()}
-      <div style={output_style_searchbox}>
+      <div style={{ ...output_style_searchbox, width: "100%", left: 0 }}>
         {render_output(error, {
           color: "darkred",
           margin: 0,

src/packages/frontend/project/search/body.tsx

@@ -295,9 +295,9 @@ function ProjectSearchInput({
       size={small ? "medium" : "large"}
       autoFocus={true}
       value={user_input}
-      placeholder={`Enter your search ${
+      placeholder={`Search contents of files ${
         neural ? "(semantic similarity)" : "(supports regular expressions)"
-      }`}
+      }...`}
       on_change={(value) => actions?.setState({ user_input: value })}
       on_submit={() => actions?.search()}
       on_clear={() =>

src/packages/frontend/project/search/header.tsx

@@ -14,7 +14,7 @@ export const ProjectSearchHeader: React.FC = () => {
 
   return (
     <div style={{ marginTop: "0px", fontSize: SIZE }}>
-      <Icon name="search" /> Search{" "}
+      <Icon name="search" /> Search Contents of Files{" "}
       <span className="hidden-xs">
         {" in "}
         <PathNavigator