Merge remote-tracking branch 'origin/master' into llm-fix-account-llm

haraldschilly · haraldschilly · commit e692eda62efa · 2024-06-12T19:21:00.000+02:00
diff --git a/src/packages/frontend/custom-software/selector.tsx b/src/packages/frontend/custom-software/selector.tsx
@@ -3,7 +3,7 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Alert, Divider } from "antd";
+import { Alert, Button, Divider } from "antd";
 import { join } from "path";
 import {
   Col,
@@ -16,6 +16,7 @@ import {
 } from "react-bootstrap";
 
 import {
+  CSS,
   React,
   redux,
   useMemo,
@@ -27,6 +28,7 @@ import {
   Gap,
   Icon,
   Markdown,
+  Paragraph,
   SearchInput,
 } from "@cocalc/frontend/components";
 import {
@@ -49,22 +51,22 @@ import {
 
 const BINDER_URL = "https://mybinder.readthedocs.io/en/latest/";
 
-const cs_list_style: Readonly<React.CSSProperties> = Object.freeze({
+const CS_LIST_STYLE: CSS = {
   height: "250px",
   overflowX: "hidden" as "hidden",
   overflowY: "scroll" as "scroll",
   border: `1px solid ${COLORS.GRAY_LL}`,
   borderRadius: "5px",
   marginBottom: "0px",
-});
+} as const;
 
-const entries_item_style: Readonly<React.CSSProperties> = Object.freeze({
+const ENTRIES_ITEM_STYLE: CSS = {
   width: "100%",
   margin: "2px 0px",
   padding: "5px",
   border: "none",
   textAlign: "left" as "left",
-});
+} as const;
 
 export interface SoftwareEnvironmentState {
   image_selected?: string;
@@ -109,7 +111,9 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
     "compute_images",
     "images",
   );
+
   const customize_kucalc = useTypedRedux("customize", "kucalc");
+  const onCoCalcCom = customize_kucalc === KUCALC_COCALC_COM;
   const customize_software = useTypedRedux("customize", "software");
   const [dflt_software_img, software_images] = useMemo(
     () => [
@@ -188,7 +192,7 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
             key={id}
             active={image_selected === id}
             onClick={() => set_state(id, display, image_type)}
-            style={entries_item_style}
+            style={ENTRIES_ITEM_STYLE}
             bsSize={"small"}
           >
             {display}
@@ -198,7 +202,7 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
       .toArray();
 
     if (entries.length > 0) {
-      return <ListGroup style={cs_list_style}>{entries}</ListGroup>;
+      return <ListGroup style={CS_LIST_STYLE}>{entries}</ListGroup>;
     } else {
       if (search_img.length > 0) {
         return <div>No search hits.</div>;
@@ -322,8 +326,55 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
     );
   }
 
+  function render_onprem() {
+    const selected = image_selected ?? dflt_software_img;
+    return (
+      <>
+        <Paragraph>
+          Select the software enviornment. Either go with the default
+          environment, or select one of the more specialized ones. Whatever you
+          pick, you can change it later in Project Settings → Control → Software
+          Environment at any time.
+        </Paragraph>
+        <Paragraph>
+          <ComputeImageSelector
+            size={"middle"}
+            selected_image={selected}
+            layout={"horizontal"}
+            onSelect={(img) => {
+              const display = software_images.get(img)?.get("title");
+              set_state(img, display, "standard");
+            }}
+          />
+        </Paragraph>
+        <Paragraph>
+          {selected !== dflt_software_img ? (
+            <Alert
+              type="info"
+              banner
+              message={
+                <>
+                  You've selected a non-standard image:{" "}
+                  <Button
+                    size="small"
+                    type="link"
+                    onClick={() => {
+                      set_state(dflt_software_img, undefined, "standard");
+                    }}
+                  >
+                    Reset
+                  </Button>
+                </>
+              }
+            />
+          ) : undefined}
+        </Paragraph>
+      </>
+    );
+  }
+
   function render_default_explanation(): JSX.Element {
-    if (customize_kucalc === KUCALC_COCALC_COM) {
+    if (onCoCalcCom) {
       return (
         <>
           <b>Default</b>: large repository of software, well tested – maintained
@@ -365,7 +416,7 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
   }
 
   function render_standard_explanation(): JSX.Element {
-    if (customize_kucalc === KUCALC_COCALC_COM) {
+    if (onCoCalcCom) {
       return (
         <>
           <b>Standard</b>: upcoming and archived versions of the "Default"
@@ -466,13 +517,19 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
   function render_type_selection() {
     return (
       <>
-        {showTitle && <ControlLabel>Software environment</ControlLabel>}
-
-        <FormGroup>
-          {render_default()}
-          {render_standard()}
-          {render_custom()}
-        </FormGroup>
+        {showTitle ? (
+          <ControlLabel>Software environment</ControlLabel>
+        ) : undefined}
+
+        {onCoCalcCom ? (
+          <FormGroup>
+            {render_default()}
+            {render_standard()}
+            {render_custom()}
+          </FormGroup>
+        ) : (
+          render_onprem()
+        )}
       </>
     );
   }
@@ -492,11 +549,15 @@ export const SoftwareEnvironment: React.FC<Props> = (props: Props) => {
         {render_type_selection()}
       </Col>
 
-      {render_divider()}
-      {render_standard_image_selector()}
-      <Col sm={6}>{render_custom_images()}</Col>
-      <Col sm={6}>{render_selected_custom_image_info()}</Col>
-      <Col sm={12}>{render_custom_images_info()}</Col>
+      {onCoCalcCom ? (
+        <>
+          {render_divider()}
+          {render_standard_image_selector()}
+          <Col sm={6}>{render_custom_images()}</Col>
+          <Col sm={6}>{render_selected_custom_image_info()}</Col>
+          <Col sm={12}>{render_custom_images_info()}</Col>
+        </>
+      ) : undefined}
     </Row>
   );
 };
diff --git a/src/packages/frontend/project/settings/compute-image-selector.tsx b/src/packages/frontend/project/settings/compute-image-selector.tsx
@@ -7,6 +7,7 @@
 
 import { DownOutlined } from "@ant-design/icons";
 import { Button, Col, Dropdown, MenuProps, Row } from "antd";
+import { SizeType } from "antd/es/config-provider/SizeContext";
 import { fromJS } from "immutable";
 
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
@@ -43,12 +44,21 @@ interface ComputeImageSelectorProps {
   onFocus?: () => void;
   onSelect: (e) => void;
   disabled?: boolean;
+  size?: SizeType;
 }
 
 export const ComputeImageSelector: React.FC<ComputeImageSelectorProps> = (
   props: ComputeImageSelectorProps,
 ) => {
-  const { selected_image, onFocus, onBlur, onSelect, layout, disabled } = props;
+  const {
+    selected_image,
+    onFocus,
+    onBlur,
+    onSelect,
+    layout,
+    disabled,
+    size = "small",
+  } = props;
 
   const software_envs: SoftwareEnvironments | null = useTypedRedux(
     "customize",
@@ -131,7 +141,7 @@ export const ComputeImageSelector: React.FC<ComputeImageSelectorProps> = (
         <Button
           onBlur={onBlur}
           onFocus={onFocus}
-          size="small"
+          size={size}
           disabled={disabled}
         >
           {selected_title} <DownOutlined />
diff --git a/src/packages/server/software-envs.ts b/src/packages/server/software-envs.ts
@@ -5,17 +5,18 @@
 
 // This is used by the hub to adjust the "customization" variable for the user visible site, and also by manage in on-prem, to actually get the associated configuration
 
+import { constants } from "node:fs";
+import { access, readFile } from "node:fs/promises";
+import { join } from "node:path";
+
 import getLogger from "@cocalc/backend/logger";
 import {
   Purpose,
   sanitizeSoftwareEnv,
   SoftwareEnvConfig,
 } from "@cocalc/util/sanitize-software-envs";
-import { constants } from "fs";
-import { access, readFile } from "fs/promises";
-import { join } from "path";
 
-const logger = getLogger("hub:webapp-config");
+const logger = getLogger("hub:software-envs");
 const L = logger.debug;
 const W = logger.warn;
 
@@ -28,7 +29,7 @@ const cache: { [key in Purpose]: SoftwareEnvConfig | false | null } = {
  * A configuration for available software environments could be stored at the location of $COCALC_SOFTWARE_ENVIRONMENTS.
  */
 export async function getSoftwareEnvironments(
-  purpose: Purpose
+  purpose: Purpose,
 ): Promise<SoftwareEnvConfig | null> {
   if (cache[purpose] === null) {
     cache[purpose] = (await readConfig(purpose)) ?? false;
@@ -46,14 +47,14 @@ async function readConfig(purpose: Purpose): Promise<SoftwareEnvConfig | null> {
 
   if (!(await isReadable(softwareFn))) {
     W(
-      `WARNING: $COCALC_SOFTWARE_ENVIRONMENTS is defined but ${softwareFn} does not exist`
+      `WARNING: $COCALC_SOFTWARE_ENVIRONMENTS is defined but ${softwareFn} does not exist`,
     );
     return null;
   }
 
   if (!(await isReadable(registryFn))) {
     W(
-      `WARNING: $COCALC_SOFTWARE_ENVIRONMENTS is defined but ${registryFn} does not exist`
+      `WARNING: $COCALC_SOFTWARE_ENVIRONMENTS is defined but ${registryFn} does not exist`,
     );
     return null;
   }
diff --git a/src/packages/util/sanitize-software-envs.ts b/src/packages/util/sanitize-software-envs.ts
@@ -3,8 +3,9 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { ComputeImage } from "@cocalc/util/compute-images";
 import { isEmpty, isObject, pick } from "lodash";
+
+import { ComputeImage } from "@cocalc/util/compute-images";
 import { DEFAULT_COMPUTE_IMAGE } from "./db-schema/defaults";
 
 // This sanitization routine checks if the "software environment" information
@@ -54,7 +55,7 @@ interface Opts {
  */
 export function sanitizeSoftwareEnv(
   opts: Opts,
-  L: (...msg) => void
+  L: (...msg) => void,
 ): SoftwareEnvConfig | null {
   const { software, registry, purpose } = opts;
 
