Function SecretsTable

site/src/pages/UserSettingsPage/SecretsPage/SecretsTable.tsx:39–131

({
	secrets,
	isLoading,
	hasLoaded,
	isDeleting,
	onAddSecret,
	onEditSecret,
	onDeleteSecret,
})

};

export const SecretsTable: FC<SecretsTableProps> = ({
	secrets,
	isLoading,
	hasLoaded,
	isDeleting,
	onAddSecret,
	onEditSecret,
	onDeleteSecret,
}) => {
	const [secretToDelete, setSecretToDelete] = useState<UserSecret>();

	return (
		<>
			<DeleteSecretDialog
				secret={secretToDelete}
				isDeleting={isDeleting}
				onCancel={() => setSecretToDelete(undefined)}
				onConfirm={(secret) => {
					void Promise.resolve()
						.then(() => onDeleteSecret(secret))
						.then(() => {
							setSecretToDelete(undefined);
						})
						.catch(() => {
							// onDeleteSecret reports failures with a toast before rejecting.
							// Swallow the rejection here to avoid an unhandled promise rejection warning.
						});
				}}
			/>

			<Table aria-label="User secrets">
				<TableHeader>
					<TableRow>
						<TableHead className="w-[16%]">Name</TableHead>
						<TableHead className="w-[14%]">Environment variable</TableHead>
						<TableHead className="w-[18%]">File path</TableHead>
						<TableHead className="w-[11%]">Type</TableHead>
						<TableHead className="w-[23%]">Description</TableHead>
						<TableHead className="w-[12%]">Updated</TableHead>
						<TableHead className="w-[1%]" />
					</TableRow>
				</TableHeader>
				<TableBody>
					{isLoading && <TableLoader />}
					{hasLoaded && !isLoading && (!secrets || secrets.length === 0) && (
						<TableEmpty
							message="No secrets yet"
							description="Create a secret to inject it into workspaces you own."
							cta={
								<Button onClick={(event) => onAddSecret(event.currentTarget)}>
									Add secret
								</Button>
							}
						/>
					)}
					{!isLoading &&
						secrets?.map((secret) => (
							<TableRow key={secret.id}>