frontend/explorer/search: get rid of react-bootstrap Alert

Author: haraldschilly

src/packages/frontend/antd-bootstrap.tsx

@@ -35,9 +35,10 @@ import {
   Tooltip,
 } from "antd";
 import { MouseEventHandler } from "react";
+
 import { inDarkMode } from "@cocalc/frontend/account/dark-mode";
-import { r_join } from "@cocalc/frontend/components/r_join";
 import { Gap } from "@cocalc/frontend/components/gap";
+import { r_join } from "@cocalc/frontend/components/r_join";
 import { COLORS } from "@cocalc/util/theme";
 
 // Note regarding buttons -- there are 6 semantics meanings in bootstrap, but

src/packages/frontend/project/ask-filename.tsx

@@ -3,7 +3,6 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { useEffect } from "react";
 import {
   Button,
   ButtonToolbar,
@@ -12,19 +11,21 @@ import {
   Form,
   Row,
 } from "@cocalc/frontend/antd-bootstrap";
+import { useEffect } from "react";
+
 import { useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
   Icon,
   Loading,
   SearchInput,
   SelectorInput,
 } from "@cocalc/frontend/components";
+import ComputeServer from "@cocalc/frontend/compute/inline";
 import { file_options } from "@cocalc/frontend/editor-tmp";
 import { IS_TOUCH } from "@cocalc/frontend/feature";
 import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
 import { FileSpec } from "../file-associations";
-import ComputeServer from "@cocalc/frontend/compute/inline";
 
 interface Props {
   project_id: string;

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

@@ -4,15 +4,16 @@
  */
 
 import React from "react";
-import { TERM_MODE_CHAR } from "./file-listing";
-import { Icon, SearchInput } from "../../components";
+
+import { redux } from "@cocalc/frontend/app-framework";
+import { Icon, SearchInput } from "@cocalc/frontend/components";
 import { ProjectActions } from "@cocalc/frontend/project_store";
-import { ListingItem } from "./types";
-import { output_style_searchbox } from "./mini-terminal";
-import { webapp_client } from "../../webapp-client";
-import { Alert } from "react-bootstrap";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { path_to_file } from "@cocalc/util/misc";
-import { redux } from "@cocalc/frontend/app-framework";
+import { Alert } from "antd";
+import { TERM_MODE_CHAR } from "./file-listing";
+import { output_style_searchbox } from "./mini-terminal";
+import { ListingItem } from "./types";
 
 interface Props {
   project_id: string; // Added by miniterm functionality
@@ -155,9 +156,11 @@ export const SearchBar = React.memo((props: Props) => {
         text = `Showing files matching ${file_search}`;
       }
       return (
-        <Alert style={{ wordWrap: "break-word" }} bsStyle="info">
-          {text}
-        </Alert>
+        <Alert
+          style={{ wordWrap: "break-word", marginBottom: "10px" }}
+          type="info"
+          message={text}
+        />
       );
     }
   }
@@ -166,12 +169,12 @@ export const SearchBar = React.memo((props: Props) => {
     if (file_creation_error) {
       return (
         <Alert
-          style={{ wordWrap: "break-word" }}
-          bsStyle="danger"
-          onDismiss={dismiss_alert}
-        >
-          {file_creation_error}
-        </Alert>
+          style={{ wordWrap: "break-word", marginBottom: "10px" }}
+          type="error"
+          closable
+          onClose={dismiss_alert}
+          message={file_creation_error}
+        />
       );
     }
   }