[Improve] Remove Enter values manually from Create GitHub App

apps/web/src/app/(onboarding)/setup/GitHubSourceControlConfig.tsx

@@ -7,19 +7,12 @@ import {
   Button,
   Input,
   Label,
-  Pencil,
   Sparkles,
   Spinner,
 } from '@/components/system';
 import { useCreateGitHubAppManifest } from '@/hooks/github';
 
-export function GitHubSourceControlConfig({
-  onBack,
-  onManualValues,
-}: {
-  onBack?: () => void;
-  onManualValues: () => void;
-}) {
+export function GitHubSourceControlConfig({ onBack }: { onBack?: () => void }) {
   const [githubOrganization, setGithubOrganization] = useState('');
   const [showAdvancedConfig, setShowAdvancedConfig] = useState(false);
   const [manifestForm, setManifestForm] = useState<{
@@ -53,10 +46,9 @@ export function GitHubSourceControlConfig({
           box GitHub app - you need to create your own.
         </p>
         <p>
-          Roomote can create it for you automatically or you can enter values
-          manually if you already have an app or want to do each step yourself.
-          You&apos;ll pick the account or organization to install it on during
-          the GitHub install step.
+          Roomote can create it for you automatically. You&apos;ll pick the
+          account or organization to install it on during the GitHub install
+          step.
         </p>
       </div>
 
@@ -144,15 +136,6 @@ export function GitHubSourceControlConfig({
           )}
           Create GitHub App
         </Button>
-        <Button
-          type="button"
-          variant="outline"
-          onClick={onManualValues}
-          disabled={createGitHubAppManifest.isPending || manifestForm !== null}
-        >
-          <Pencil />
-          Enter values manually
-        </Button>
       </div>
     </>
   );

apps/web/src/app/(onboarding)/setup/StepSourceControlConfig.tsx

@@ -126,7 +126,6 @@ export function StepSourceControlConfig({
   const [editingSavedValues, setEditingSavedValues] = useState<
     Record<string, boolean>
   >({});
-  const [showManualGitHubValues, setShowManualGitHubValues] = useState(false);
   const [showAdoAdvancedConfig, setShowAdoAdvancedConfig] = useState(false);
   const [showGitlabAdvancedConfig, setShowGitlabAdvancedConfig] =
     useState(false);
@@ -230,7 +229,6 @@ export function StepSourceControlConfig({
   useEffect(() => {
     setValues(nonSecretInitialValues);
     setEditingSavedValues({});
-    setShowManualGitHubValues(false);
     setShowAdoAdvancedConfig(false);
     setShowGitlabAdvancedConfig(false);
     setShowGiteaAdvancedConfig(false);
@@ -354,14 +352,11 @@ export function StepSourceControlConfig({
         : undefined
       : providerSetupCopy?.creationHref;
 
-  if (selectedProvider?.provider === 'github' && !showManualGitHubValues) {
+  if (selectedProvider?.provider === 'github') {
     return (
       <div className="relative w-full max-w-2xl space-y-4 py-2 md:py-0">
         <StepTitle text="Create GitHub App" />
-        <GitHubSourceControlConfig
-          onBack={onBack}
-          onManualValues={() => setShowManualGitHubValues(true)}
-        />
+        <GitHubSourceControlConfig onBack={onBack} />
       </div>
     );
   }

apps/web/src/components/settings/SourceControl.tsx

@@ -340,8 +340,9 @@ export function SourceControl() {
         </>
       ) : (
         <>
-          Create a GitHub App for this deployment, or enter an existing
-          app&apos;s credentials, then connect it to select repositories.
+          Create a GitHub App for this deployment, then connect it to select
+          repositories. Existing apps can be configured with deployment
+          environment variables.
         </>
       ),
       adminHelp: isAdmin
@@ -622,18 +623,15 @@ function SourceControlProviderBlock({
 }: SourceControlProviderBlockProps) {
   const [isRepositoryListOpen, setIsRepositoryListOpen] = useState(false);
   const [isExpanded, setIsExpanded] = useState(isConfigured);
-  const [showManualGitHubValues, setShowManualGitHubValues] = useState(false);
   const repositoryCount = repositories?.length ?? 0;
   const shouldShowSetup = !isPending && !isConfigured && !isExpanded;
   const isGitHubUnconfigured =
     provider === 'github' && !isConfigured && Boolean(githubSetup);
-  const shouldShowGitHubManualForm =
-    !isGitHubUnconfigured || showManualGitHubValues;
+  const shouldShowGitHubConfigForm = !isGitHubUnconfigured;
 
   useEffect(() => {
     if (isConfigured) {
       setIsExpanded(true);
-      setShowManualGitHubValues(false);
     }
   }, [isConfigured]);
 
@@ -669,17 +667,12 @@ function SourceControlProviderBlock({
         <div className="space-y-8">
           {!isConfigured ? (
             isGitHubUnconfigured ? (
-              <GitHubAppSettingsSetupPanel
-                setup={githubSetup}
-                showManualValues={showManualGitHubValues}
-                onShowManualValues={() => setShowManualGitHubValues(true)}
-                onHideManualValues={() => setShowManualGitHubValues(false)}
-              />
+              <GitHubAppSettingsSetupPanel setup={githubSetup} />
             ) : (
               <ProviderSetupInstructions provider={provider} title={title} />
             )
           ) : null}
-          {shouldShowGitHubManualForm ? configForm : null}
+          {shouldShowGitHubConfigForm ? configForm : null}
           {isPending ? null : repositoryCount > 0 && repositories ? (
             <div>
               <RepositoryLinks
@@ -766,9 +759,8 @@ function GitHubAppSettingsSetup({
         </p>
         <p className="text-sm text-muted-foreground">
           Self-hosted Roomote needs its own GitHub App. Create one
-          automatically, or enter values manually if you already have an app.
-          You&apos;ll pick the account or organization to install it on during
-          the GitHub install step.
+          automatically. You&apos;ll pick the account or organization to install
+          it on during the GitHub install step.
         </p>
       </div>
       <div className="space-y-2">
@@ -848,60 +840,17 @@ function GitHubAppSettingsSetup({
   );
 }
 
-function GitHubAppSettingsSetupPanel({
-  setup,
-  showManualValues,
-  onShowManualValues,
-  onHideManualValues,
-}: {
-  setup: ReactNode;
-  showManualValues: boolean;
-  onShowManualValues: () => void;
-  onHideManualValues: () => void;
-}) {
+function GitHubAppSettingsSetupPanel({ setup }: { setup: ReactNode }) {
   return (
     <div className="space-y-4">
-      {!showManualValues ? setup : null}
-      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-        {!showManualValues ? (
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={onShowManualValues}
-          >
-            <Pencil />
-            Enter values manually
-          </Button>
-        ) : (
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={onHideManualValues}
-          >
-            Create GitHub App instead
-          </Button>
-        )}
+      {setup}
+      <div className="space-y-1">
+        <p className="text-sm font-semibold">Then install the app.</p>
+        <p className="text-sm text-muted-foreground">
+          After credentials are saved, Connect GitHub installs the app for the
+          repositories Roomote should work with.
+        </p>
       </div>
-      {showManualValues ? (
-        <div className="space-y-1">
-          <p className="text-sm font-semibold">Enter GitHub App credentials.</p>
-          <p className="text-sm text-muted-foreground">
-            Paste the app slug, App ID, private key, OAuth client credentials,
-            and webhook secret from your existing GitHub App, then install it
-            with Connect GitHub.
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-1">
-          <p className="text-sm font-semibold">Then install the app.</p>
-          <p className="text-sm text-muted-foreground">
-            After credentials are saved, Connect GitHub installs the app for the
-            repositories Roomote should work with.
-          </p>
-        </div>
-      )}
     </div>
   );
 }