active_canvas 0.0.4 → 0.1.0

data/app/assets/stylesheets/active_canvas/editor.css

@@ -2927,3 +2927,629 @@
   color: var(--editor-danger);
   font-size: 0.8125rem;
 }
+
+/* ==================== Data Panel ==================== */
+
+.data-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.data-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.data-panel-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--editor-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.data-panel-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: white;
+  background: var(--editor-primary);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.data-panel-add-btn:hover {
+  background: var(--editor-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+}
+
+.data-panel-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.data-panel-list[data-empty="true"] {
+  display: none;
+}
+
+/* Empty state ------------------------------------------------ */
+
+.data-panel-empty {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1.5rem 1rem;
+}
+
+.data-panel-list[data-empty="true"] + .data-panel-empty {
+  display: flex;
+}
+
+.data-panel-empty-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--editor-bg);
+  border: 1px solid var(--editor-border);
+  border-radius: 14px;
+  color: var(--editor-text-muted);
+  margin-bottom: 0.875rem;
+}
+
+.data-panel-empty h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--editor-text);
+  margin: 0 0 0.375rem 0;
+}
+
+.data-panel-empty p {
+  font-size: 0.8125rem;
+  color: var(--editor-text-muted);
+  margin: 0 0 1rem 0;
+  max-width: 240px;
+  line-height: 1.5;
+}
+
+.data-panel-empty p code {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+  font-size: 0.75rem;
+  color: var(--editor-primary);
+  background: var(--editor-primary-light);
+  padding: 0.0625rem 0.3125rem;
+  border-radius: 4px;
+}
+
+.data-panel-empty-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: white;
+  background: var(--editor-primary);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.data-panel-empty-btn:hover {
+  background: var(--editor-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+/* Binding row ------------------------------------------------ */
+
+.data-panel-row {
+  background: var(--editor-surface);
+  border: 1px solid var(--editor-border);
+  border-radius: 8px;
+  padding: 0.625rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.data-panel-row:hover {
+  border-color: var(--editor-primary);
+  box-shadow: 0 0 0 1px var(--editor-primary);
+}
+
+.data-panel-row-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.data-panel-row-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--editor-text);
+}
+
+.data-panel-row-source {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--editor-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin-left: auto;
+  margin-right: 0.25rem;
+}
+
+.data-panel-row-action {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--editor-text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.data-panel-row:hover .data-panel-row-action,
+.data-panel-row-action:focus-visible {
+  opacity: 1;
+}
+
+.data-panel-row-action:hover {
+  color: var(--editor-text);
+  background: var(--editor-surface-hover);
+}
+
+.data-panel-row-literal {
+  width: 100%;
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--editor-text);
+  background: var(--editor-bg);
+  border: 1px solid var(--editor-border);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+.data-panel-row-literal:focus {
+  outline: none;
+  border-color: var(--editor-primary);
+  box-shadow: 0 0 0 2px var(--editor-primary-light);
+}
+
+.data-panel-row-params {
+  font-size: 0.75rem;
+  color: var(--editor-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.data-panel-row-remove:hover {
+  color: var(--editor-danger, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.data-panel-row-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.data-panel-chip {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+  font-size: 0.75rem;
+  color: var(--editor-primary);
+  background: var(--editor-primary-light);
+  border: none;
+  border-radius: 4px;
+  padding: 0.1875rem 0.5rem;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.data-panel-chip:hover {
+  background: var(--editor-primary);
+  color: white;
+}
+
+.data-panel-chip.is-copied {
+  background: var(--editor-success, #10b981);
+  color: white;
+}
+
+/* Add card --------------------------------------------------- */
+
+.data-panel-add-card {
+  background: var(--editor-surface);
+  border: 1px solid var(--editor-primary);
+  box-shadow: 0 0 0 1px var(--editor-primary-light);
+  border-radius: 8px;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.data-panel-add-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.data-panel-add-card-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--editor-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.data-panel-add-card-close {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--editor-text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.data-panel-add-card-close:hover {
+  color: var(--editor-text);
+  background: var(--editor-surface-hover);
+}
+
+.data-panel-add-card-params {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.data-panel-add-card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+/* Form fields ------------------------------------------------ */
+
+.data-panel-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.data-panel-field-inline {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.data-panel-field-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--editor-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.data-panel-field input[type="text"],
+.data-panel-field input[type="number"],
+.data-panel-field select {
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--editor-text);
+  background: var(--editor-bg);
+  border: 1px solid var(--editor-border);
+  border-radius: 6px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  box-sizing: border-box;
+}
+
+.data-panel-field input[type="text"]:focus,
+.data-panel-field input[type="number"]:focus,
+.data-panel-field select:focus {
+  outline: none;
+  border-color: var(--editor-primary);
+  box-shadow: 0 0 0 2px var(--editor-primary-light);
+}
+
+.data-panel-field input[type="checkbox"] {
+  accent-color: var(--editor-primary);
+}
+
+/* Buttons ---------------------------------------------------- */
+
+.data-panel-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.4375rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.data-panel-btn-primary {
+  color: white;
+  background: var(--editor-primary);
+}
+
+.data-panel-btn-primary:hover {
+  background: var(--editor-primary-hover);
+}
+
+.data-panel-btn-ghost {
+  color: var(--editor-text-muted);
+  background: transparent;
+  border-color: var(--editor-border);
+}
+
+.data-panel-btn-ghost:hover {
+  color: var(--editor-text);
+  background: var(--editor-surface-hover);
+}
+
+/* Help footer ------------------------------------------------ */
+
+.data-panel-help {
+  font-size: 0.75rem;
+  color: var(--editor-text-muted);
+  margin: 0;
+  padding: 0 0.125rem;
+}
+
+.data-panel-list[data-empty="true"] ~ .data-panel-help {
+  display: none;
+}
+
+/* ==================== Preview Modal ==================== */
+
+.preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(4px);
+  animation: previewModalFadeIn 0.15s ease-out;
+}
+
+.preview-modal[hidden] {
+  display: none;
+}
+
+@keyframes previewModalFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.preview-modal-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 1rem;
+  background: var(--editor-surface);
+  border-bottom: 1px solid var(--editor-border);
+  flex-shrink: 0;
+}
+
+.preview-modal-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--editor-text-muted);
+}
+
+.preview-modal-title strong {
+  color: var(--editor-text);
+  font-weight: 600;
+}
+
+.preview-modal-title svg {
+  color: var(--editor-primary);
+}
+
+.preview-modal-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--editor-border);
+  border-radius: 8px;
+  color: var(--editor-text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.preview-modal-close:hover {
+  color: var(--editor-text);
+  background: var(--editor-surface-hover);
+  border-color: var(--editor-primary);
+}
+
+.preview-modal-body {
+  position: relative;
+  flex: 1;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.preview-modal-iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  background: #ffffff;
+}
+
+.preview-modal-loading,
+.preview-modal-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background: var(--editor-bg);
+  color: var(--editor-text-muted);
+  font-size: 0.875rem;
+}
+
+.preview-modal-loading[hidden],
+.preview-modal-error[hidden] {
+  display: none;
+}
+
+.preview-modal-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--editor-border);
+  border-top-color: var(--editor-primary);
+  border-radius: 50%;
+  animation: previewModalSpin 0.8s linear infinite;
+}
+
+@keyframes previewModalSpin {
+  to { transform: rotate(360deg); }
+}
+
+.preview-modal-error svg {
+  color: var(--editor-danger, #ef4444);
+}
+
+.preview-modal-error h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--editor-text);
+}
+
+.preview-modal-error p {
+  margin: 0;
+  max-width: 480px;
+  padding: 0 1rem;
+  text-align: center;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+  font-size: 0.8125rem;
+  color: var(--editor-text-muted);
+}
+
+/* ==================== Template error banner ==================== */
+.ac-error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: #dc2626;
+  color: #fff;
+  padding: 8px 12px;
+  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.ac-error-banner-close {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+/* ==================== Data panel: sample data ==================== */
+.data-panel-sample { margin-top: 6px; font-size: 12px; }
+.data-panel-sample summary { cursor: pointer; opacity: 0.8; }
+.data-panel-sample-body {
+  margin: 6px 0 0;
+  max-height: 180px;
+  overflow: auto;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.25);
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ==================== Data panel: messages ==================== */
+.data-panel-message {
+  margin: 0;
+  padding: 0.5rem 0.625rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  color: #fecaca;
+  background: rgba(220, 38, 38, 0.15);
+  border: 1px solid rgba(220, 38, 38, 0.4);
+}
+.data-panel-field-error {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.6875rem;
+  color: #fca5a5;
+}
+
+/* ==================== Data panel: dynamic toggle ==================== */
+.data-panel-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--editor-text);
+  cursor: pointer;
+}
+.data-panel-notice {
+  margin: 0;
+  padding: 0.5rem 0.625rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: #fde68a;
+  background: rgba(245, 158, 11, 0.12);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+}
+.data-panel-notice code {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+}
+
+/* ==================== Live data switch ==================== */
+#btn-live-data.active {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+  border-color: rgba(34, 197, 94, 0.5);
+}

data/app/controllers/active_canvas/admin/application_controller.rb

@@ -8,9 +8,17 @@ module ActiveCanvas
 
       before_action :enforce_authentication_configured
       before_action :active_canvas_authenticate_admin
+      before_action :set_current_editor
 
       private
 
+      # A readable label for version history: a name or email when the host's
+      # user object has one, otherwise its to_s.
+      def set_current_editor
+        user = active_canvas_current_user
+        ActiveCanvas::Current.editor = user && [ user.try(:name), user.try(:email), user.to_s ].map(&:presence).compact.first
+      end
+
       def enforce_authentication_configured
         # Skip if inheriting from a custom parent controller (assumes parent handles auth)
         return if ActiveCanvas.config.admin_parent_controller != "ActionController::Base"