Function Welcome

frontend/src/react/components/sql-editor/Welcome.tsx:20–64

({ onChangeConnection }: WelcomeProps)

};

export function Welcome({ onChangeConnection }: WelcomeProps) {
  const { t } = useTranslation();
  const projectName = useSQLEditorEditorState((s) => s.project);

  const resolvedProject = useAppProject(projectName);
  const project = projectName ? resolvedProject : undefined;

  const [showCreateInstanceButton] = usePermissionCheck([
    "bb.instances.create",
  ]);
  const [showConnectButton] = usePermissionCheck(["bb.sql.select"], project);

  const handleCreateInstance = () => {
    router.push({
      name: INSTANCE_ROUTE_DASHBOARD,
      hash: "#add",
    });
  };

  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-y-4">
      <BytebaseLogo />
      <div className="flex items-center flex-wrap gap-4">
        {showCreateInstanceButton && (
          <WelcomeButton
            variant="secondary"
            icon={<LayersIcon strokeWidth={1.5} className="size-8" />}
            onClick={handleCreateInstance}
          >
            {t("sql-editor.add-a-new-instance")}
          </WelcomeButton>
        )}
        {showConnectButton && (
          <WelcomeButton
            variant="primary"
            icon={<LinkIcon strokeWidth={1.5} className="size-8" />}
            onClick={onChangeConnection}
          >
            {t("sql-editor.connect-to-a-database")}
          </WelcomeButton>
        )}
      </div>
    </div>
  );
}