@appscode/design-system 2.17.70-alpha-1 → 2.17.70-alpha-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.17.70-alpha-1",
+  "version": "2.17.70-alpha-4",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/index.ts

@@ -50,7 +50,6 @@ import AcDropdownMenu from "./v3/dropdown/DropdownMenu.vue";
 
 import AcEditor from "./v3/editor/Editor.vue";
 import AcFilteredFileEditor from "./v3/editor/FilteredFileEditor.vue";
-import AcLightweightEditor from "./v3/editor/LightweightEditor.vue";
 import AcMonacoEditor from "./v3/editor/MonacoEditor.vue";
 import AcResourceKeyValueEditor from "./v3/editor/ResourceKeyValueEditor.vue";
 
@@ -233,7 +232,6 @@ export {
   AcDropdownMenu,
   AcEditor,
   AcFilteredFileEditor,
-  AcLightweightEditor,
   AcMonacoEditor,
   AcResourceKeyValueEditor,
   AcFooterArea,

package/vue-components/v3/form-fields/AcInput.vue

@@ -106,3 +106,19 @@ onMounted(() => {
     </div>
   </ac-input-text>
 </template>
+
+<style lang="scss">
+.ac-single-input {
+  input.ac-input:read-only {
+    background-color: #eeeeee !important;
+    cursor: not-allowed !important;
+  }
+
+  label.show-label::after {
+    background-color: #eeeeee !important;
+  }
+  :hover {
+    border-color: #cbd5e1 !important;
+  }
+}
+</style>

package/vue-components/v3/navbar/Appdrawer.vue

@@ -4,7 +4,7 @@ import { computed, defineAsyncComponent, ref } from "vue";
 import GridIcon from "../icons/GridIcon.vue";
 
 export interface Props {
-  currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
+  currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana" | "observe";
   baseUrl?: string;
   activeOrganization?: string;
   rootDomain?: string;
@@ -41,6 +41,13 @@ const appList = [
     port: "3005",
     sub_title: "Analyze your activities",
   },
+  {
+    name: "observe",
+    icon_url: "https://cdn.appscode.com/images/products/observe/logos/observe.png",
+    title: "Observe",
+    port: "5992",
+    sub_title: "Observe your system",
+  },
   {
     name: "selfhost",
     icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",

package/vue-components/v3/editor/LightweightEditor.vue

@@ -1,343 +0,0 @@
-<template>
-  <div :id="id" ref="editorRef" class="lightweight-editor" :style="style"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers, drawSelection, dropCursor } from "@codemirror/view";
-import { foldGutter, syntaxHighlighting, defaultHighlightStyle, indentUnit } from "@codemirror/language";
-import { defaultKeymap, insertTab, history, historyKeymap } from "@codemirror/commands";
-import { search, searchKeymap as searchKeys, highlightSelectionMatches } from "@codemirror/search";
-import { json } from "@codemirror/lang-json";
-import { yaml } from "@codemirror/lang-yaml";
-import { linter, lintGutter } from "@codemirror/lint";
-import Ajv from "ajv";
-import * as yamlParser from "js-yaml";
-
-interface Props {
-  id?: string;
-  modelValue?: string;
-  language?: "json" | "yaml";
-  width?: string | number;
-  height?: string | number;
-  schema?: Record<string, any>;
-  enableSearch?: boolean;
-  readOnly?: boolean;
-  validate?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "",
-  modelValue: "",
-  language: "yaml",
-  width: "100%",
-  schema: undefined,
-  height: "300px",
-  enableSearch: true,
-  readOnly: false,
-  validate: true,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string];
-  "validation-error": [errors: any[]];
-  change: [value: string];
-}>();
-
-const editorRef = ref<HTMLElement>();
-let editorView: EditorView | null = null;
-let isUpdatingFromWithin = false;
-const ajv = new Ajv({ allErrors: true });
-
-const style = computed(() => ({
-  width: typeof props.width === "number" ? `${props.width}px` : props.width,
-  height: typeof props.height === "number" ? `${props.height}px` : props.height,
-}));
-
-// Create linter for validation
-const createLinter = () => {
-  return linter((view) => {
-    const diagnostics: any[] = [];
-    const content = view.state.doc.toString();
-
-    // Skip validation for empty content
-    if (!content.trim() || !props.validate) {
-      emit("validation-error", []);
-      return [];
-    }
-
-    try {
-      let parsedContent: any;
-
-      // Parse content based on language for syntax validation
-      if (props.language === "json") {
-        parsedContent = JSON.parse(content);
-      } else {
-        parsedContent = yamlParser.load(content);
-      }
-
-      // If schema is provided, validate against it
-      if (props.schema && parsedContent !== null) {
-        const validate = ajv.compile(props.schema);
-        const valid = validate(parsedContent);
-
-        if (!valid && validate.errors) {
-          // Process all schema validation errors
-          validate.errors.forEach((error, index) => {
-            const errorPath = error.instancePath || error.schemaPath || "";
-            const line = getLineFromPath(content, errorPath);
-            const lineInfo = view.state.doc.line(Math.min(line, view.state.doc.lines));
-
-            // Try to find the specific position of the error within the line
-            const { from, to } = getErrorPosition(lineInfo, error, content);
-
-            diagnostics.push({
-              from,
-              to,
-              severity: "error",
-              message: `Schema validation: ${error.message}`,
-              source: `schema-validation-${index}`,
-            });
-          });
-
-          // Emit validation errors
-          emit("validation-error", validate.errors);
-        } else {
-          emit("validation-error", []);
-        }
-      } else {
-        // No schema errors if parsing succeeded
-        emit("validation-error", []);
-      }
-    } catch (parseError: any) {
-      // Handle syntax/parse errors
-      const line = getLineFromError(parseError);
-      const lineInfo = view.state.doc.line(Math.min(line, view.state.doc.lines));
-
-      // For syntax errors, try to find the specific position if possible
-      let from = lineInfo.from;
-      let to = lineInfo.to;
-
-      if (parseError.mark && parseError.mark.column !== undefined) {
-        // YAML errors often have column information
-        from = lineInfo.from + parseError.mark.column;
-        to = Math.min(from + 10, lineInfo.to); // Highlight a small range
-      } else if (parseError.message.includes("position")) {
-        // JSON errors might have position info
-        const posMatch = parseError.message.match(/position (\d+)/);
-        if (posMatch) {
-          const pos = parseInt(posMatch[1]);
-          from = Math.min(pos, content.length);
-          to = Math.min(from + 5, content.length);
-        }
-      }
-
-      diagnostics.push({
-        from,
-        to,
-        severity: "error",
-        message: `Syntax error: ${parseError.message}`,
-        source: "syntax-error",
-      });
-
-      emit("validation-error", [{ message: `Syntax error: ${parseError.message}`, instancePath: "/" }]);
-    }
-
-    return diagnostics;
-  });
-};
-
-// Helper function to get line number from JSON path
-const getLineFromPath = (content: string, path: string): number => {
-  const lines = content.split("\n");
-  const pathParts = path.split("/").filter(Boolean);
-
-  if (pathParts.length === 0) return 1;
-
-  // Try to find the property/key mentioned in the path
-  const searchTerms = pathParts.slice(-2); // Get last two parts for better matching
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    // Check if line contains any of the search terms
-    if (
-      searchTerms.some(
-        (term) =>
-          line.includes(`"${term}"`) || line.includes(`${term}:`) || line.includes(`'${term}'`) || line.includes(term),
-      )
-    ) {
-      return i + 1;
-    }
-  }
-  return 1;
-};
-
-// Helper function to get specific error position within a line
-const getErrorPosition = (lineInfo: any, error: any, content: string) => {
-  const lineText = content.slice(lineInfo.from, lineInfo.to);
-
-  // Try to find the specific field/property that has the error
-  if (error.instancePath) {
-    const pathParts = error.instancePath.split("/").filter(Boolean);
-    const fieldName = pathParts[pathParts.length - 1];
-
-    if (fieldName) {
-      // Look for the field name in the line
-      const fieldMatch = lineText.match(new RegExp(`["']?${fieldName}["']?\\s*:`));
-      if (fieldMatch) {
-        const matchStart = lineInfo.from + fieldMatch.index!;
-        const matchEnd = matchStart + fieldMatch[0].length;
-        return { from: matchStart, to: matchEnd };
-      }
-    }
-  }
-
-  // If we can't find the specific field, highlight the whole line
-  return { from: lineInfo.from, to: lineInfo.to };
-};
-
-// Helper function to get line number from parse error
-const getLineFromError = (error: any): number => {
-  if (error.mark && error.mark.line) {
-    return error.mark.line + 1;
-  }
-  // Try to extract line number from error message
-  const lineMatch = error.message.match(/line (\d+)/i);
-  if (lineMatch) {
-    return parseInt(lineMatch[1]);
-  }
-  return 1;
-};
-
-// Create editor extensions
-const createExtensions = () => {
-  const extensions = [
-    history(),
-    lineNumbers(),
-    foldGutter(),
-    drawSelection(),
-    dropCursor(),
-    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-    indentUnit.of("  "), // Set indent to 2 spaces
-    keymap.of([
-      { key: "Tab", run: insertTab },
-      ...historyKeymap,
-      ...defaultKeymap,
-      ...(props.enableSearch ? searchKeys : []),
-    ]),
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        isUpdatingFromWithin = true;
-        const newValue = update.state.doc.toString();
-        emit("update:modelValue", newValue);
-        emit("change", newValue);
-        // Reset flag after Vue has processed the update
-        nextTick(() => {
-          isUpdatingFromWithin = false;
-        });
-      }
-    }),
-  ];
-
-  // Add language support
-  if (props.language === "json") {
-    extensions.push(json());
-  } else {
-    extensions.push(yaml());
-  }
-
-  // Add search if enabled
-  if (props.enableSearch) {
-    extensions.push(search(), highlightSelectionMatches());
-  }
-
-  // Add linting - always enabled for syntax validation
-  extensions.push(lintGutter(), createLinter());
-
-  // Add read-only state - always add editable extension
-  extensions.push(EditorView.editable.of(!props.readOnly));
-  if (props.readOnly) {
-    extensions.push(EditorState.readOnly.of(true));
-  }
-
-  return extensions;
-};
-
-const initializeEditor = async () => {
-  if (!editorRef.value) return;
-
-  const state = EditorState.create({
-    doc: props.modelValue,
-    extensions: createExtensions(),
-  });
-
-  editorView = new EditorView({
-    state,
-    parent: editorRef.value,
-  });
-};
-
-const updateEditor = () => {
-  if (!editorView) return;
-
-  // Skip update if the change is coming from within the editor
-  if (isUpdatingFromWithin) return;
-
-  const currentValue = editorView.state.doc.toString();
-  if (props.modelValue !== currentValue) {
-    editorView.dispatch({
-      changes: {
-        from: 0,
-        to: editorView.state.doc.length,
-        insert: props.modelValue,
-      },
-    });
-  }
-};
-
-const recreateEditor = async () => {
-  if (editorView) {
-    editorView.destroy();
-    editorView = null;
-  }
-  await nextTick();
-  initializeEditor();
-};
-
-// Expose methods
-const getEditor = () => editorView;
-const focus = () => editorView?.focus();
-const setValue = (value: string) => {
-  if (!editorView) return;
-  editorView.dispatch({
-    changes: {
-      from: 0,
-      to: editorView.state.doc.length,
-      insert: value,
-    },
-  });
-};
-const getValue = () => editorView?.state.doc.toString() || "";
-
-defineExpose({
-  getEditor,
-  focus,
-  setValue,
-  getValue,
-});
-
-// Watchers
-watch(() => props.modelValue, updateEditor);
-watch(() => [props.language, props.schema, props.readOnly], recreateEditor);
-
-onMounted(() => {
-  initializeEditor();
-});
-
-onUnmounted(() => {
-  if (editorView) {
-    editorView.destroy();
-  }
-});
-</script>