work on 3782 -- at least now everything imports from antd-bootstrap

HOWEVER: these components defined in antd-bootstrap are just imported
from react-bootstrap:
  ControlLabel,
  Form,
  FormControl,
  FormGroup,
  InputGroup,
  ListGroup,
  ListGroupItem,

Author: williamstein

src/packages/frontend/antd-bootstrap.tsx

@@ -21,7 +21,10 @@ export {
   FormControl,
   FormGroup,
   InputGroup,
+  ListGroup,
+  ListGroupItem,
 } from "react-bootstrap";
+
 import {
   Alert as AntdAlert,
   Button as AntdButton,

src/packages/frontend/custom-software/selector.tsx

@@ -3,18 +3,16 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Alert, Button, Divider } from "antd";
+import { Alert, Button, Divider, Radio } from "antd";
 import { join } from "path";
 import {
   Col,
   ControlLabel,
   FormGroup,
   ListGroup,
   ListGroupItem,
-  Radio,
   Row,
-} from "react-bootstrap";
-
+} from "@cocalc/frontend/antd-bootstrap";
 import {
   CSS,
   React,
@@ -162,7 +160,7 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
     } else {
       // must be standard image
       const img = software_images.get(default_image);
-      const display = img != null ? img.get("title") ?? "" : "";
+      const display = img != null ? (img.get("title") ?? "") : "";
       set_state(default_image, display, "standard");
     }
   }, []);
@@ -449,7 +447,9 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
   }
 
   function render_standard() {
-    if (!haveSoftwareImages) return;
+    if (!haveSoftwareImages) {
+      return;
+    }
     return (
       <Radio
         checked={image_type === "standard"}
@@ -464,15 +464,16 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
   }
 
   function render_custom() {
-    if (customize_kucalc !== KUCALC_COCALC_COM) return null;
+    if (customize_kucalc !== KUCALC_COCALC_COM) {
+      return null;
+    }
 
     if (images == null || images.size == 0) {
       return "There are no customized software environments available.";
     } else {
       return (
         <Radio
           checked={image_type === "custom"}
-          label={"Custom software environment"}
           id={"custom-compute-image"}
           onChange={() => {
             set_state(undefined, undefined, "custom");
@@ -523,9 +524,9 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
 
         {onCoCalcCom ? (
           <FormGroup>
-            {render_default()}
-            {render_standard()}
-            {render_custom()}
+            <div style={{ marginBottom: "5px" }}>{render_default()}</div>
+            <div style={{ marginBottom: "5px" }}>{render_standard()}</div>
+            <div style={{ marginBottom: "5px" }}>{render_custom()}</div>
           </FormGroup>
         ) : (
           render_onprem()

src/packages/frontend/library/component.tsx

@@ -18,10 +18,20 @@ import {
   ReactDOM,
   Fragment,
 } from "../app-framework";
-import { Col, Row, Button, ListGroup, ListGroupItem } from "react-bootstrap";
-import { Markdown, Icon, Loading, SearchInput } from "../components";
-import { webapp_client } from "../webapp-client";
-
+import {
+  Col,
+  Row,
+  Button,
+  ListGroup,
+  ListGroupItem,
+} from "@cocalc/frontend/antd-bootstrap";
+import {
+  Markdown,
+  Icon,
+  Loading,
+  SearchInput,
+} from "@cocalc/frontend/components";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
 
 declare var $: any;
 
@@ -40,7 +50,7 @@ export const Library: React.FC<Props> = ({ project_id, onClose }) => {
   const library_selected = useTypedRedux({ project_id }, "library_selected");
   const library_is_copying = useTypedRedux(
     { project_id },
-    "library_is_copying"
+    "library_is_copying",
   );
   const library_search = useTypedRedux({ project_id }, "library_search");
 
@@ -60,7 +70,7 @@ export const Library: React.FC<Props> = ({ project_id, onClose }) => {
       // Using JSON of the doc is pretty naive but it's fast enough
       // and I don't want to spend much time on this!
       docs = docs.filter((doc) =>
-        search_match(JSON.stringify(doc.toJS()).toLowerCase(), search)
+        search_match(JSON.stringify(doc.toJS()).toLowerCase(), search),
       );
     }
 
@@ -206,7 +216,7 @@ export const Library: React.FC<Props> = ({ project_id, onClose }) => {
         list.push(
           <li className="list-group-header" key={`header-${cur_cat}`}>
             {cur_cat_title}
-          </li>
+          </li>,
         );
       }
 
@@ -220,7 +230,7 @@ export const Library: React.FC<Props> = ({ project_id, onClose }) => {
           bsSize={"small"}
         >
           {doc.get("title") ?? doc.get("id")}
-        </ListGroupItem>
+        </ListGroupItem>,
       );
     });
     return list;