Merge pull request #8498 from sagemathinc/files-new-add-json-8459

frontend/new file dropdown: add JSON

Author: williamstein

src/packages/frontend/file-associations.ts

@@ -230,6 +230,13 @@ file_associations["csv"] = {
   opts: {},
 };
 
+file_associations["json"] = {
+  editor: "codemirror",
+  icon: "js-square",
+  opts: { mode: "javascript", indent_unit: 2, tab_size: 2 },
+  name: "JSON",
+};
+
 // At https://cs.lmu.edu/~ray/notes/gasexamples/ they use .s, so I'm also including that.
 // In fact, GCC only works on files if they end in .s.
 file_associations["asm"] = file_associations["s"] = {

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

@@ -3,7 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button } from "antd";
+import { Button, Space } from "antd";
+import { useIntl } from "react-intl";
 
 import { React } from "@cocalc/frontend/app-framework";
 import {
@@ -15,7 +16,6 @@ import { file_associations } from "@cocalc/frontend/file-associations";
 import { EXTs } from "@cocalc/frontend/project/explorer/file-listing/utils";
 import { keys } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
-import { useIntl } from "react-intl";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { file_options } = require("@cocalc/frontend/editor");
@@ -127,15 +127,15 @@ export function NewFileDropdown({
           className={"pull-right dropdown-splitbutton-left"}
           style={{ marginRight: "5px" }}
         >
-          <Button.Group>
+          <Space.Compact>
             <Button size="large" onClick={() => create_file()}>
               <span>
                 <Icon name="file" /> {title}
               </span>
             </Button>
 
             <DropdownMenu size="large" button={button} items={items} />
-          </Button.Group>
+          </Space.Compact>
         </span>
       );
     case "flyout":