frontend/projects/compute image: refactor selector instead

Author: haraldschilly

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

@@ -5,7 +5,17 @@
 
 // cSpell:ignore descr disp dflt
 
-import { Alert, Button, Col, Divider, List, Radio, Row } from "antd";
+import {
+  Alert,
+  Button,
+  Col,
+  Divider,
+  List,
+  Radio,
+  Row,
+  Space,
+  Switch,
+} from "antd";
 import { join } from "path";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -21,6 +31,7 @@ import {
   A,
   Gap,
   Icon,
+  HelpIcon,
   Markdown,
   Paragraph,
   SearchInput,
@@ -123,6 +134,7 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
     [customize_software],
   );
 
+  const [selectCustom, setSelectCustom] = useState(false);
   const [search_img, set_search_img] = useState<string>("");
   const [image_selected, set_image_selected] = useState<string | undefined>(
     undefined,
@@ -272,6 +284,22 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
     );
   }
 
+  function render_switch_custom() {
+    if (!onCoCalcCom) return null;
+    return (
+      <Space style={{ marginLeft: "20px" }}>
+        <Switch
+          value={selectCustom}
+          onChange={setSelectCustom}
+          title={"Switch to select a custom software environment"}
+          checkedChildren={"Custom"}
+          unCheckedChildren={"Standard"}
+        />
+        <HelpIcon title="Software Environment">Help</HelpIcon>
+      </Space>
+    );
+  }
+
   function render_selected_custom_image_info() {
     if (image_type !== "custom" || image_selected == null || images == null) {
       return;
@@ -568,6 +596,7 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
         <>
           {render_divider()}
           {render_standard_image_selector()}
+          {render_switch_custom()}
           <Col sm={12}>{render_custom_images()}</Col>
           <Col sm={12}>{render_selected_custom_image_info()}</Col>
           <Col sm={24}>{render_custom_images_info()}</Col>

src/packages/frontend/project/settings/compute-image-selector.tsx

@@ -69,7 +69,7 @@ const img_sorter = (a, b): number => {
 
 interface ComputeImageSelectorProps {
   current_image: string;
-  layout: "horizontal" | "compact" | "dialog" | "dropdown";
+  layout: "horizontal" | "compact" | "dialog";
   onSelect: (img: string) => void;
   disabled?: boolean;
   size?: SizeType;
@@ -92,7 +92,6 @@ export function ComputeImageSelector({
   const disabled = propsDisabled ?? false;
   const size = propsSize ?? "small";
   const label = propsLabel ?? capitalize(intl.formatMessage(labels.select));
-  const [dropdownCustom, setDropdownCustom] = useState(false);
 
   // initialize with the given default
   const [nextImg, setNextImg] = useState<string>(current_image);
@@ -199,21 +198,7 @@ export function ComputeImageSelector({
     );
   }
 
-  function render_dropdown_custom() {
-    if (!isCoCalcCom) return null;
-    return (
-      <Space style={{ marginLeft: "20px" }}>
-        <Switch
-          value={dropdownCustom}
-          onChange={setDropdownCustom}
-          title={"Switch to select a custom software environment"}
-          checkedChildren={"Custom"}
-          unCheckedChildren={"Standard"}
-        />
-        <HelpIcon title="Software Environment">help</HelpIcon>
-      </Space>
-    );
-  }
+
 
   function render_doubt() {
     return (
@@ -402,23 +387,29 @@ export function ComputeImageSelector({
           </Col>
         </Row>
       );
-    // used in projects → create new project
-    case "dropdown":
-      return (
-        <Row gutter={[10, 10]}>
-          <Col xs={24}>
-            <Icon name={SOFTWARE_ENVIRONMENT_ICON} />
-            <Gap />
-            {render_selector()}
-            <Gap />
-            {render_dropdown_custom()}
-          </Col>
-          <Col xs={24}>
-            <Paragraph>{render_info(nextImg)}</Paragraph>
-            {/* <pre>{JSON.stringify(images?.toJS(), null, 2)}</pre> */}
-          </Col>
-        </Row>
-      );
+    // // used in projects → create new project
+    // case "dropdown":
+    //   return (
+    //     <Row gutter={[10, 10]}>
+    //       <Col xs={24}>
+    //         <Icon name={SOFTWARE_ENVIRONMENT_ICON} />
+    //         <Gap />
+    //         {render_selector()}
+    //         <Gap />
+    //         {render_switch_custom()}
+    //       </Col>
+
+    //       <Col xs={24}>
+    //         {" "}
+    //         {selectCustom ? (
+    //           <Paragraph>custom</Paragraph>
+    //         ) : (
+    //           <Paragraph>{render_info(nextImg)}</Paragraph>
+    //         )}
+    //         {/* <pre>{JSON.stringify(images?.toJS(), null, 2)}</pre> */}
+    //       </Col>
+    //     </Row>
+    //   );
     // successor of "vertical", where there is a dialog with a clear indication to click a button
     case "dialog":
       return (

src/packages/frontend/projects/create-project.tsx

@@ -14,7 +14,6 @@ import { useIntl } from "react-intl";
 import { Alert, Well } from "@cocalc/frontend/antd-bootstrap";
 import {
   CSS,
-  React,
   redux,
   useEffect,
   useIsMountedRef,
@@ -30,11 +29,11 @@ import {
   SoftwareEnvironmentState,
 } from "@cocalc/frontend/custom-software/selector";
 import { labels } from "@cocalc/frontend/i18n";
-import { ComputeImageSelector } from "@cocalc/frontend/project/settings/compute-image-selector";
+// import { ComputeImageSelector } from "@cocalc/frontend/project/settings/compute-image-selector";
 import { SiteLicenseInput } from "@cocalc/frontend/site-licenses/input";
 import { BuyLicenseForProject } from "@cocalc/frontend/site-licenses/purchase/buy-license-for-project";
 import track from "@cocalc/frontend/user-tracking";
-import { DEFAULT_COMPUTE_IMAGE } from "@cocalc/util/db-schema";
+// import { DEFAULT_COMPUTE_IMAGE } from "@cocalc/util/db-schema";
 import {
   KUCALC_COCALC_COM,
   KUCALC_ON_PREMISES,
@@ -53,10 +52,10 @@ interface Props {
 
 type EditState = "edit" | "view" | "saving";
 
-export const NewProjectCreator: React.FC<Props> = ({
+export function NewProjectCreator({
   start_in_edit_mode,
   default_value,
-}: Props) => {
+}: Props) {
   const intl = useIntl();
   // view --> edit --> saving --> view
   const [state, set_state] = useState<EditState>(
@@ -85,13 +84,13 @@ export const NewProjectCreator: React.FC<Props> = ({
   );
 
   const customize_software = useTypedRedux("customize", "software");
-  const [default_software_img, software_images] = useMemo(
-    () => [
-      customize_software.get("default"),
-      customize_software.get("environments"),
-    ],
-    [customize_software],
-  );
+  // const [default_software_img, software_images] = useMemo(
+  //   () => [
+  //     customize_software.get("default"),
+  //     customize_software.get("environments"),
+  //   ],
+  //   [customize_software],
+  // );
 
   const [form] = Form.useForm();
 
@@ -277,33 +276,12 @@ export const NewProjectCreator: React.FC<Props> = ({
     set_custom_software(obj);
   }
 
-  function render_customize_software_env() {
+  function render_select_software_env() {
     return (
-      <>
-        <Form.Item label="Software environment">
-          <ComputeImageSelector
-            current_image={default_software_img ?? DEFAULT_COMPUTE_IMAGE}
-            layout={"dropdown"}
-            onSelect={(img) => {
-              const display = software_images.get(img)?.get("title");
-              custom_software_on_change({
-                image_selected: img,
-                title_text: display,
-                image_type: "standard",
-              });
-            }}
-            changing={false}
-            label={"set"}
-          />
-        </Form.Item>
-
-        <Card size="small" title="Software environment" style={CARD_STYLE}>
-          <SoftwareEnvironment
-            onChange={custom_software_on_change}
-            showTitle={false}
-          />
-        </Card>
-      </>
+      <SoftwareEnvironment
+        onChange={custom_software_on_change}
+        showTitle={false}
+      />
     );
   }
 
@@ -426,7 +404,7 @@ export const NewProjectCreator: React.FC<Props> = ({
             </div>
           </Col>
         </Row>
-        {render_customize_software_env()}
+        {render_select_software_env()}
         {render_add_license()}
         {render_license()}
         <Row>
@@ -482,4 +460,4 @@ export const NewProjectCreator: React.FC<Props> = ({
       {render_project_creation()}
     </div>
   );
-};
+}