@elyx-code/editor-ui 0.0.2

package/src/components/resources/relational-database/RelationalDatabase.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import '../resources-dialog.css';
+import DatabaseTable from './DatabaseTable';
+import {
+	InfrastructureResourceType,
+	IRelationalDatabaseInfrastructureResource,
+} from '@elyx-code/definitions';
+import { EditorService } from '../../../services/editor';
+import { useParams } from 'react-router-dom';
+import RelationalDatabaseSecrets from './RelationalDatabaseSecrets';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+export interface IRelationalDatabaseProps {
+	onClose: () => void;
+	project: EditorService;
+}
+
+const RelationalDatabase: React.FC<IRelationalDatabaseProps> = ({
+	onClose,
+	project,
+}) => {
+	const { projectId, resourceId } = useParams<{
+		projectId: string;
+		resourceId: string;
+	}>();
+
+	const resource = project?.liveResources.find(
+		(resource) =>
+			resource.resourceType === InfrastructureResourceType.RelationalDatabase &&
+			resource.resourceId === resourceId
+	);
+
+	if (!resource) {
+		return null;
+	}
+
+	const secrets = resource.details;
+	Logger.log('Databse secrets: ', secrets);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				marginBottom: '28px',
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: '16px',
+					marginLeft: '80px',
+					marginTop: '28px',
+					marginBottom: '4px',
+				}}
+			>
+				<p
+					style={{
+						margin: '0px',
+						color: 'rgba(0,0,0,0.7)',
+						fontSize: '14px',
+					}}
+				>
+					These resources are currently in use in your live project.
+					<br />
+					By making changes to them, you might disrupt your user's experience.
+				</p>
+			</div>
+
+			{/* Secrets */}
+			<RelationalDatabaseSecrets
+				resource={resource as IRelationalDatabaseInfrastructureResource}
+			/>
+
+			<section style={{ marginTop: 6 }}>
+				<DatabaseTable project={project} />
+			</section>
+		</div>
+	);
+};
+
+export default RelationalDatabase;

package/src/components/resources/relational-database/RelationalDatabaseSecrets.tsx

