Disable sample dataset engine form field (#20458)

* Disable sample dataset engine form field

* e2e test

frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx

@@ -144,7 +144,10 @@ export default class DatabaseEditApp extends Component {
                         <DatabaseEditContent>
                           <DatabaseEditForm>
                             <Form>
-                              <FormField name="engine" />
+                              <FormField
+                                name="engine"
+                                disabled={database.is_sample}
+                              />
                               <DriverWarning
                                 engine={values.engine}
                                 onChange={engine =>

frontend/src/metabase/components/form/widgets/FormSelectWidget.jsx

@@ -3,12 +3,13 @@ import React from "react";
 
 import Select, { Option } from "metabase/core/components/Select";
 
-const FormSelectWidget = ({ placeholder, options = [], field }) => (
+const FormSelectWidget = ({ placeholder, options = [], field, disabled }) => (
   <Select
     placeholder={placeholder}
     {...field}
     // react-redux expects to be raw value
     onChange={e => field.onChange(e.target.value)}
+    disabled={disabled}
     buttonProps={{ style: { minWidth: 200 } }}
   >
     {options.map(({ name, value, icon }) => (

frontend/src/metabase/core/components/Select/Select.jsx

@@ -33,6 +33,7 @@ export default class Select extends Component {
     onChange: PropTypes.func.isRequired,
     multiple: PropTypes.bool,
     placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
 
     // PopoverWithTrigger props
     isInitiallyOpen: PropTypes.bool,
@@ -191,6 +192,7 @@ export default class Select extends Component {
       hideEmptySectionsInSearch,
       isInitiallyOpen,
       onClose,
+      disabled,
     } = this.props;
 
     const sections = this._getSections();
@@ -210,6 +212,7 @@ export default class Select extends Component {
               ref={this.selectButtonRef}
               className="flex-full"
               hasValue={selectedNames.length > 0}
+              disabled={disabled}
               {...buttonProps}
             >
               {selectedNames.length > 0
@@ -226,6 +229,7 @@ export default class Select extends Component {
         onClose={composeEventHandlers(onClose, this.handleClose)}
         triggerClasses={cx("flex", className)}
         isInitiallyOpen={isInitiallyOpen}
+        disabled={disabled}
         verticalAttachments={["top", "bottom"]}
         // keep the popover from jumping around one its been opened,
         // this can happen when filtering items via search

frontend/test/metabase/scenarios/admin/databases/edit.cy.spec.js

@@ -15,6 +15,15 @@ describe("scenarios > admin > databases > edit", () => {
     cy.route("PUT", "/api/database/*").as("databaseUpdate");
   });
 
+  describe("Database type", () => {
+    it("should be disabled for the Sample Dataset (metabase#16382)", () => {
+      cy.visit("/admin/databases/1");
+      cy.findByText("H2")
+        .parentsUntil("a")
+        .should("be.disabled");
+    });
+  });
+
   describe("Connection settings", () => {
     it("shows the connection settings for sample database correctly", () => {
       cy.visit("/admin/databases/1");