Hide footer on Skills/Instructions tabs and remove Installed badge (#2926)

- Hide the Edit Site modal footer (Cancel/Save buttons) when the Skills or Instructions tab is active, since those tabs don't use the form submission flow
- Remove the `InstalledBadge` component from both the Skills and Instructions panels, as items in the "Installed" section are already visually grouped under the "Installed" header

Author: sejas

apps/studio/src/components/installed-badge.tsx

@@ -3,7 +3,6 @@ import { moreVertical } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Button from 'src/components/button';
-import { InstalledBadge } from 'src/components/installed-badge';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import {
 	INSTRUCTION_FILES,
@@ -115,12 +114,7 @@ export function AgentInstructionsPanel( { siteId }: { siteId: string } ) {
 								className="flex items-center justify-between px-3 py-2.5 border-b border-frame-border last:border-b-0"
 							>
 								<div className="flex-1 min-w-0 pr-3">
-									<div className="flex items-center gap-2">
-										<span className="text-sm font-medium text-frame-text">
-											{ config.displayName }
-										</span>
-										<InstalledBadge />
-									</div>
+									<div className="text-sm font-medium text-frame-text">{ config.displayName }</div>
 									<div className="text-xs text-frame-text-secondary">
 										{ __( config.description ) }
 									</div>
@@ -317,10 +311,7 @@ export function WordPressSkillsPanel( { siteId }: { siteId: string } ) {
 							className="flex items-center justify-between px-3 py-2.5 border-b border-frame-border last:border-b-0"
 						>
 							<div className="flex-1 min-w-0 pr-3">
-								<div className="flex items-center gap-2">
-									<span className="text-sm font-medium text-frame-text">{ skill.displayName }</span>
-									<InstalledBadge />
-								</div>
+								<div className="text-sm font-medium text-frame-text">{ skill.displayName }</div>
 								<div className="text-xs text-frame-text-secondary">{ skill.description }</div>
 							</div>
 							<DropdownMenu

apps/studio/src/components/site-settings-panels.tsx

@@ -15,7 +15,7 @@ import { SelectControl, TabPanel } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
-import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import Button from 'src/components/button';
 import { ErrorInformation } from 'src/components/error-information';
 import { LearnMoreLink, LearnHowLink } from 'src/components/learn-more';
@@ -110,6 +110,11 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 	const [ customDomainError, setCustomDomainError ] = useState( '' );
 	const [ existingDomainNames, setExistingDomainNames ] = useState< string[] >( [] );
 	const [ enableHttps, setEnableHttps ] = useState( false );
+	const [ activeTab, setActiveTab ] = useState( editModalInitialTab || 'general' );
+	const isFormTab = useMemo(
+		() => activeTab === 'general' || activeTab === 'debugging',
+		[ activeTab ]
+	);
 
 	useEffect( () => {
 		getIpcApi()
@@ -291,14 +296,18 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 				>
 					<form onSubmit={ onSiteEdit }>
 						<TabPanel
-							className="w-full [&>[role=tabpanel]]:h-64 [&>[role=tabpanel]]:overflow-auto"
+							className={ cx(
+								'w-full [&>[role=tabpanel]]:overflow-auto',
+								isFormTab ? '[&>[role=tabpanel]]:h-64' : '[&>[role=tabpanel]]:h-80'
+							) }
 							tabs={ [
 								{ name: 'general', title: __( 'General' ) },
 								{ name: 'debugging', title: __( 'Debugging' ) },
 								{ name: 'skills', title: __( 'Skills' ) },
 								{ name: 'instructions', title: __( 'Instructions' ) },
 							] }
 							initialTabName={ editModalInitialTab }
+							onSelect={ ( tabName: string ) => setActiveTab( tabName ) }
 							orientation="horizontal"
 						>
 							{ ( { name } ) => (
@@ -612,19 +621,21 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 							) }
 						</TabPanel>
 
-						<div className="flex flex-row justify-end gap-x-5 mt-8 px-8">
-							<Button onClick={ closeModal } disabled={ isEditingSite } variant="tertiary">
-								{ __( 'Cancel' ) }
-							</Button>
-							<Button
-								type="submit"
-								variant="primary"
-								isBusy={ isEditingSite }
-								disabled={ isEditingSite || isFormUnchanged || hasValidationErrors }
-							>
-								{ getEditSiteButtonText() }
-							</Button>
-						</div>
+						{ isFormTab && (
+							<div className="flex flex-row justify-end gap-x-5 mt-8 px-8">
+								<Button onClick={ closeModal } disabled={ isEditingSite } variant="tertiary">
+									{ __( 'Cancel' ) }
+								</Button>
+								<Button
+									type="submit"
+									variant="primary"
+									isBusy={ isEditingSite }
+									disabled={ isEditingSite || isFormUnchanged || hasValidationErrors }
+								>
+									{ getEditSiteButtonText() }
+								</Button>
+							</div>
+						) }
 						<div className="components-popover__fallback-container"></div>
 					</form>
 				</Modal>