Merge remote-tracking branch 'origin/master' into sso-exclusive-all

Author: haraldschilly

src/packages/frontend/editors/slate/upload.tsx

@@ -20,7 +20,7 @@ function uploadTarget(path: string, file: { name: string }): string {
 
 export default function useUpload(
   editor: SlateEditor,
-  body: JSX.Element
+  body: JSX.Element,
 ): JSX.Element {
   const dropzoneRef = useRef<Dropzone>(null);
   const { actions, project_id, path } = useFrameContext();
@@ -50,7 +50,7 @@ export default function useUpload(
           if (file != null) {
             const blob = file.slice(0, -1, item.type);
             dropzoneRef?.current?.addFile(
-              new File([blob], `paste-${Math.random()}`, { type: item.type })
+              new File([blob], `paste-${Math.random()}`, { type: item.type }),
             );
           }
           return; // what if more than one ?
@@ -95,8 +95,6 @@ export default function useUpload(
     };
   }, []);
 
-  // Note: using show_upload={false} since showing the upload right in the
-  // wysiwyg editor is really disconcerting.
   return (
     <FileUploadWrapper
       className="smc-vfill"
@@ -105,7 +103,7 @@ export default function useUpload(
       event_handlers={updloadEventHandlers}
       style={{ height: "100%", width: "100%" }}
       dropzone_ref={dropzoneRef}
-      show_upload={false}
+      show_upload={true}
     >
       {body}
     </FileUploadWrapper>

src/packages/frontend/file-upload.tsx

@@ -35,6 +35,14 @@ const CHUNK_SIZE_MB = 8;
 
 const TIMEOUT_S = 100;
 
+const CLOSE_BUTTON_STYLE = {
+  position: "absolute",
+  right: 0,
+  zIndex: 1, // so it floats above text/markdown buttons
+  background: "white",
+  cursor: "pointer",
+} as const;
+
 /*
 CHUNK_SIZE_MB being set properly is critical for cloudflare to work --
 we want this to be as big as possible, but MUST be smaller than
@@ -123,7 +131,7 @@ export const FileUpload: React.FC<FileUploadProps> = (props) => {
 
   function render_close_button() {
     return (
-      <div className="close-button pull-right">
+      <div className="close-button" style={CLOSE_BUTTON_STYLE}>
         <span
           onClick={props.close_button_onclick}
           className="close-button-x"
@@ -311,7 +319,7 @@ export const FileUploadWrapper: React.FC<FileUploadWrapperProps> = (props) => {
 
     return (
       <div style={style}>
-        <div className="close-button pull-right">
+        <div className="close-button" style={CLOSE_BUTTON_STYLE}>
           <span
             onClick={() => {
               close_preview();

src/packages/frontend/project/new/file-type-selector.tsx

@@ -40,6 +40,7 @@ interface Props {
   selectedExt?: string;
   filename: string;
   makeNewFilename?: (ext: string) => void;
+  filenameChanged?: boolean;
 }
 
 // Use Rows and Cols to append more buttons to this class.
@@ -55,6 +56,7 @@ export function FileTypeSelector({
   children,
   filename,
   makeNewFilename,
+  filenameChanged,
 }: Props) {
   const { project_id } = useProjectContext();
 
@@ -103,6 +105,7 @@ export function FileTypeSelector({
             btnActive={btnActive}
             grid={[sm, md]}
             filename={filename}
+            filenameChanged={filenameChanged}
             makeNewFilename={() => makeNewFilename?.("ipynb")}
           />
           {renderLaTeX()}
@@ -362,6 +365,7 @@ export function FileTypeSelector({
                 project_id={project_id}
                 mode="flyout"
                 ext={ext}
+                filename={filenameChanged ? filename : undefined}
               />
             </Flex>
           </Flex>
@@ -375,6 +379,7 @@ export function FileTypeSelector({
             project_id={project_id}
             mode="full"
             ext={ext}
+            filename={filenameChanged ? filename : undefined}
           />
         </Col>
       );

src/packages/frontend/project/new/jupyter-buttons.tsx

@@ -52,6 +52,7 @@ interface JupyterNotebookButtonsProps {
   btnActive: (name: string) => boolean;
   grid: [number, number];
   filename: string;
+  filenameChanged?: boolean;
   mode: "full" | "flyout";
   makeNewFilename?: () => void;
 }
@@ -71,6 +72,7 @@ export function JupyterNotebookButtons({
   btnActive,
   grid,
   filename,
+  filenameChanged,
   mode,
   makeNewFilename,
 }: JupyterNotebookButtonsProps) {
@@ -244,6 +246,7 @@ export function JupyterNotebookButtons({
               project_id={project_id}
               mode="flyout"
               ext="ipynb"
+              filename={filename}
             />
           </Col>
         </>
@@ -286,6 +289,7 @@ export function JupyterNotebookButtons({
                 project_id={project_id}
                 mode="flyout"
                 ext="ipynb"
+                filename={filenameChanged ? filename : undefined}
               />
             </Flex>
           </Flex>
@@ -299,6 +303,7 @@ export function JupyterNotebookButtons({
             project_id={project_id}
             mode="full"
             ext="ipynb"
+            filename={filenameChanged ? filename : undefined}
           />
         </Col>
       );

src/packages/frontend/project/new/new-file-page.tsx

@@ -69,6 +69,7 @@ export default function NewFilePage(props: Props) {
   const [filename, setFilename] = useState<string>(
     filename0 ? filename0 : default_filename(undefined, project_id),
   );
+  const [filenameChanged, setFilenameChanged] = useState<boolean>(false);
   const file_creation_error = useTypedRedux(
     { project_id },
     "file_creation_error",
@@ -391,6 +392,7 @@ export default function NewFilePage(props: Props) {
                   "Name your file, folder, or a URL to download from..."
                 }
                 onChange={(e) => {
+                  setFilenameChanged(true);
                   if (extensionWarning) {
                     setExtensionWarning(false);
                   } else {
@@ -429,6 +431,7 @@ export default function NewFilePage(props: Props) {
             projectActions={actions}
             availableFeatures={availableFeatures}
             filename={filename}
+            filenameChanged={filenameChanged}
           >
             <Tip
               title={"Download files from the Internet"}

src/packages/frontend/project/page/flyouts/new.tsx

@@ -406,6 +406,7 @@ export function NewFlyout({
           create_file={handleOnClick}
           availableFeatures={availableFeatures}
           filename={filename}
+          filenameChanged={manual}
           makeNewFilename={(ext: string) => setFilename(getNewFilename(ext))}
         />
         <Tag color={COLORS.ANTD_ORANGE}>Additional types</Tag>

src/packages/frontend/project/page/home-page/ai-generate-document.tsx

@@ -118,12 +118,21 @@ type Ipynb = {
   metadata: { kernelspec: KernelSpec };
 };
 
+function ensureExtension(filename, ext) {
+  if (!filename) return filename;
+  if (!filename.endsWith("." + ext)) {
+    return filename + "." + ext;
+  }
+  return filename;
+}
+
 interface Props {
   project_id: string;
   onSuccess: () => void;
   ext: Ext;
   docName: string;
   show: boolean;
+  filename?: string;
 }
 
 function AIGenerateDocument({
@@ -132,6 +141,7 @@ function AIGenerateDocument({
   project_id,
   ext,
   docName,
+  filename: filename0,
 }: Props) {
   const projectActions = useActions({ project_id });
   const current_path = useTypedRedux({ project_id }, "current_path");
@@ -145,7 +155,12 @@ function AIGenerateDocument({
   const [saving, setSaving] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [preview, setPreview] = useState<string | null>(null);
-  const [filename, setFilename] = useState<string>("");
+  const [filename, setFilename] = useState<string>(
+    ensureExtension(filename0 ?? "", ext),
+  );
+  useEffect(() => {
+    setFilename(ensureExtension(filename0 ?? "", ext));
+  }, [filename0]);
   const promptRef = useRef<HTMLElement>(null);
 
   const [kernelSpecs, setKernelSpecs] = useState<KernelSpec[] | null | string>(
@@ -452,6 +467,9 @@ function AIGenerateDocument({
   }
 
   function updateFilename(fnNext: string) {
+    if (filename) {
+      return;
+    }
     const fn = sanitizeFilename(fnNext, ext);
     const timestamp = getTimestamp();
     setFilename(`${fn}-${timestamp}.${ext}`);
@@ -741,7 +759,6 @@ function AIGenerateDocument({
   }
 
   function renderDialog() {
-    const empty = prompt.trim() == "";
     return (
       <>
         <Paragraph strong>
@@ -754,7 +771,7 @@ function AIGenerateDocument({
           />
         </Paragraph>
         {renderJupyterKernelSelector()}
-        <Paragraph type={empty ? "danger" : undefined}>
+        <Paragraph>
           Provide a detailed description of the {docName} document you want to
           create:
         </Paragraph>
@@ -767,7 +784,6 @@ function AIGenerateDocument({
             placeholder={PLACEHOLDER}
             value={prompt}
             disabled={querying}
-            status={empty ? "error" : undefined}
             onChange={({ target: { value } }) => setPrompt(value)}
             onPressEnter={(e) => {
               if (e.shiftKey) {
@@ -899,7 +915,7 @@ function AIGenerateDocument({
                 setPreview(null);
               }}
             >
-              <Icon name="arrow-left" /> Discard
+              Cancel
             </Button>
             <Button
               type="primary"
@@ -959,12 +975,14 @@ export function AIGenerateDocumentModal({
   setShow,
   project_id,
   ext,
+  filename,
 }: {
   show: boolean;
   setShow: (val: boolean) => void;
   project_id: string;
   style?: CSS;
   ext: Props["ext"];
+  filename?: string;
 }) {
   const docName = file_options(`x.${ext}`).name ?? `${capitalize(ext)}`;
 
@@ -986,6 +1004,7 @@ export function AIGenerateDocumentModal({
         onSuccess={() => setShow(false)}
         ext={ext}
         docName={docName}
+        filename={filename}
       />
     </Modal>
   );
@@ -996,11 +1015,13 @@ export function AIGenerateDocumentButton({
   style,
   mode = "full",
   ext,
+  filename,
 }: {
   project_id: string;
   style?: CSS;
   mode?: "full" | "flyout";
   ext: Props["ext"];
+  filename?: string;
 }) {
   const [show, setShow] = useState<boolean>(false);
 
@@ -1046,6 +1067,7 @@ export function AIGenerateDocumentButton({
         show={show}
         setShow={setShow}
         project_id={project_id}
+        filename={filename}
       />
     </>
   );

src/packages/frontend/project/page/home-page/ai-generate-examples.ts

@@ -7,7 +7,7 @@ type Language = "python" | "r" | "sagemath" | "octave" | "julia";
 
 export const EXAMPLES_COMMON: readonly Example[] = [
   [
-    "Help me Studying ...",
+    "Help me Study...",
     "I am a student. I want to learn more about a topic. Explain it to me using code, formulas and plots!\n\nTopic: DESCRIBE_TOPIC_HERE",
     ["student", "learning"],
   ],