@elyx-code/editor-ui 0.0.2

package/src/components/ReportBugDialog.tsx

@@ -0,0 +1,412 @@
+import React, { useState, useRef, DragEvent } from 'react';
+import axios from 'axios';
+import { CircularProgress } from '@mui/material';
+import { envConfig } from '../config';
+import { getAccessToken } from '../auth';
+import { popupNotification } from '../popup-notification';
+import SmallDialog from '../lib/dialog/SmallDialog';
+import { useWorkspaceStore } from '../store/workspace';
+import Button from '../lib/button/Button';
+import DropdownMenuPopup from '../lib/dropdown/DropdownMenuPopup';
+
+interface ReportBugDialogProps {
+	projectId?: string;
+	onClose: () => void;
+}
+
+const SEVERITY_OPTIONS = [
+	{ value: 'low', label: 'It is annoying but I can work around it' },
+	{ value: 'medium', label: 'A feature is broken and I have no workaround' },
+	{ value: 'high', label: 'Data loss or completely unable to work' },
+];
+
+const ReportBugDialog: React.FC<ReportBugDialogProps> = ({ projectId, onClose }) => {
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+	const [subject, setSubject] = useState('');
+	const [body, setBody] = useState('');
+	const [severity, setSeverity] = useState('low');
+	const [isSeverityMenuOpen, setIsSeverityMenuOpen] = useState(false);
+	const [files, setFiles] = useState<File[]>([]);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isDragging, setIsDragging] = useState(false);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			setFiles((prev) => [...prev, ...Array.from(e.target.files!)]);
+		}
+	};
+
+	const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		setIsDragging(true);
+	};
+
+	const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		setIsDragging(false);
+	};
+
+	const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		setIsDragging(false);
+		if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+			setFiles((prev) => [...prev, ...Array.from(e.dataTransfer.files)]);
+			e.dataTransfer.clearData();
+		}
+	};
+
+	const removeFile = (index: number) => {
+		setFiles((prev) => prev.filter((_, i) => i !== index));
+	};
+
+	const uploadAttachment = async (file: File, caseId: string, token: string) => {
+		try {
+			// Get presigned URL
+			const res = await axios.post(
+				`${envConfig.API_BASE_URL}/support-service/v1/cases/attachments/presign`,
+				{
+					filename: file.name,
+					mimetype: file.type,
+					size: file.size,
+					caseId,
+				},
+				{ headers: { Authorization: 'Bearer ' + token } }
+			);
+
+			const uploadUrl = res.data?.data?.uploadUrl;
+			if (uploadUrl) {
+				await axios.put(uploadUrl, file, {
+					headers: { 'Content-Type': file.type },
+				}).catch(e => console.warn("Mock PUT failed (expected in dev without real presigned URL):", e));
+			}
+		} catch (error) {
+			console.error("Attachment upload error", error);
+		}
+	};
+
+	const handleSubmit = async () => {
+		if (!subject.trim() || !body.trim()) {
+			popupNotification({ text: 'Please fill out subject and description', color: 'warning' });
+			return;
+		}
+
+		setIsSubmitting(true);
+		try {
+			const token = await getAccessToken();
+			const res = await axios.post(
+				`${envConfig.API_BASE_URL}/support-service/v1/cases`,
+				{
+					subject,
+					body,
+					type: 'bug-report',
+					severity,
+					workspaceId: activeWorkspace?.id,
+					metadata: {
+						project: projectId,
+					},
+				},
+				{ headers: { Authorization: 'Bearer ' + token } }
+			);
+
+			const createdCase = res.data?.data;
+			if (createdCase?.id && files.length > 0) {
+				await Promise.all(files.map(file => uploadAttachment(file, createdCase.id, token)));
+			}
+
+			popupNotification({ text: 'Bug reported successfully! Thank you.', color: 'success' });
+			onClose();
+		} catch (error) {
+			console.error(error);
+			popupNotification({ text: 'Failed to submit bug report', color: 'error' });
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<SmallDialog 
+			onClose={onClose}
+			style={{
+				width: '550px',
+				minHeight: 'auto',
+				display: 'flex',
+				flexDirection: 'column'
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					flex: 1,
+					alignItems: 'center'
+				}}
+			>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
+					<i className="fa-solid fa-bug" style={{ fontSize: '24px', color: 'var(--color-main-error)' }} />
+					<h2
+						style={{
+							margin: 0,
+							fontWeight: 500,
+							color: 'rgb(0, 0, 0, 0.8)'
+						}}
+					>
+						Report a Bug
+					</h2>
+				</div>
+				
+				<p
+					style={{
+						margin: '0 0 20px 0',
+						color: 'rgb(0, 0, 0, 0.6)',
+						fontSize: '14px',
+						lineHeight: '1.5',
+						textAlign: 'center'
+					}}
+				>
+					Found an issue? Let us know the details so we can fix it!
+				</p>
+
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						marginBottom: '16px',
+						width: '100%'
+					}}
+				>
+					<label
+						style={{
+							marginBottom: '8px',
+							fontSize: '13px',
+							fontWeight: 500,
+							color: 'rgb(0, 0, 0, 0.7)'
+						}}
+					>
+						Subject
+					</label>
+					<input
+						type='text'
+						value={subject}
+						onChange={(e) => setSubject(e.target.value)}
+						placeholder='e.g. Canvas goes blank when I drag a node'
+						disabled={isSubmitting}
+						style={{
+							width: '100%',
+							padding: '12px',
+							boxSizing: 'border-box',
+							borderRadius: '6px',
+							border: '1px solid #ccc',
+							fontFamily: 'inherit',
+							fontSize: '14px'
+						}}
+					/>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						marginBottom: '16px',
+						width: '100%'
+					}}
+				>
+					<label
+						style={{
+							marginBottom: '8px',
+							fontSize: '13px',
+							fontWeight: 500,
+							color: 'rgb(0, 0, 0, 0.7)'
+						}}
+					>
+						Description
+					</label>
+					<textarea
+						value={body}
+						onChange={(e) => setBody(e.target.value)}
+						placeholder='Steps to reproduce...'
+						disabled={isSubmitting}
+						rows={4}
+						style={{
+							resize: 'vertical',
+							width: '100%',
+							padding: '12px',
+							boxSizing: 'border-box',
+							borderRadius: '6px',
+							border: '1px solid #ccc',
+							fontFamily: 'inherit',
+							fontSize: '14px'
+						}}
+					/>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						marginBottom: '16px',
+						width: '100%'
+					}}
+				>
+					<label
+						style={{
+							marginBottom: '8px',
+							fontSize: '13px',
+							fontWeight: 500,
+							color: 'rgb(0, 0, 0, 0.7)'
+						}}
+					>
+						Severity
+					</label>
+					<div 
+						id="severity-dropdown-anchor"
+						onClick={(e) => {
+							if (isSubmitting) return;
+							e.stopPropagation();
+							setIsSeverityMenuOpen(!isSeverityMenuOpen);
+						}}
+						style={{
+							width: '100%',
+							padding: '12px',
+							boxSizing: 'border-box',
+							borderRadius: '6px',
+							border: '1px solid #ccc',
+							fontFamily: 'inherit',
+							fontSize: '14px',
+							backgroundColor: isSubmitting ? '#f5f5f5' : '#fff',
+							cursor: isSubmitting ? 'not-allowed' : 'pointer',
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center',
+							color: isSubmitting ? 'rgb(0,0,0,0.4)' : 'inherit'
+						}}
+					>
+						<span>{SEVERITY_OPTIONS.find(o => o.value === severity)?.label}</span>
+						<i className="fa-solid fa-chevron-down" style={{ color: '#888' }} />
+					</div>
+					<DropdownMenuPopup
+						popupOptions={{
+							id: 'severity-dropdown-popup',
+							anchorQuerySelector: '#severity-dropdown-anchor',
+							placement: 'bottom-start',
+							open: isSeverityMenuOpen,
+							onClickAway: () => setIsSeverityMenuOpen(false),
+							style: { width: '486px' }
+						}}
+						value={severity}
+						options={SEVERITY_OPTIONS.map(opt => ({
+							label: opt.label,
+							value: opt.value,
+							onClick: (_, e) => {
+								e.stopPropagation();
+								setSeverity(opt.value);
+								setIsSeverityMenuOpen(false);
+							}
+						}))}
+					/>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						marginBottom: '24px',
+						width: '100%'
+					}}
+				>
+					<label
+						style={{
+							marginBottom: '8px',
+							fontSize: '13px',
+							fontWeight: 500,
+							color: 'rgb(0, 0, 0, 0.7)'
+						}}
+					>
+						Attachments (Optional)
+					</label>
+					
+					<div
+						onDragOver={handleDragOver}
+						onDragLeave={handleDragLeave}
+						onDrop={handleDrop}
+						onClick={() => fileInputRef.current?.click()}
+						style={{
+							border: `2px dashed ${isDragging ? 'var(--color-main-primary)' : '#ccc'}`,
+							borderRadius: '6px',
+							padding: '20px',
+							textAlign: 'center',
+							backgroundColor: isDragging ? 'rgba(var(--color-main-primary-rgb), 0.05)' : '#fafafa',
+							cursor: 'pointer',
+							transition: 'all 0.2s ease',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							gap: '8px'
+						}}
+					>
+						<i className="fa-solid fa-cloud-arrow-up" style={{ fontSize: '24px', color: 'var(--color-light-grey)' }} />
+						<span style={{ fontSize: '14px', color: 'rgb(0,0,0,0.6)' }}>
+							Click to upload or drag & drop files here
+						</span>
+						<input
+							type='file'
+							multiple
+							ref={fileInputRef}
+							onChange={handleFileChange}
+							disabled={isSubmitting}
+							style={{ display: 'none' }}
+						/>
+					</div>
+
+					{files.length > 0 && (
+						<div style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', gap: '6px' }}>
+							{files.map((f, idx) => (
+								<div key={idx} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#f0f0f0', padding: '6px 10px', borderRadius: '4px' }}>
+									<span style={{ fontSize: '12px', color: '#333', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
+									<i 
+										className="fa-solid fa-times" 
+										style={{ cursor: 'pointer', color: 'var(--color-main-error)', fontSize: '14px' }} 
+										onClick={(e) => {
+											e.stopPropagation();
+											removeFile(idx);
+										}}
+									/>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						justifyContent: 'flex-end',
+						gap: '12px',
+						width: '100%',
+						marginTop: 'auto'
+					}}
+				>
+					<Button
+						onClick={onClose}
+						disabled={isSubmitting}
+						style={{
+							background: 'transparent',
+							color: 'rgb(0,0,0,0.7)',
+							border: '1px solid #ccc'
+						}}
+					>
+						Cancel
+					</Button>
+					<Button 
+						onClick={handleSubmit} 
+						loading={isSubmitting}
+						color="error"
+					>
+						Report Bug
+					</Button>
+				</div>
+			</div>
+		</SmallDialog>
+	);
+};
+
+export default ReportBugDialog;

package/src/components/RequestIntegrationAccessDialog.tsx

@@ -0,0 +1,261 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { CircularProgress } from '@mui/material';
+import { envConfig } from '../config';
+import { getAccessToken } from '../auth';
+import { popupNotification } from '../popup-notification';
+import SmallDialog from '../lib/dialog/SmallDialog';
+import { useWorkspaceStore } from '../store/workspace';
+import Button from '../lib/button/Button';
+
+interface RequestIntegrationAccessDialogProps {
+	integrationKey: string;
+	integrationName: string;
+	isAlreadyRequested?: boolean;
+	onClose: (requested?: boolean) => void;
+}
+
+const RequestIntegrationAccessDialog: React.FC<
+	RequestIntegrationAccessDialogProps
+> = ({ integrationKey, integrationName, isAlreadyRequested, onClose }) => {
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+	const [reason, setReason] = useState('');
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const handleSubmit = async () => {
+		if (!reason.trim()) {
+			popupNotification({
+				text: 'Please provide a reason',
+				color: 'warning'
+			});
+			return;
+		}
+
+		setIsSubmitting(true);
+		try {
+			const token = await getAccessToken();
+			await axios.post(
+				`${envConfig.API_BASE_URL}/support-service/v1/cases`,
+				{
+					subject: `Access request to: ${integrationName}`,
+					body: reason,
+					type: 'access-request',
+					severity: 'low',
+					workspaceId: activeWorkspace?.id,
+					metadata: {
+						integration: integrationKey
+					}
+				},
+				{
+					headers: {
+						Authorization: 'Bearer ' + token
+					}
+				}
+			);
+
+			popupNotification({
+				text: 'Request submitted successfully!',
+				color: 'success'
+			});
+			onClose(true);
+		} catch (error) {
+			console.error(error);
+			popupNotification({
+				text: 'Failed to submit request',
+				color: 'error'
+			});
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<SmallDialog
+			style={{
+				width: '500px',
+				minHeight: 'auto',
+				display: 'flex',
+				flexDirection: 'column'
+			}}
+			onClose={() => onClose()}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					flex: 1,
+					alignItems: 'center'
+				}}
+			>
+				<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
+					<img
+						src={`${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${integrationKey}.svg`}
+						alt={integrationName}
+						style={{ width: 60, height: 60, objectFit: 'contain' }}
+					/>
+				</div>
+
+				{isAlreadyRequested ? (
+					<>
+						<div
+							style={{
+								background: 'rgba(76, 175, 80, 0.08)',
+								color: '#4caf50',
+								borderRadius: '20px',
+								padding: '6px 14px',
+								fontSize: '11px',
+								fontWeight: 700,
+								textTransform: 'uppercase',
+								letterSpacing: '1.5px',
+								marginBottom: '20px',
+								display: 'inline-flex',
+								alignItems: 'center',
+								gap: '6px',
+								border: '1px solid rgba(76, 175, 80, 0.15)'
+							}}
+						>
+							<span
+								style={{
+									width: '6px',
+									height: '6px',
+									backgroundColor: '#4caf50',
+									borderRadius: '50%',
+									display: 'inline-block'
+								}}
+							/>
+							Requested
+						</div>
+						
+						<h2
+							style={{
+								margin: '0 0 16px 0',
+								fontWeight: 500,
+								color: 'rgb(0, 0, 0, 0.8)'
+							}}
+						>
+							Request Received
+						</h2>
+						
+						<p
+							style={{
+								margin: '0 0 24px 0',
+								color: 'rgb(0, 0, 0, 0.6)',
+								fontSize: '14px',
+								lineHeight: '1.5',
+								textAlign: 'center'
+							}}
+						>
+							You have already requested access to <strong>{integrationName}</strong>. Our team is reviewing your request.
+						</p>
+						<div
+							style={{
+								display: 'flex',
+								justifyContent: 'center',
+								width: '100%',
+								marginTop: 'auto'
+							}}
+						>
+							<Button onClick={() => onClose()}>
+								Close
+							</Button>
+						</div>
+					</>
+				) : (
+					<>
+						<h2
+							style={{
+								margin: '0 0 16px 0',
+								fontWeight: 500,
+								color: 'rgb(0, 0, 0, 0.8)'
+							}}
+						>
+							Request Access
+						</h2>
+						
+						<p
+							style={{
+								margin: '0 0 20px 0',
+								color: 'rgb(0, 0, 0, 0.6)',
+								fontSize: '14px',
+								lineHeight: '1.5',
+								textAlign: 'center'
+							}}
+						>
+							The <strong>{integrationName}</strong> integration is
+							currently restricted or in development. Please explain why
+							you need access to this integration, and our team will
+							review your request.
+						</p>
+						<div
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								marginBottom: '24px',
+								width: '100%'
+							}}
+						>
+							<label
+								htmlFor="reason"
+								style={{
+									marginBottom: '8px',
+									fontSize: '13px',
+									fontWeight: 500,
+									color: 'rgb(0, 0, 0, 0.7)'
+								}}
+							>
+								Reason for access
+							</label>
+							<textarea
+								id="reason"
+								value={reason}
+								onChange={(e) => setReason(e.target.value)}
+								placeholder="I need this to sync user data..."
+								disabled={isSubmitting}
+								rows={4}
+								style={{
+									resize: 'vertical',
+									width: '100%',
+									padding: '12px',
+									boxSizing: 'border-box',
+									borderRadius: '6px',
+									border: '1px solid #ccc',
+									fontFamily: 'inherit',
+									fontSize: '14px'
+								}}
+							/>
+						</div>
+						<div
+							style={{
+								display: 'flex',
+								justifyContent: 'flex-end',
+								gap: '12px',
+								width: '100%',
+								marginTop: 'auto'
+							}}
+						>
+							<Button
+								onClick={() => onClose()}
+								disabled={isSubmitting}
+								style={{
+									background: 'transparent',
+									color: 'rgb(0,0,0,0.7)',
+									border: '1px solid #ccc'
+								}}
+							>
+								Cancel
+							</Button>
+							<Button onClick={handleSubmit} disabled={isSubmitting}>
+								{isSubmitting ? (
+									<CircularProgress size={16} color="inherit" />
+								) : (
+									'Submit Request'
+								)}
+							</Button>
+						</div>
+					</>
+				)}
+			</div>
+		</SmallDialog>
+	);
+};
+
+export default RequestIntegrationAccessDialog;