getNoCodeWorkflowSteps() — supabase Function Reference

Source Code

apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx lines 219–378

export const getNoCodeWorkflowSteps = ({
  ref,
  openAiChat,
  connectActions,
  statuses,
}: BuildNoCodeStepsArgs): GettingStartedStep[] => {
  const {
    hasTables,
    hasSampleData,
    hasRlsPolicies,
    hasAppConnected,
    hasFirstUser,
    hasStorageObjects,
    hasEdgeFunctions,
    hasReports,
    hasGitHubConnection,
  } = statuses

  return [
    {
      key: 'design-db',
      status: hasTables ? 'complete' : 'incomplete',
      title: 'Create your first table',
      icon: <Database strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "To kick off your new project, let's start by creating your very first database table using either the table editor or the AI assistant to shape the structure for you.",
      actions: [
        { label: 'Create a table', href: `/project/${ref}/editor`, variant: 'default' },
        {
          label: 'Do it for me',
          variant: 'default',
          icon: <AiIconAnimation size={14} />,
          onClick: () =>
            openAiChat(
              'Design my database',
              'I want to design my database schema. Please propose tables, relationships, and SQL to create them for my app. Ask clarifying questions if needed.'
            ),
        },
      ],
    },
    {
      key: 'add-data',
      status: hasSampleData ? 'complete' : 'incomplete',
      title: 'Add sample data',
      icon: <Table strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Next, let's add some sample data that you can play with once you connect your app, either by inserting rows yourself or letting the AI assistant craft realistic examples.",
      actions: [
        { label: 'Add data', href: `/project/${ref}/editor`, variant: 'default' },
        {
          label: 'Do it for me',
          variant: 'default',
          icon: <AiIconAnimation size={14} />,
          onClick: () =>
            openAiChat(
              'Generate sample data',
              'Generate SQL INSERT statements to add realistic sample data to my existing tables. Use safe defaults and avoid overwriting data.'
            ),
        },
      ],
    },
    {
      key: 'add-rls-policies',
      status: hasRlsPolicies ? 'complete' : 'incomplete',
      title: 'Secure your data with Row Level Security',
      icon: <Shield strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Now that you have some data, let's secure it by enabling Row Level Security (row-specific access rules that control who can view or modify records) and creating policies yourself or with help from the AI assistant.",
      actions: [
        {
          label: 'Create a policy',
          href: `/project/${ref}/auth/policies`,
          variant: 'default',
        },
        {
          label: 'Do it for me',
          variant: 'default',
          icon: <AiIconAnimation size={14} />,
          onClick: () =>
            openAiChat(
              'Generate RLS policies',
              'Generate RLS policies for my existing tables in the public schema. '
            ),
        },
      ],
    },
    {
      key: 'connect-app',
      status: hasAppConnected ? 'complete' : 'incomplete',
      title: 'Connect your application',
      icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Your project is ready; open the Connect sheet to grab connection details and setup guidance.',
      actions: connectActions,
    },
    {
      key: 'signup-first-user',
      status: hasFirstUser ? 'complete' : 'incomplete',
      title: 'Sign up your first user',
      icon: <UserPlus strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Test your authentication by signing up your first user, referencing the docs if you need sample flows or troubleshooting tips.',
      actions: [
        {
          label: 'Read docs',
          href: `${DOCS_URL}/guides/auth`,
          variant: 'default',
        },
      ],
    },
    {
      key: 'upload-file',
      status: hasStorageObjects ? 'complete' : 'incomplete',
      title: 'Upload a file',
      icon: <Upload strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Let's add file storage to your app by creating a bucket and uploading your first file from the buckets dashboard.",
      actions: [{ label: 'Buckets', href: `/project/${ref}/storage/files`, variant: 'default' }],
    },
    {
      key: 'create-edge-function',
      status: hasEdgeFunctions ? 'complete' : 'incomplete',
      title: 'Add server-side logic',
      icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Extend your app's functionality by creating an Edge Function—a lightweight serverless function that executes close to your users—for server-side logic directly from the functions page.",
      actions: [
        {
          label: 'Create a function',
          href: `/project/${ref}/functions/new`,
          variant: 'default',
        },
      ],
    },
    {
      key: 'monitor-progress',
      status: hasReports ? 'complete' : 'incomplete',
      title: "Monitor your project's health",
      icon: <BarChart3 strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Keep an eye on your project's performance and usage by setting up custom reports from the reports dashboard.",
      actions: [{ label: 'Create a report', href: `/project/${ref}/reports`, variant: 'default' }],
    },
    {
      key: 'connect-github',
      status: hasGitHubConnection ? 'complete' : 'incomplete',
      title: 'Connect to GitHub',
      icon: <GitBranch strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Connect your project to GitHub to automatically create preview branches and sync production changes.',
      actions: [
        {
          label: 'Connect to GitHub',
          href: `/project/${ref}/settings/integrations`,
          variant: 'default',
        },
      ],
    },
  ]
}