Update action editor empty form state (#28462)

frontend/src/metabase/actions/containers/ActionCreator/ActionContext/ActionContext.ts

@@ -16,7 +16,6 @@ export type ActionContextType = {
   ui: ActionCreatorUIProps;
   handleActionChange: (action: EditableActionParams) => void;
   handleFormSettingsChange: (formSettings: ActionFormSettings) => void;
-  handleSetupExample: () => void;
   renderEditorBody: (props: EditorBodyProps) => React.ReactNode;
 };
 
@@ -31,7 +30,6 @@ export const ActionContext = createContext<ActionContextType>({
   },
   handleActionChange: _.noop,
   handleFormSettingsChange: _.noop,
-  handleSetupExample: _.noop,
   renderEditorBody: () => null,
 });
 

frontend/src/metabase/actions/containers/ActionCreator/ActionContext/ImplicitActionContextProvider/ImplicitActionContextProvider.tsx

@@ -75,7 +75,6 @@ function ImplicitActionContextProvider({
       },
       handleFormSettingsChange,
       handleActionChange: _.noop,
-      handleSetupExample: _.noop,
       renderEditorBody: EditorBody,
     }),
     [initialAction, formSettings, canSave, handleFormSettingsChange],

frontend/src/metabase/actions/containers/ActionCreator/ActionContext/QueryActionContextProvider.tsx

@@ -25,9 +25,6 @@ export interface QueryActionContextProviderProps
   databaseId?: DatabaseId;
 }
 