@@ -0,0 +1,361 @@
+import React, { useState } from 'react';
+import '../resources-dialog.css';
+import { IRelationalDatabaseInfrastructureResource } from '@elyx-code/definitions';
+import { Collapse, IconButton } from '@mui/material';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { popupNotification } from '../../../popup-notification';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+export interface IRelationalDatabaseSecretsProps {
+	resource: IRelationalDatabaseInfrastructureResource;
+}
+
+const RelationalDatabaseSecrets: React.FC<IRelationalDatabaseSecretsProps> = ({
+	resource,
+}) => {
+	const [isSectionOpen, setIsSectionOpen] = useState(false);
+
+	if (!resource) {
+		return null;
+	}
+
+	const secrets = resource.details;
+	Logger.log('Databse secrets: ', secrets);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: isSectionOpen ? 20 : 0,
+			}}
+		>
+			<EntityDialogSectionHeader
+				title='Secrets'
+				subtitle={`See the secrets and credentials to connect to your database`}
+				hideShowSuffix='the secrets section'
+				open={isSectionOpen}
+				onToggle={() => setIsSectionOpen(!isSectionOpen)}
+				headerEndIcon={
+					// Copy all
+					<IconButton
+						size='small'
+						style={{ width: 24, height: 24, fontSize: 16 }}
+						onClick={(e) => {
+							window.navigator.clipboard.writeText(
+								`Endpoint: ${secrets.databaseEndpoint}\nName: ${secrets.databaseName}\nResource ID: ${secrets.databaseId}\nPassword: ${secrets.databasePassword}\nPort: ${secrets.databasePort}\nUsername: ${secrets.databaseUsername}`
+							);
+							popupNotification({
+								text: 'Copied all secrets to clipboard',
+								color: 'primary',
+							});
+						}}
+					>
+						<i
+							className='fa-regular fa-copy'
+							style={{
+								color: 'rgba(0,0,0,0.54)',
+								fontSize: 16,
+								cursor: 'pointer',
+							}}
+						/>
+					</IconButton>
+				}
+				expandIcon={
+					<i
+						className={`search-statement-dialog__collapse_section-icon fa-solid ${
+							isSectionOpen ? 'fa-eye-slash' : 'fa-eye'
+						}`}
+					/>
+				}
+			/>
+
+			<Collapse in={isSectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 12,
+						marginLeft: 80,
+						paddingRight: 40,
+					}}
+				>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<IconButton
+							size='small'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								window.navigator.clipboard.writeText(secrets.databaseEndpoint);
+								popupNotification({
+									text: 'Copied endpoint to clipboard',
+									color: 'primary',
+								});
+							}}
+						>
+							<i
+								style={{
+									color: 'rgba(0,0,0,0.54)',
+								}}
+								className='fa-regular fa-copy'
+							/>
+						</IconButton>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								fontWeight: 'bold',
+							}}
+						>
+							Endpoint
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								color: 'rgba(0,0,0,0.7)',
+								fontSize: '14px',
+							}}
+						>
+							{secrets.databaseEndpoint}
+						</p>
+					</div>
+
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<IconButton
+							size='small'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								window.navigator.clipboard.writeText(secrets.databaseEndpoint);
+								popupNotification({
+									text: 'Copied endpoint to clipboard',
+									color: 'primary',
+								});
+							}}
+						>
+							<i
+								style={{
+									color: 'rgba(0,0,0,0.54)',
+								}}
+								className='fa-regular fa-copy'
+							/>
+						</IconButton>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								fontWeight: 'bold',
+							}}
+						>
+							Name
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								color: 'rgba(0,0,0,0.7)',
+								fontSize: '14px',
+							}}
+						>
+							{secrets.databaseName}
+						</p>
+					</div>
+
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<IconButton
+							size='small'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								window.navigator.clipboard.writeText(secrets.databaseId);
+								popupNotification({
+									text: 'Copied resource ID to clipboard',
+									color: 'primary',
+								});
+							}}
+						>
+							<i
+								style={{
+									color: 'rgba(0,0,0,0.54)',
+								}}
+								className='fa-regular fa-copy'
+							/>
+						</IconButton>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								fontWeight: 'bold',
+							}}
+						>
+							Resource ID
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								color: 'rgba(0,0,0,0.7)',
+								fontSize: '14px',
+							}}
+						>
+							{secrets.databaseId}
+						</p>
+					</div>
+
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<IconButton
+							size='small'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								window.navigator.clipboard.writeText(secrets.databasePassword);
+								popupNotification({
+									text: 'Copied password to clipboard',
+									color: 'primary',
+								});
+							}}
+						>
+							<i
+								style={{
+									color: 'rgba(0,0,0,0.54)',
+								}}
+								className='fa-regular fa-copy'
+							/>
+						</IconButton>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								fontWeight: 'bold',
+							}}
+						>
+							Password
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								color: 'rgba(0,0,0,0.7)',
+								fontSize: '14px',
+							}}
+						>
+							{secrets.databasePassword}
+						</p>
+					</div>
+
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<IconButton
+							size='small'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								window.navigator.clipboard.writeText(
+									secrets.databasePort?.toString()
+								);
+								popupNotification({
+									text: 'Copied port to clipboard',
+									color: 'primary',
+								});
+							}}
+						>
+							<i
+								style={{
+									color: 'rgba(0,0,0,0.54)',
+								}}
+								className='fa-regular fa-copy'
+							/>
+						</IconButton>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								fontWeight: 'bold',
+							}}
+						>
+							Port
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								color: 'rgba(0,0,0,0.7)',
+								fontSize: '14px',
+							}}
+						>
+							{secrets.databasePort}
+						</p>
+					</div>
+
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '8px',
+						}}
+					>
+						<IconButton
+							size='small'
+							style={{ width: 24, height: 24, fontSize: 16 }}
+							onClick={(e) => {
+								window.navigator.clipboard.writeText(secrets.databaseUsername);
+								popupNotification({
+									text: 'Copied username to clipboard',
+									color: 'primary',
+								});
+							}}
+						>
+							<i
+								style={{
+									color: 'rgba(0,0,0,0.54)',
+								}}
+								className='fa-regular fa-copy'
+							/>
+						</IconButton>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								fontWeight: 'bold',
+							}}
+						>
+							Username
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								color: 'rgba(0,0,0,0.7)',
+								fontSize: '14px',
+							}}
+						>
+							{secrets.databaseUsername}
+						</p>
+					</div>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+export default RelationalDatabaseSecrets;

package/src/components/resources/resources-dialog.css

@@ -0,0 +1,74 @@
+.resource-dialog__live-indicator-dot {
+  width: 5px;
+  height: 5px;
+  background-color: lightgreen;
+  border-radius: 100%;
+}
+
+.blinking {
+  -webkit-animation: 1s blink ease infinite;
+  -moz-animation: 1s blink ease infinite;
+  -ms-animation: 1s blink ease infinite;
+  -o-animation: 1s blink ease infinite;
+  animation: 1s blink ease infinite;
+}
+
+@keyframes blink {
+
+  from,
+  to {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes blink {
+
+  from,
+  to {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes blink {
+
+  from,
+  to {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@-ms-keyframes blink {
+
+  from,
+  to {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@-o-keyframes blink {
+
+  from,
+  to {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}