@elyx-code/editor-ui 0.0.2

package/src/services/editor/icons.ts

@@ -0,0 +1,1093 @@
+import {
+	BaseEntityNames,
+	BUILT_IN_BASE_ENTITY_IDS,
+	checkHasBaseEntity,
+	EntityType,
+	EntityWithValueState,
+	getBaseBuiltInEntities,
+	getExternalIntegrationNameFromBuiltInBaseName,
+	inferDataType,
+	LiteralValueState,
+	PrimitiveTypes,
+	PropertyState,
+	ValueDescriptorState,
+	DefinitionEntityState,
+	BuiltInBaseEntityState,
+	EntityState,
+	PrimitiveEntityState,
+	getFirstBaseEntityWithOwnBase,
+	ENTITY_WITH_DEFAULT_VALUE_TYPES,
+	EntityWithDefaultValueState,
+	DataTypeState,
+	FunctionDeclarationState,
+} from '@elyx-code/project-logic-tree';
+import NumberDataTypeBlackIcon from '../../assets/dataType-icons/black/number.svg';
+import ListDataTypeBlackIcon from '../../assets/dataType-icons/black/list.svg';
+import DefinitionEntityDataTypeBlackIcon from '../../assets/dataType-icons/black/definition-entity.svg';
+import TextDataTypeBlackIcon from '../../assets/dataType-icons/black/text.svg';
+import BooleanDataTypeBlackIcon from '../../assets/dataType-icons/black/boolean.svg';
+import UUIDDataTypeBlackIcon from '../../assets/dataType-icons/black/uuid.svg';
+import DateTimeDataTypeBlackIcon from '../../assets/dataType-icons/black/date-time.svg';
+import UnknownDataTypeBlackIcon from '../../assets/dataType-icons/black/unknown.svg';
+import NumberDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/number.svg';
+import ListDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/list.svg';
+import DefinitionEntityDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/definition-entity.svg';
+import TextDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/text.svg';
+import BooleanDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/boolean.svg';
+import UUIDDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/uuid.svg';
+import DateTimeDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/date-time.svg';
+import UnknownDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/unknown.svg';
+import NumberDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/number.svg';
+import ListDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/list.svg';
+import DefinitionEntityDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/definition-entity.svg';
+import TextDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/text.svg';
+import BooleanDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/boolean.svg';
+import UUIDDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/uuid.svg';
+import DateTimeDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/date-time.svg';
+import UnknownDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/unknown.svg';
+import DatabaseTableIcon from '../../assets/database-table.png';
+import HTTPEndpointIcon from '../../assets/http-endpoint.png';
+import RelationalDatabaseIcon from '../../assets/relational-database.png';
+import NullDataTypeBlackIcon from '../../assets/dataType-icons/black/null.svg';
+import NullDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/null.svg';
+import NullDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/null.svg';
+import VoidDataTypeBlackIcon from '../../assets/dataType-icons/black/void.svg';
+import VoidDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/void.svg';
+import VoidDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/void.svg';
+import ExplicitAnyDataTypeBlackIcon from '../../assets/dataType-icons/black/any.svg';
+import ExplicitAnyDataTypeDarkGreyIcon from '../../assets/dataType-icons/dark-grey/any.svg';
+import ExplicitAnyDataTypeLightGreyIcon from '../../assets/dataType-icons/light-grey/any.svg';
+import BytesDataTypeBlackIcon from '../../assets/dataType-icons/black/binary.svg';
+import ForeignKeyRefBlackIcon from '../../assets/datatype-icons/black/key-file.svg';
+import SQLProgramBlackIcon from '../../assets/datatype-icons/black/sql-program.svg';
+import CronJobIcon from '../../assets/cron-job.png';
+import SQLConnectionConfigIcon from '../../assets/sql-connection-config.svg';
+import SSLCertificateConfigIcon from '../../assets/ssl-certificate-config.svg';
+import SQLRowTransformerIcon from '../../assets/sql-row-transformer.svg';
+import ExternalIntegrationAccountConnectionIcon from '../../assets/authentication.svg';
+import { ENTITY_FA_ICON_NAMES, LOOP_FA_ICON_NAME } from './ui';
+import { getExternalIntegrationIdFromAction } from './utils';
+import { envConfig } from '../../config';
+
+export type EntityTypeIconSize = 'small' | 'medium' | 'large';
+export type EntityTypeIconColor = 'black' | 'dark-grey' | 'light-grey';
+
+export function resolveBuiltInBaseEntityIcon(
+	entity: BuiltInBaseEntityState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	const baseEntity = getFirstBaseEntityWithOwnBase(
+		entity,
+		BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION,
+	);
+
+	if (!!baseEntity) {
+		const integrationsProperty = entity.properties.find(
+			(property) =>
+				property.id ===
+				BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity'][
+					baseEntity.id as 'BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_ENTITY'
+				].properties.integration.id,
+		);
+
+		if (!!integrationsProperty) {
+			const defaultValue = integrationsProperty.getDefaultValue();
+
+			const externalIntegrationId = defaultValue?.value as string | null;
+
+			if (externalIntegrationId) {
+				const url = `${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${externalIntegrationId}.svg`;
+
+				return {
+					url: url,
+				};
+			}
+		}
+	}
+
+	switch (entity.name) {
+		case BaseEntityNames.HTTP_ENDPOINT:
+			return { file: HTTPEndpointIcon };
+		case BaseEntityNames.PERSISTED_ENTITY:
+			return { file: DatabaseTableIcon };
+		case BaseEntityNames.CRON_JOB:
+			return { file: CronJobIcon };
+		case BaseEntityNames.RELATIONAL_DATABASE:
+			return { file: RelationalDatabaseIcon };
+		case BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION:
+			return { file: ExternalIntegrationAccountConnectionIcon };
+		case BaseEntityNames.SQL_ROW_TRANSFORMER:
+			return { file: SQLRowTransformerIcon };
+		case BaseEntityNames.SQL_ROOT_CONNECTION_CONFIG:
+			return { file: SQLConnectionConfigIcon };
+		case BaseEntityNames.SQL_SSL_CONNECTION_CONFIG:
+			return { file: SSLCertificateConfigIcon };
+		default:
+			return { file: DefinitionEntityDataTypeBlackIcon };
+	}
+}
+
+export function resolveComplexEntityIcon(
+	entity: DefinitionEntityState | BuiltInBaseEntityState | PrimitiveEntityState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	switch (entity.type) {
+		case EntityType.DefinitionEntity:
+			return resolveDefinitionEntityIcon(entity, color);
+		case EntityType.BuiltInBaseEntity:
+			return resolveBuiltInBaseEntityIcon(entity, color);
+		case EntityType.PrimitiveEntity:
+			return resolvePrimitiveEntityDataTypeIcon(entity, color);
+		default:
+			return {
+				file: DefinitionEntityDataTypeBlackIcon,
+			};
+	}
+}
+
+export function resolveDefinitionEntityIcon(
+	entity: DefinitionEntityState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	if (
+		checkHasBaseEntity(entity, BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION)
+	) {
+		const baseEntity = getFirstBaseEntityWithOwnBase(
+			entity,
+			BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION,
+		);
+
+		const integrationBuiltInPropertyId =
+			BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity'][
+				baseEntity.id as 'BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_ENTITY'
+			].properties.integration.id;
+
+		const integrationsProperty = entity.properties.find(
+			(property) =>
+				property.extends?.id === integrationBuiltInPropertyId ||
+				// It could be that this is a specific connection entity, and therefore itself extends the base connection entity
+				property.implements.find(
+					(impl) => impl.id === integrationBuiltInPropertyId,
+				),
+		);
+
+		if (!!integrationsProperty) {
+			const defaultValue = integrationsProperty.getDefaultValue();
+
+			const externalIntegrationId = defaultValue?.value as string | null;
+
+			if (externalIntegrationId) {
+				const url = `${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${externalIntegrationId}.svg`;
+
+				return {
+					url: url,
+				};
+			}
+		}
+
+		return { file: ExternalIntegrationAccountConnectionIcon };
+	}
+
+	const baseEntityTypes = getBaseBuiltInEntities(entity);
+	if (
+		!!baseEntityTypes.find((ent) => ent.id === BaseEntityNames.HTTP_ENDPOINT)
+	) {
+		return { file: HTTPEndpointIcon };
+	} else if (
+		!!baseEntityTypes.find((ent) => ent.id === BaseEntityNames.PERSISTED_ENTITY)
+	) {
+		return { file: DatabaseTableIcon };
+	} else if (
+		!!baseEntityTypes.find((ent) => ent.id === BaseEntityNames.CRON_JOB)
+	) {
+		return { file: CronJobIcon };
+	} else if (
+		!!baseEntityTypes.find(
+			(ent) => ent.id === BaseEntityNames.RELATIONAL_DATABASE,
+		)
+	) {
+		return { file: RelationalDatabaseIcon };
+	} else if (
+		!!baseEntityTypes.find(
+			(ent) => ent.id === BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION,
+		)
+	) {
+		return { file: ExternalIntegrationAccountConnectionIcon };
+	} else if (
+		!!baseEntityTypes.find(
+			(ent) => ent.id === BaseEntityNames.SQL_ROW_TRANSFORMER,
+		)
+	) {
+		return { file: SQLRowTransformerIcon };
+	} else if (
+		!!baseEntityTypes.find(
+			(ent) => ent.id === BaseEntityNames.SQL_ROOT_CONNECTION_CONFIG,
+		)
+	) {
+		return { file: SQLConnectionConfigIcon };
+	} else if (
+		!!baseEntityTypes.find(
+			(ent) => ent.id === BaseEntityNames.SQL_SSL_CONNECTION_CONFIG,
+		)
+	) {
+		return { file: SSLCertificateConfigIcon };
+	}
+
+	return {
+		file: DefinitionEntityDataTypeBlackIcon,
+	};
+}
+
+export function resolveLiteralValueDataTypeIcon(
+	entity: LiteralValueState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	if (entity.name === PrimitiveTypes.Number) {
+		switch (color) {
+			case 'black':
+				return { file: NumberDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: NumberDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: NumberDataTypeLightGreyIcon };
+			default:
+				return { file: NumberDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.String) {
+		switch (color) {
+			case 'black':
+				return { file: TextDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: TextDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: TextDataTypeLightGreyIcon };
+			default:
+				return { file: TextDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.Boolean) {
+		switch (color) {
+			case 'black':
+				return { file: BooleanDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: BooleanDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: BooleanDataTypeLightGreyIcon };
+			default:
+				return { file: BooleanDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.UUID) {
+		switch (color) {
+			case 'black':
+				return { file: UUIDDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: UUIDDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: UUIDDataTypeLightGreyIcon };
+			default:
+				return { file: UUIDDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.Date) {
+		switch (color) {
+			case 'black':
+				return { file: DateTimeDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: DateTimeDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: DateTimeDataTypeLightGreyIcon };
+			default:
+				return { file: DateTimeDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.KeyValue) {
+		switch (color) {
+			case 'black':
+				return { file: DefinitionEntityDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: DefinitionEntityDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: DefinitionEntityDataTypeLightGreyIcon };
+			default:
+				return { file: DefinitionEntityDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.Untyped) {
+		switch (color) {
+			case 'black':
+				return { file: ExplicitAnyDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: ExplicitAnyDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: ExplicitAnyDataTypeLightGreyIcon };
+			default:
+				return { file: ExplicitAnyDataTypeBlackIcon };
+		}
+	}
+
+	if (entity.name === PrimitiveTypes.Bytes) {
+		switch (color) {
+			case 'black':
+				return { file: BytesDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: BytesDataTypeBlackIcon };
+			case 'light-grey':
+				return { file: BytesDataTypeBlackIcon };
+			default:
+				return { file: BytesDataTypeBlackIcon };
+		}
+	}
+
+	switch (color) {
+		case 'black':
+			return { file: UnknownDataTypeBlackIcon };
+		case 'dark-grey':
+			return { file: UnknownDataTypeDarkGreyIcon };
+		case 'light-grey':
+			return { file: UnknownDataTypeLightGreyIcon };
+		default:
+			return { file: UnknownDataTypeBlackIcon };
+	}
+}
+
+export function resolvePrimitiveEntityDataTypeIcon(
+	entity: PrimitiveEntityState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	switch (entity.name) {
+		case PrimitiveTypes.Number: {
+			switch (color) {
+				case 'black':
+					return { file: NumberDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: NumberDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: NumberDataTypeLightGreyIcon };
+				default:
+					return { file: NumberDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.String:
+		case PrimitiveTypes.Enum: {
+			switch (color) {
+				case 'black':
+					return { file: TextDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: TextDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: TextDataTypeLightGreyIcon };
+				default:
+					return { file: TextDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.Boolean: {
+			switch (color) {
+				case 'black':
+					return { file: BooleanDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: BooleanDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: BooleanDataTypeLightGreyIcon };
+				default:
+					return { file: BooleanDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.UUID: {
+			switch (color) {
+				case 'black':
+					return { file: UUIDDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: UUIDDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: UUIDDataTypeLightGreyIcon };
+				default:
+					return { file: UUIDDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.Date: {
+			switch (color) {
+				case 'black':
+					return { file: DateTimeDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: DateTimeDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: DateTimeDataTypeLightGreyIcon };
+				default:
+					return { file: DateTimeDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.Untyped: {
+			switch (color) {
+				case 'black':
+					return { file: ExplicitAnyDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: ExplicitAnyDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: ExplicitAnyDataTypeLightGreyIcon };
+				default:
+					return { file: ExplicitAnyDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.Bytes: {
+			switch (color) {
+				case 'black':
+					return { file: BytesDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: BytesDataTypeBlackIcon };
+				case 'light-grey':
+					return { file: BytesDataTypeBlackIcon };
+				default:
+					return { file: BytesDataTypeBlackIcon };
+			}
+		}
+		// fa-solid fa-empty-set
+		case PrimitiveTypes.Null: {
+			switch (color) {
+				case 'black':
+					return { file: NullDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: NullDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: NullDataTypeLightGreyIcon };
+				default:
+					return { file: NullDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.Void: {
+			switch (color) {
+				case 'black':
+					return { file: VoidDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: VoidDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: VoidDataTypeLightGreyIcon };
+				default:
+					return { file: VoidDataTypeBlackIcon };
+			}
+		}
+		case PrimitiveTypes.SqlProgram: {
+			switch (color) {
+				case 'black':
+					return { file: SQLProgramBlackIcon };
+				case 'dark-grey':
+					return { file: SQLProgramBlackIcon };
+				case 'light-grey':
+					return { file: SQLProgramBlackIcon };
+				default:
+					return { file: SQLProgramBlackIcon };
+			}
+		}
+		case PrimitiveTypes.Untyped: {
+			switch (color) {
+				case 'black':
+					return { file: ExplicitAnyDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: ExplicitAnyDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: ExplicitAnyDataTypeLightGreyIcon };
+				default:
+					return { file: ExplicitAnyDataTypeBlackIcon };
+			}
+		}
+		default: {
+			switch (color) {
+				case 'black':
+					return { file: DefinitionEntityDataTypeBlackIcon };
+				case 'dark-grey':
+					return { file: DefinitionEntityDataTypeDarkGreyIcon };
+				case 'light-grey':
+					return { file: DefinitionEntityDataTypeLightGreyIcon };
+				default:
+					return { file: DefinitionEntityDataTypeBlackIcon };
+			}
+		}
+	}
+}
+
+export function resolveExplicitDataTypeIcon(
+	icon:
+		| PrimitiveTypes
+		| 'list'
+		| EntityType.DefinitionEntity
+		| 'unknown'
+		| BaseEntityNames
+		| 'foreign-key-ref',
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	if (!icon || icon === 'unknown') {
+		switch (color) {
+			case 'black':
+				return { file: UnknownDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: UnknownDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: UnknownDataTypeLightGreyIcon };
+			default:
+				return { file: UnknownDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === 'foreign-key-ref') {
+		switch (color) {
+			case 'black':
+				return { file: ForeignKeyRefBlackIcon };
+			case 'dark-grey':
+				return { file: ForeignKeyRefBlackIcon };
+			case 'light-grey':
+				return { file: ForeignKeyRefBlackIcon };
+			default:
+				return { file: ForeignKeyRefBlackIcon };
+		}
+	}
+
+	// If there is a default value, we can infer the type from it
+	if (icon === PrimitiveTypes.Number) {
+		switch (color) {
+			case 'black':
+				return { file: NumberDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: NumberDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: NumberDataTypeLightGreyIcon };
+			default:
+				return { file: NumberDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.String) {
+		switch (color) {
+			case 'black':
+				return { file: TextDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: TextDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: TextDataTypeLightGreyIcon };
+			default:
+				return { file: TextDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.Boolean) {
+		switch (color) {
+			case 'black':
+				return { file: BooleanDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: BooleanDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: BooleanDataTypeLightGreyIcon };
+			default:
+				return { file: BooleanDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.UUID) {
+		switch (color) {
+			case 'black':
+				return { file: UUIDDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: UUIDDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: UUIDDataTypeLightGreyIcon };
+			default:
+				return { file: UUIDDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.Date) {
+		switch (color) {
+			case 'black':
+				return { file: DateTimeDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: DateTimeDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: DateTimeDataTypeLightGreyIcon };
+			default:
+				return { file: DateTimeDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.KeyValue) {
+		switch (color) {
+			case 'black':
+				return { file: DefinitionEntityDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: DefinitionEntityDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: DefinitionEntityDataTypeLightGreyIcon };
+			default:
+				return { file: DefinitionEntityDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.Untyped) {
+		switch (color) {
+			case 'black':
+				return { file: ExplicitAnyDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: ExplicitAnyDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: ExplicitAnyDataTypeLightGreyIcon };
+			default:
+				return { file: ExplicitAnyDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.Null) {
+		switch (color) {
+			case 'black':
+				return { file: NullDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: NullDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: NullDataTypeLightGreyIcon };
+			default:
+				return { file: NullDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.Void) {
+		switch (color) {
+			case 'black':
+				return { file: VoidDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: VoidDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: VoidDataTypeLightGreyIcon };
+			default:
+				return { file: VoidDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.SqlProgram) {
+		switch (color) {
+			case 'black':
+				return { file: SQLProgramBlackIcon };
+			case 'dark-grey':
+				return { file: SQLProgramBlackIcon };
+			case 'light-grey':
+				return { file: SQLProgramBlackIcon };
+			default:
+				return { file: SQLProgramBlackIcon };
+		}
+	}
+
+	if (icon === PrimitiveTypes.Bytes) {
+		switch (color) {
+			case 'black':
+				return { file: BytesDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: BytesDataTypeBlackIcon };
+			case 'light-grey':
+				return { file: BytesDataTypeBlackIcon };
+			default:
+				return { file: BytesDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === 'list') {
+		switch (color) {
+			case 'black':
+				return { file: ListDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: ListDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: ListDataTypeLightGreyIcon };
+			default:
+				return { file: ListDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === EntityType.DefinitionEntity) {
+		switch (color) {
+			case 'black':
+				return { file: DefinitionEntityDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: DefinitionEntityDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: DefinitionEntityDataTypeLightGreyIcon };
+			default:
+				return { file: DefinitionEntityDataTypeBlackIcon };
+		}
+	}
+
+	if (icon === BaseEntityNames.HTTP_ENDPOINT) {
+		return { file: HTTPEndpointIcon };
+	} else if (icon === BaseEntityNames.PERSISTED_ENTITY) {
+		return { file: DatabaseTableIcon };
+	} else if (icon === BaseEntityNames.CRON_JOB) {
+		return { file: CronJobIcon };
+	} else if (icon === BaseEntityNames.RELATIONAL_DATABASE) {
+		return { file: RelationalDatabaseIcon };
+	} else if (icon === BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION) {
+		return { file: ExternalIntegrationAccountConnectionIcon };
+	} else if (icon === BaseEntityNames.SQL_ROW_TRANSFORMER) {
+		return { file: SQLRowTransformerIcon };
+	} else if (icon === BaseEntityNames.SQL_ROOT_CONNECTION_CONFIG) {
+		return { file: SQLConnectionConfigIcon };
+	} else if (icon === BaseEntityNames.SQL_SSL_CONNECTION_CONFIG) {
+		return { file: SSLCertificateConfigIcon };
+	}
+
+	const externalIntegrationId = getExternalIntegrationNameFromBuiltInBaseName(
+		icon as BaseEntityNames,
+	);
+
+	if (externalIntegrationId) {
+		const url = `${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${externalIntegrationId}.svg`;
+		return { url: url };
+	}
+
+	return { file: DefinitionEntityDataTypeBlackIcon };
+}
+
+export function resolveDataTypeIcon(
+	dataType: DataTypeState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	if (!dataType) {
+		if (ENTITY_WITH_DEFAULT_VALUE_TYPES.includes(dataType?.parent.type)) {
+			const defaultValue = (
+				dataType?.parent as EntityWithDefaultValueState
+			).getDefaultValue();
+			// If there is a default value, we can infer the type from it
+			if (defaultValue) {
+				return resolveLiteralValueDataTypeIcon(defaultValue, color);
+			}
+		}
+
+		switch (color) {
+			case 'black':
+				return { file: UnknownDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: UnknownDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: UnknownDataTypeLightGreyIcon };
+			default:
+				return { file: UnknownDataTypeBlackIcon };
+		}
+	}
+
+	if (dataType.isList) {
+		switch (color) {
+			case 'black':
+				return { file: ListDataTypeBlackIcon };
+			case 'dark-grey':
+				return { file: ListDataTypeDarkGreyIcon };
+			case 'light-grey':
+				return { file: ListDataTypeLightGreyIcon };
+			default:
+				return { file: ListDataTypeBlackIcon };
+		}
+	}
+
+	if (!!dataType.foreignKeyRef) {
+		switch (color) {
+			case 'black':
+				return { file: ForeignKeyRefBlackIcon };
+			case 'dark-grey':
+				return { file: ForeignKeyRefBlackIcon };
+			case 'light-grey':
+				return { file: ForeignKeyRefBlackIcon };
+			default:
+				return { file: ForeignKeyRefBlackIcon };
+		}
+	}
+
+	// if (!dataType.entity) {
+	// 	switch (color) {
+	// 		case 'black':
+	// 			return { file: UnknownDataTypeBlackIcon };
+	// 		case 'dark-grey':
+	// 			return { file: UnknownDataTypeDarkGreyIcon };
+	// 		case 'light-grey':
+	// 			return { file: UnknownDataTypeLightGreyIcon };
+	// 		default:
+	// 			return { file: UnknownDataTypeBlackIcon };
+	// 	}
+	// }
+
+	if (dataType.entity?.type === EntityType.DefinitionEntity) {
+		return resolveDefinitionEntityIcon(dataType.entity);
+	} else if (dataType.entity?.type === EntityType.BuiltInBaseEntity) {
+		return resolveBuiltInBaseEntityIcon(dataType.entity);
+	} else if (dataType.entity?.type === EntityType.PrimitiveEntity) {
+		const resolved = resolvePrimitiveEntityDataTypeIcon(dataType.entity, color);
+		return resolved;
+	} else if (dataType.entity?.type === EntityType.LiteralValue) {
+		return resolveLiteralValueDataTypeIcon(dataType.entity, color);
+	}
+
+	if (
+		!!dataType.andChildrenGroup &&
+		Array.isArray(dataType.andChildrenGroup) &&
+		dataType.andChildrenGroup.length > 0
+	) {
+		if (dataType.andChildrenGroup.length === 1) {
+			// For AND groups, just resolve the first child's data-type icon
+			const firstChild = dataType.andChildrenGroup[0];
+
+			if (!!firstChild) {
+				return resolveDataTypeIcon(firstChild, color);
+			}
+		} else {
+			const primitiveChild = dataType.andChildrenGroup.find(
+				(child) =>
+					!!child?.entity &&
+					[EntityType.PrimitiveEntity, EntityType.LiteralValue].includes(
+						child.entity?.type,
+					),
+			);
+
+			if (!!primitiveChild) {
+				return resolveDataTypeIcon(primitiveChild, color);
+			}
+
+			const numberOfDefEntities = dataType.andChildrenGroup.filter((child) =>
+				[EntityType.DefinitionEntity].includes(child.entity?.type),
+			).length;
+
+			const definitionEntityChild = dataType.andChildrenGroup.find((child) =>
+				[EntityType.DefinitionEntity].includes(child.entity?.type),
+			);
+
+			if (numberOfDefEntities === 1 && definitionEntityChild) {
+				return resolveDataTypeIcon(definitionEntityChild, color);
+			}
+
+			if (numberOfDefEntities > 1) {
+				// If there are multiple definition entities, just return the generic definition entity icon
+				switch (color) {
+					case 'black':
+						return { file: DefinitionEntityDataTypeBlackIcon };
+					case 'dark-grey':
+						return { file: DefinitionEntityDataTypeDarkGreyIcon };
+					case 'light-grey':
+						return { file: DefinitionEntityDataTypeLightGreyIcon };
+					default:
+						return { file: DefinitionEntityDataTypeBlackIcon };
+				}
+			}
+		}
+	}
+
+	if (
+		!!dataType.orChildrenGroup &&
+		Array.isArray(dataType.orChildrenGroup) &&
+		dataType.orChildrenGroup.length > 0
+	) {
+		// const hasNullChild = dataType.orChildrenGroup.find(
+		// 	(child) => child.entity?.name === PrimitiveTypes.Null,
+		// );
+
+		// For OR groups, just resolve the first child's data-type icon
+		const childrenWithoutNull = dataType.orChildrenGroup.filter(
+			(child) =>
+				child.entity?.name !== PrimitiveTypes.Null,
+		);
+
+		if (childrenWithoutNull.length === 1) {
+			const firstChild = childrenWithoutNull[0];
+
+			if (!!firstChild) {
+				return resolveDataTypeIcon(firstChild, color);
+			}
+		}
+	}
+
+	if (ENTITY_WITH_DEFAULT_VALUE_TYPES.includes(dataType?.parent.type)) {
+		const defaultValue = (
+			dataType?.parent as EntityWithDefaultValueState
+		).getDefaultValue();
+		// If there is a default value, we can infer the type from it
+		if (defaultValue) {
+			return resolveLiteralValueDataTypeIcon(defaultValue, color);
+		}
+	}
+
+	switch (color) {
+		case 'black':
+			return { file: UnknownDataTypeBlackIcon };
+		case 'dark-grey':
+			return { file: UnknownDataTypeDarkGreyIcon };
+		case 'light-grey':
+			return { file: UnknownDataTypeLightGreyIcon };
+		default:
+			return { file: UnknownDataTypeBlackIcon };
+	}
+}
+
+export function resolveEntityDataTypeIcon(
+	entity: EntityWithValueState | PropertyState | ValueDescriptorState | FunctionDeclarationState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	if (!entity) {
+		switch (color) {
+			case 'black':
+				return {
+					file: UnknownDataTypeBlackIcon,
+				};
+			case 'dark-grey':
+				return {
+					file: UnknownDataTypeDarkGreyIcon,
+				};
+			case 'light-grey':
+				return {
+					file: UnknownDataTypeLightGreyIcon,
+				};
+			default:
+				return {
+					file: UnknownDataTypeBlackIcon,
+				};
+		}
+	}
+
+	const dataType =
+		entity?.getDataType(null) || inferDataType(entity, null) || null;
+
+	return resolveDataTypeIcon(dataType, color);
+}
+
+export function resolveEntityIcon(
+	entity: EntityState,
+	color: EntityTypeIconColor = 'black',
+): { fa?: string; file?: string; url?: string } {
+	if (!entity) {
+		return {
+			file: UnknownDataTypeBlackIcon,
+		};
+	}
+
+	switch (entity.type) {
+		case EntityType.DefinitionEntity:
+			return resolveDefinitionEntityIcon(entity, color);
+		case EntityType.BuiltInBaseEntity: {
+			return resolveBuiltInBaseEntityIcon(entity, color);
+		}
+		case EntityType.PrimitiveEntity: {
+			return resolvePrimitiveEntityDataTypeIcon(entity, color);
+		}
+		case EntityType.GlobalEvent: {
+			return {
+				fa: ENTITY_FA_ICON_NAMES[EntityType.GlobalEvent],
+			};
+		}
+		// case EntityType.FunctionDeclaration
+		case EntityType.InternalCall: {
+			return {
+				fa: ENTITY_FA_ICON_NAMES[EntityType.InternalCall],
+			};
+		}
+		case EntityType.VariableInstance:
+		case EntityType.OutputMap:
+		case EntityType.InputMap: {
+			if (entity.declaration) {
+				const declaration = entity.declaration;
+
+				return resolveEntityIcon(declaration, color);
+			}
+
+			return resolveEntityDataTypeIcon(entity, color);
+		}
+		case EntityType.Operation: {
+			const externalIntegrationId = getExternalIntegrationIdFromAction(entity);
+
+			if (externalIntegrationId) {
+				const url = `${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${externalIntegrationId}.svg`;
+
+				return {
+					url: url,
+				};
+			}
+
+			return {
+				fa: ENTITY_FA_ICON_NAMES[EntityType.Operation],
+			};
+		}
+		case EntityType.Property:
+		case EntityType.VariableDeclaration:
+		case EntityType.ArgumentDeclaration:
+		case EntityType.ValueDescriptor: {
+			return resolveEntityDataTypeIcon(entity, color);
+		}
+		case EntityType.Loop: {
+			return {
+				fa: LOOP_FA_ICON_NAME,
+			};
+		}
+		case EntityType.ActionDescriptor: {
+			// Here, find out what is describing,
+			// If they are a built in value-descriptor, they must be part of one of the types
+			const asOperation = entity.project.operationDeclarations.find(
+				(op) => op.id === entity.id,
+			);
+
+			if (asOperation) {
+				// If it is an operation that represents an external integration,
+				// Return the URL of the icon
+				const externalIntegrationId =
+					getExternalIntegrationIdFromAction(asOperation);
+
+				if (externalIntegrationId) {
+					const url = `${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${externalIntegrationId}.svg`;
+
+					return {
+						url: url,
+					};
+				}
+
+				return {
+					fa: ENTITY_FA_ICON_NAMES[EntityType.Operation],
+				};
+			}
+
+			const asEvent = entity.project.globalEventActionDescriptors.find(
+				(op) => op.id === entity.id,
+			);
+
+			if (asEvent) {
+				return {
+					fa: ENTITY_FA_ICON_NAMES[EntityType.GlobalEvent],
+				};
+			}
+
+			const asLoop = entity.project.loopDeclarations.find(
+				(op) => op.id === entity.id,
+			);
+
+			if (asLoop) {
+				return {
+					fa: LOOP_FA_ICON_NAME,
+				};
+			}
+
+			const asCondition = entity.project.conditionDeclarations.find(
+				(op) => op.id === entity.id,
+			);
+
+			if (asCondition) {
+				return {
+					fa: ENTITY_FA_ICON_NAMES[EntityType.Condition],
+				};
+			}
+
+			// Other, used as global data-types to be used in the project by the user
+			return {
+				fa: 'fa-cube',
+			};
+		}
+		default: {
+			return {
+				// @ts-ignore
+				fa: ENTITY_FA_ICON_NAMES[entity.type] || 'fa-cube',
+			};
+		}
+	}
+}