-const EXAMPLE_QUERY =
-  "UPDATE products\nSET rating = {{ my_new_value }}\nWHERE id = {{ my_primary_key }}";
-
 function resolveQuestion(
   action: WritebackQueryAction | undefined,
   { metadata, databaseId }: { metadata: Metadata; databaseId?: DatabaseId },
@@ -89,11 +86,6 @@ function QueryActionContextProvider({
     [question],
   );
 
-  const handleSetupExample = useCallback(() => {
-    const nextQuery = query.setQueryText(query.queryText() + EXAMPLE_QUERY);
-    setQuestion(question.setQuery(nextQuery));
-  }, [question, query]);
-
   const handleQueryChange = useCallback((nextQuery: NativeQuery) => {
     const nextQuestion = nextQuery.question();
     const parameters = getTemplateTagParametersFromCard(nextQuestion.card());
@@ -123,7 +115,6 @@ function QueryActionContextProvider({
       },
       handleActionChange,
       handleFormSettingsChange: setFormSettings,
-      handleSetupExample,
       renderEditorBody,
     }),
     [
@@ -133,7 +124,6 @@ function QueryActionContextProvider({
       canSave,
       handleActionChange,
       setFormSettings,
-      handleSetupExample,
       renderEditorBody,
     ],
   );

frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.tsx

@@ -88,7 +88,6 @@ function ActionCreator({
     ui: UIProps,
     handleActionChange,
     handleFormSettingsChange,
-    handleSetupExample,
     renderEditorBody,
   } = useActionContext();
 
@@ -147,7 +146,6 @@ function ActionCreator({
         onChangeAction={handleActionChange}
         onChangeFormSettings={handleFormSettingsChange}
         onClickSave={handleClickSave}
-        onClickExample={handleSetupExample}
         onCloseModal={onClose}
       >
         {renderEditorBody({ isEditable })}

frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorView.tsx

@@ -37,7 +37,6 @@ interface ActionCreatorProps extends ActionCreatorUIProps {
   onChangeAction: (action: Partial<WritebackAction>) => void;
   onChangeFormSettings: (formSettings: ActionFormSettings) => void;
   onClickSave: () => void;
-  onClickExample: () => void;
   onCloseModal?: () => void;
 }
 
@@ -55,7 +54,6 @@ export default function ActionCreatorView({
   onChangeAction,
   onChangeFormSettings,
   onClickSave,
-  onClickExample,
   onCloseModal,
 }: ActionCreatorProps) {
   const [activeSideView, setActiveSideView] =
@@ -124,7 +122,6 @@ export default function ActionCreatorView({
             formSettings={formSettings}
             isEditable={isEditable && canChangeFieldSettings}
             onChange={onChangeFormSettings}
-            onExampleClick={onClickExample}
           />
         ) : activeSideView === "dataReference" ? (
           <DataReferenceInline onClose={closeSideView} />

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/EmptyFormPlaceholder.tsx

@@ -3,31 +3,38 @@ import { t } from "ttag";
 
 import Icon from "metabase/components/Icon";
 
+import MetabaseSettings from "metabase/lib/settings";
+
 import {
   EmptyFormPlaceholderWrapper,
+  ExplainerTitle,
   ExplainerText,
-  ExampleButton,
+  ExplainerList,
+  ExplainerLink,
   IconContainer,
   TopRightIcon,
 } from "./FormCreator.styled";
 
-export const EmptyFormPlaceholder = ({
-  onExampleClick,
-}: {
-  onExampleClick: () => void;
-}) => (
+export const EmptyFormPlaceholder = () => (
   <EmptyFormPlaceholderWrapper>
     <IconContainer>
       <Icon name="sql" size={62} />
       <TopRightIcon name="insight" size={24} />
     </IconContainer>
-    <h3>{t`Build custom forms and business logic.`}</h3>
+    <ExplainerTitle>{t`Build custom forms and business logic.`}</ExplainerTitle>
     <ExplainerText>
-      {t`Actions let you write parameterized SQL that can then be attached to buttons, clicks, or even added on the page as form elements.`}
+      {t`Actions let you write parameterized SQL that writes back to your database. Actions can be attached to buttons on dashboards to create custom workflows. You can even publicly share the parameterized forms they generate to collect data.`}
     </ExplainerText>
     <ExplainerText>
-      {t`Use actions to update your data based on user input or values on the page.`}
+      {t`Here are a few ideas for what you can do with actions`}
+      <ExplainerList>
+        <li>{t`Create a customer feedback form and embed it on your website.`}</li>
+        <li>{t`Mark the customer you’re viewing in a dashboard as a VIP.`}</li>
+        <li>{t`Let team members remove redundant data.`}</li>
+      </ExplainerList>
     </ExplainerText>
-    <ExampleButton onClick={onExampleClick}>{t`See an example`}</ExampleButton>
+    <ExplainerLink
+      href={MetabaseSettings.docsUrl("actions/custom")}
+    >{t`See an example`}</ExplainerLink>
   </EmptyFormPlaceholderWrapper>
 );

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx

 import styled from "@emotion/styled";
 import Icon from "metabase/components/Icon";
+import ExternalLink from "metabase/core/components/ExternalLink";
 
 import { color, lighten } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
@@ -32,24 +33,39 @@ export const EmptyFormPlaceholderWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
   height: 100%;
-  text-align: center;
   padding: 5rem;
 `;
 
+export const ExplainerTitle = styled.h3`
+  margin-bottom: ${space(1)};
+`;
+
 export const ExplainerText = styled.p`
   font-weight: 400;
+  line-height: 1.5rem;
   color: ${color("text-medium")};
-  margin: ${space(2)} auto;
+  margin: ${space(1)} 0 0 0;
+`;
+
+export const ExplainerList = styled.ul`
+  list-style-type: disc;
+  margin-left: 1.5rem;
+
+  li {
+    font-weight: 400;
+    line-height: 24px;
+    color: ${color("text-medium")};
+    margin: 0;
+  }
 `;
 
-export const ExampleButton = styled.button`
-  font-weight: bold;
-  cursor: pointer;
-  margin: ${space(2)};
+export const ExplainerLink = styled(ExternalLink)`
+  font-weight: 700;
+  margin-top: ${space(2)};
+
   color: ${color("brand")};
-  :hover {
+  &:hover {
     color: ${lighten("brand", 0.1)};
   }
 `;
@@ -59,6 +75,7 @@ export const IconContainer = styled.div`
   padding: 1.25rem;
   position: relative;
   color: ${color("brand")};
+  align-self: center;
 `;
 
 export const TopRightIcon = styled(Icon)`

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx

@@ -22,13 +22,11 @@ function FormCreator({
   isEditable,
   formSettings: passedFormSettings,
   onChange,
-  onExampleClick,
 }: {
   params: Parameter[];
   isEditable: boolean;
   formSettings?: ActionFormSettings;
   onChange: (formSettings: ActionFormSettings) => void;
-  onExampleClick: () => void;
 }) {
   const [formSettings, setFormSettings] = useState<ActionFormSettings>(
     passedFormSettings?.fields ? passedFormSettings : getDefaultFormSettings(),
@@ -54,7 +52,7 @@ function FormCreator({
     return (
       <SidebarContent title={t`Action parameters`}>
         <FormContainer>
-          <EmptyFormPlaceholder onExampleClick={onExampleClick} />
+          <EmptyFormPlaceholder />
         </FormContainer>
       </SidebarContent>
     );