Repository: n8n-io/n8n
File: packages/frontend/editor-ui/src/features/integrations/secretsProviders.ee/composables/useConnectionModal.ee.ts (TypeScript)

Code before:
 */

function isValidConnectionName(name: string): boolean {
	return CONNECTION_NAME_REGEX.test(name);
}

export function useConnectionModal(options: UseConnectionModalOptions) {
	const { providerTypes } = options;

	// Composables
	const rbacStore = useRBACStore();
	const toast = useToast();
	const projectsStore = useProjectsStore();

	// State
	const providerKey = ref<string | undefined>(options.providerKey?.value);
	const providerSecretsCount = ref(0);
	const connectionName = ref('');
	const originalConnectionName = ref('');
	const connectionNameBlurred = ref(false);
	const selectedProviderType = ref<SecretProviderTypeResponse | undefined>(undefined);
	const connectionSettings = ref<Record<string, IUpdateInformation['value']>>({});
	const originalSettings = ref<Record<string, IUpdateInformation['value']>>({});
	const isSaving = ref(false);
	const didSave = ref(false);
	const parameterInputRefs = ref<Record<string, ParameterInputRef | null>>({});

	// Connection composable (low-level API operations)
	const connection = useSecretsProviderConnection();

	// Display logic - determines which properties should be shown
	function shouldDisplayProperty(property: INodeProperties): boolean {
		let visible = true;

		if (property.displayOptions?.show) {
			visible =
				visible &&
				Object.entries(property.displayOptions.show).every(([key, value]) => {
					return value?.includes(connectionSettings.value[key] as string);
				});
		}

		if (property.displayOptions?.hide) {
			visible =
				visible &&
				!Object.entries(property.displayOptions.hide).every(([key, value]) => {
					return value?.includes(connectionSettings.value[key] as string);
				});
		}

		return visible;

Review comment (suggestion):
Few questions (Vue noob here):

- (Also a nit) Why the name `ParamaterInputRef`? I don't see `Ref` used in other ref names, which to me makes sense as it's kind of a repetition. Does `inputParameters` make sense? Or a
- What is this used for? Am I misunderstanding the code or is this only used to determine if we have a validation error or not?

Happy to huddle on this btw, I would personally benefit from it 😄 

Code after:
function isValidConnectionName(name: string): boolean {
	return CONNECTION_NAME_REGEX.test(name);
}

export function useConnectionModal(options: UseConnectionModalOptions) {
	const { providerTypes } = options;

	// Composables
	const rbacStore = useRBACStore();
	const toast = useToast();
	const projectsStore = useProjectsStore();
	const { check: checkDevFeatureFlag } = useEnvFeatureFlag();

	// State
	const providerKey = ref<string | undefined>(options.providerKey?.value);
	const providerSecretsCount = ref(0);
	const connectionName = ref('');
	const originalConnectionName = ref('');
	const connectionNameBlurred = ref(false);
	const selectedProviderType = ref<SecretProviderTypeResponse | undefined>(undefined);
	const connectionSettings = ref<Record<string, IUpdateInformation['value']>>({});
	const originalSettings = ref<Record<string, IUpdateInformation['value']>>({});
	const isSaving = ref(false);
	const didSave = ref(false);
	const parameterValidationStates = ref<Record<string, boolean>>({});

	// Connection composable (low-level API operations)
	const connection = useSecretsProviderConnection();

	// Display logic - determines which properties should be shown
	function shouldDisplayProperty(property: INodeProperties): boolean {
		let visible = true;

		if (property.displayOptions?.show) {
			visible =
				visible &&
				Object.entries(property.displayOptions.show).every(([key, value]) => {
					return value?.includes(connectionSettings.value[key] as string);
				});
		}

		if (property.displayOptions?.hide) {
			visible =
				visible &&
				!Object.entries(property.displayOptions.hide).every(([key, value]) => {
					return value?.includes(connectionSettings.value[key] as string);
				});
		}

		return visible;
	}