@raketa-cloud/admin 1.7.5 → 1.7.6

package/dist/application.css

@@ -1811,6 +1811,10 @@ select {
   width: 1.25rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-9 {
   width: 2.25rem;
 }
@@ -1831,6 +1835,10 @@ select {
   width: 100%;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-none {
   flex: none;
 }
@@ -2039,6 +2047,11 @@ select {
   padding: 1rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2128,6 +2141,10 @@ select {
   font-weight: 600;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .lowercase {
   text-transform: lowercase;
 }
@@ -2218,6 +2235,12 @@ select {
   opacity: 0.6;
 }
 
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "main": "src/index.js",
   "files": [
     "src/",
@@ -12,8 +12,8 @@
     "prepare": "npx tailwindcss -i ./src/styles/application.css -o ./dist/application.css"
   },
   "devDependencies": {
-    "@babel/core": "7.28.6",
-    "@babel/preset-env": "7.28.6",
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.0",
     "@babel/preset-typescript": "7.28.5",
     "@repo/typescript-config": "*",
     "@tailwindcss/forms": "0.5.7",

package/src/cloud/Pages.js

@@ -62,14 +62,16 @@ export default class Pages extends RaketaClient {
   async list(query, locale, pageTypeSlug) {
     const vars = this.buildListInput(query, locale);
 
-      if (vars.input.filters.last_updated_from) {
-        vars.input.filters.last_updated_from = toUTCISO8601String(vars.input.filters.last_updated_from);
-      }
-      if (vars.input.filters.last_updated_to) {
-        vars.input.filters.last_updated_to = toUTCISO8601String(vars.input.filters.last_updated_to);
-      }
-
-    console.log(vars.input.filters)
+    if (vars.input.filters.last_updated_from) {
+      vars.input.filters.last_updated_from = toUTCISO8601String(
+        vars.input.filters.last_updated_from,
+      );
+    }
+    if (vars.input.filters.last_updated_to) {
+      vars.input.filters.last_updated_to = toUTCISO8601String(
+        vars.input.filters.last_updated_to,
+      );
+    }
 
     const { pages: items } = await this.query(PagesDocument, {
       input: {

package/src/handlers/_shared/SettingsHandler.js

@@ -14,6 +14,10 @@ const update = async (ctx) => {
   const current = await ctx.client.settings.find(ctx.locale);
   const updated = ctx.client.settings.deepMerge(current, params);
 
+  if (params._global_variables !== undefined) {
+    updated._global_variables = params._global_variables;
+  }
+
   const { errors } = await ctx.client.settings.update(ctx.locale, updated);
 
   if (errors) {

package/src/routeSettings.js

@@ -9,6 +9,10 @@ function routeSettings(adapter) {
   routeMember(adapter, "settings/layout", SettingsHandler, {
     resource: "settings/layout",
   });
+
+  routeMember(adapter, "settings/variables", SettingsHandler, {
+    resource: "settings/variables",
+  });
 }
 
 export default routeSettings;

package/src/tests/RaketaClient.test.js

@@ -0,0 +1,636 @@
+import RaketaClient from '../cloud/RaketaClient'
+import { request } from 'graphql-request'
+
+jest.mock('graphql-request', () => ({
+  request: jest.fn(),
+}))
+
+describe('RaketaClient', () => {
+  function buildMockConfig(overrides = {}) {
+    return {
+      cloud: {
+        gateway_url: 'https://api.example.com',
+        gateway_project: 'test-project',
+        dxp_service_private: 'test-service',
+      },
+      ...overrides,
+    }
+  }
+
+  function buildClient(config = buildMockConfig(), token = 'test-token') {
+    const getConfig = () => config
+    return new RaketaClient(getConfig, token)
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('constructor', () => {
+    test('initializes with getConfig and token', () => {
+      const getConfig = jest.fn(() => buildMockConfig())
+      const client = new RaketaClient(getConfig, 'my-token')
+
+      expect(client.getConfig).toBe(getConfig)
+      expect(client.token).toBe('my-token')
+    })
+  })
+
+  describe('gqlRequest', () => {
+    test('makes GraphQL request with correct parameters', async () => {
+      const client = buildClient()
+      const query = 'query { test }'
+      const variables = { id: '123' }
+      const headers = { 'x-custom': 'value' }
+
+      request.mockResolvedValue({ data: 'response' })
+
+      await client.gqlRequest('https://api.example.com/graphql', query, variables, headers)
+
+      expect(request).toHaveBeenCalledWith({
+        url: 'https://api.example.com/graphql',
+        document: query,
+        variables: variables,
+        requestHeaders: headers,
+      })
+    })
+
+    test('makes request with default empty variables and headers', async () => {
+      const client = buildClient()
+      const query = 'query { test }'
+
+      request.mockResolvedValue({ data: 'response' })
+
+      await client.gqlRequest('https://api.example.com/graphql', query)
+
+      expect(request).toHaveBeenCalledWith({
+        url: 'https://api.example.com/graphql',
+        document: query,
+        variables: {},
+        requestHeaders: {},
+      })
+    })
+  })
+
+  describe('query', () => {
+    test('makes request to gateway with proper headers', async () => {
+      const client = buildClient()
+      const query = 'query { users }'
+      const variables = { limit: 10 }
+
+      request.mockResolvedValue({ data: { users: [] } })
+
+      await client.query(query, variables)
+
+      expect(request).toHaveBeenCalledWith({
+        url: 'https://api.example.com/dispatch',
+        document: query,
+        variables: variables,
+        requestHeaders: {
+          'x-raketa-project': 'test-project',
+          'x-raketa-service': 'test-service',
+          'x-raketa-identity': 'test-token',
+        },
+      })
+    })
+
+    test('uses token from constructor in headers', async () => {
+      const client = buildClient(buildMockConfig(), 'custom-token-123')
+      const query = 'query { test }'
+
+      request.mockResolvedValue({ data: {} })
+
+      await client.query(query)
+
+      expect(request).toHaveBeenCalledWith(
+        expect.objectContaining({
+          requestHeaders: expect.objectContaining({
+            'x-raketa-identity': 'custom-token-123',
+          }),
+        })
+      )
+    })
+  })
+
+  describe('logError', () => {
+    test('throws error with message', () => {
+      const client = buildClient()
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+
+      expect(() => client.logError('Something went wrong')).toThrow('Something went wrong')
+
+      consoleSpy.mockRestore()
+    })
+
+    test('logs context to console when provided', () => {
+      const client = buildClient()
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+      const context = { code: 'ERR_001', details: 'Invalid input' }
+
+      expect(() => client.logError('Error occurred', context)).toThrow('Error occurred')
+      expect(consoleSpy).toHaveBeenCalledWith(context)
+
+      consoleSpy.mockRestore()
+    })
+
+    test('does not log when context is not provided', () => {
+      const client = buildClient()
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+
+      expect(() => client.logError('Error occurred')).toThrow('Error occurred')
+      expect(consoleSpy).not.toHaveBeenCalled()
+
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('formatErrors', () => {
+    test('formats single error into object', () => {
+      const client = buildClient()
+      const errors = [{ key: 'email', message: 'Email is invalid' }]
+
+      const result = client.formatErrors(errors)
+
+      expect(result).toEqual({
+        email: 'Email is invalid',
+      })
+    })
+
+    test('formats multiple errors for different keys', () => {
+      const client = buildClient()
+      const errors = [
+        { key: 'email', message: 'Email is required' },
+        { key: 'password', message: 'Password is too short' },
+        { key: 'username', message: 'Username is taken' },
+      ]
+
+      const result = client.formatErrors(errors)
+
+      expect(result).toEqual({
+        email: 'Email is required',
+        password: 'Password is too short',
+        username: 'Username is taken',
+      })
+    })
+
+    test('concatenates multiple messages for same key', () => {
+      const client = buildClient()
+      const errors = [
+        { key: 'email', message: 'Email is required' },
+        { key: 'email', message: 'Email format is invalid' },
+        { key: 'password', message: 'Password is required' },
+      ]
+
+      const result = client.formatErrors(errors)
+
+      expect(result).toEqual({
+        email: 'Email is required, Email format is invalid',
+        password: 'Password is required',
+      })
+    })
+
+    test('remaps generalError to specified key', () => {
+      const client = buildClient()
+      const errors = [
+        { key: 'generalError', message: 'Something went wrong' },
+        { key: 'email', message: 'Email is invalid' },
+      ]
+
+      const result = client.formatErrors(errors, 'base')
+
+      expect(result).toEqual({
+        base: 'Something went wrong',
+        email: 'Email is invalid',
+      })
+    })
+
+    test('keeps generalError key when no remap specified', () => {
+      const client = buildClient()
+      const errors = [{ key: 'generalError', message: 'Operation failed' }]
+
+      const result = client.formatErrors(errors)
+
+      expect(result).toEqual({
+        generalError: 'Operation failed',
+      })
+    })
+
+    test('handles empty errors array', () => {
+      const client = buildClient()
+      const result = client.formatErrors([])
+
+      expect(result).toEqual({})
+    })
+  })
+
+  describe('buildFiltersInput', () => {
+    test('extracts filters with f: prefix', () => {
+      const client = buildClient()
+      const query = {
+        'f:status': 'active',
+        'f:category': 'news',
+        page: '2',
+        order_by: 'created_at',
+      }
+
+      const result = client.buildFiltersInput(query)
+
+      expect(result).toEqual({
+        status: 'active',
+        category: 'news',
+      })
+    })
+
+    test('ignores filters with empty values', () => {
+      const client = buildClient()
+      const query = {
+        'f:status': 'active',
+        'f:category': '',
+        'f:tag': null,
+        'f:author': undefined,
+      }
+
+      const result = client.buildFiltersInput(query)
+
+      expect(result).toEqual({
+        status: 'active',
+      })
+    })
+
+    test('returns empty object when no filters present', () => {
+      const client = buildClient()
+      const query = {
+        page: '1',
+        order_by: 'title',
+      }
+
+      const result = client.buildFiltersInput(query)
+
+      expect(result).toEqual({})
+    })
+
+    test('returns empty object when query is null or undefined', () => {
+      const client = buildClient()
+
+      expect(client.buildFiltersInput(null)).toEqual({})
+      expect(client.buildFiltersInput(undefined)).toEqual({})
+    })
+
+    test('returns empty object when only page param exists', () => {
+      const client = buildClient()
+      const query = { page: '3' }
+
+      const result = client.buildFiltersInput(query)
+
+      expect(result).toEqual({})
+    })
+  })
+
+  describe('buildOrderInput', () => {
+    test('builds order object with field and direction', () => {
+      const client = buildClient()
+      const query = {
+        order_by: 'created_at',
+        order_direction: 'DESC',
+      }
+
+      const result = client.buildOrderInput(query)
+
+      expect(result).toEqual({
+        field: 'created_at',
+        direction: 'DESC',
+      })
+    })
+
+    test('defaults to ASC when direction not provided', () => {
+      const client = buildClient()
+      const query = { order_by: 'title' }
+
+      const result = client.buildOrderInput(query)
+
+      expect(result).toEqual({
+        field: 'title',
+        direction: 'ASC',
+      })
+    })
+
+    test('returns null when order_by not provided', () => {
+      const client = buildClient()
+      const query = { order_direction: 'DESC' }
+
+      const result = client.buildOrderInput(query)
+
+      expect(result).toBeNull()
+    })
+
+    test('returns null when order_by is empty string', () => {
+      const client = buildClient()
+      const query = { order_by: '' }
+
+      const result = client.buildOrderInput(query)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe('buildPaginationInput', () => {
+    test('builds pagination with page number from query', () => {
+      const client = buildClient()
+      const query = { page: '3' }
+
+      const result = client.buildPaginationInput(query)
+
+      expect(result).toEqual({
+        page: 3,
+        pageSize: 25,
+      })
+    })
+
+    test('defaults to page 1 when not provided', () => {
+      const client = buildClient()
+      const query = {}
+
+      const result = client.buildPaginationInput(query)
+
+      expect(result).toEqual({
+        page: 1,
+        pageSize: 25,
+      })
+    })
+
+    test('parses string page number to integer', () => {
+      const client = buildClient()
+      const query = { page: '10' }
+
+      const result = client.buildPaginationInput(query)
+
+      expect(result.page).toBe(10)
+      expect(typeof result.page).toBe('number')
+    })
+
+    test('handles invalid page values by defaulting to 1', () => {
+      const client = buildClient()
+
+      expect(client.buildPaginationInput({ page: 'invalid' })).toEqual({
+        page: NaN,
+        pageSize: 25,
+      })
+    })
+  })
+
+  describe('buildListInput', () => {
+    test('builds complete input with pagination, filters, orderBy, and locale', () => {
+      const client = buildClient()
+      const query = {
+        page: '2',
+        'f:status': 'published',
+        'f:category': 'tech',
+        order_by: 'created_at',
+        order_direction: 'DESC',
+      }
+
+      const result = client.buildListInput(query, 'en')
+
+      expect(result).toEqual({
+        input: {
+          pagination: { page: 2, pageSize: 25 },
+          filters: { status: 'published', category: 'tech' },
+          orderBy: { field: 'created_at', direction: 'DESC' },
+          locale: 'en',
+        },
+      })
+    })
+
+    test('omits orderBy when not provided', () => {
+      const client = buildClient()
+      const query = { page: '1', 'f:status': 'active' }
+
+      const result = client.buildListInput(query)
+
+      expect(result).toEqual({
+        input: {
+          pagination: { page: 1, pageSize: 25 },
+          filters: { status: 'active' },
+        },
+      })
+    })
+
+    test('omits locale when not provided', () => {
+      const client = buildClient()
+      const query = { page: '1' }
+
+      const result = client.buildListInput(query)
+
+      expect(result.input).not.toHaveProperty('locale')
+    })
+
+    test('includes locale when provided', () => {
+      const client = buildClient()
+      const query = { page: '1' }
+
+      const result = client.buildListInput(query, 'de')
+
+      expect(result.input.locale).toBe('de')
+    })
+
+    test('handles empty query object', () => {
+      const client = buildClient()
+
+      const result = client.buildListInput({})
+
+      expect(result).toEqual({
+        input: {
+          pagination: { page: 1, pageSize: 25 },
+          filters: {},
+        },
+      })
+    })
+  })
+
+  describe('buildAllInput', () => {
+    test('builds input without pagination', () => {
+      const client = buildClient()
+      const query = {
+        page: '2',
+        'f:status': 'active',
+        order_by: 'title',
+        order_direction: 'ASC',
+      }
+
+      const result = client.buildAllInput(query, 'fr')
+
+      expect(result).toEqual({
+        input: {
+          filters: { status: 'active' },
+          orderBy: { field: 'title', direction: 'ASC' },
+          locale: 'fr',
+        },
+      })
+      expect(result.input).not.toHaveProperty('pagination')
+    })
+
+    test('omits orderBy when not provided', () => {
+      const client = buildClient()
+      const query = { 'f:category': 'news' }
+
+      const result = client.buildAllInput(query)
+
+      expect(result).toEqual({
+        input: {
+          filters: { category: 'news' },
+        },
+      })
+    })
+
+    test('omits locale when not provided', () => {
+      const client = buildClient()
+      const query = {}
+
+      const result = client.buildAllInput(query)
+
+      expect(result.input).not.toHaveProperty('locale')
+    })
+  })
+
+  describe('deepMerge', () => {
+    test('merges two simple objects', () => {
+      const client = buildClient()
+      const target = { a: 1, b: 2 }
+      const source = { b: 3, c: 4 }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result).toEqual({ a: 1, b: 3, c: 4 })
+      // Verify original is not modified
+      expect(target).toEqual({ a: 1, b: 2 })
+    })
+
+    test('merges nested objects deeply', () => {
+      const client = buildClient()
+      const target = {
+        settings: { theme: 'dark', locale: 'en' },
+        profile: { name: 'John' },
+      }
+      const source = {
+        settings: { locale: 'fr', notifications: true },
+        profile: { age: 30 },
+      }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result).toEqual({
+        settings: { theme: 'dark', locale: 'fr', notifications: true },
+        profile: { name: 'John', age: 30 },
+      })
+    })
+
+    test('replaces arrays instead of merging', () => {
+      const client = buildClient()
+      const target = { tags: ['javascript', 'node'] }
+      const source = { tags: ['typescript', 'deno'] }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result).toEqual({ tags: ['typescript', 'deno'] })
+    })
+
+    test('parses JSON strings in source', () => {
+      const client = buildClient()
+      const target = { config: {} }
+      const source = { config: '{"enabled": true, "count": 5}' }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result.config).toEqual({ enabled: true, count: 5 })
+    })
+
+    test('parses JSON strings in nested objects', () => {
+      const client = buildClient()
+      const target = { settings: { meta: {} } }
+      const source = { settings: { meta: '{"title": "Test", "tags": ["a", "b"]}' } }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result.settings.meta).toEqual({ title: 'Test', tags: ['a', 'b'] })
+    })
+
+    test('handles null values', () => {
+      const client = buildClient()
+      const target = { a: 1, b: null }
+      const source = { b: 2, c: null }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result).toEqual({ a: 1, b: 2, c: null })
+    })
+
+    test('does not modify target object', () => {
+      const client = buildClient()
+      const target = { nested: { value: 'original' } }
+      const source = { nested: { value: 'modified' } }
+
+      client.deepMerge(target, source)
+
+      expect(target.nested.value).toBe('original')
+    })
+
+    test('handles deeply nested JSON strings', () => {
+      const client = buildClient()
+      const target = {
+        data: {
+          user: {
+            preferences: {},
+          },
+        },
+      }
+      const source = {
+        data: {
+          user: {
+            preferences: '{"theme": "dark", "language": "en"}',
+          },
+        },
+      }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result.data.user.preferences).toEqual({
+        theme: 'dark',
+        language: 'en',
+      })
+    })
+
+    test('handles array of objects with JSON strings', () => {
+      const client = buildClient()
+      const target = { items: [] }
+      const source = {
+        items: [{ id: 1, data: '{"active": true}' }, { id: 2, data: '{"active": false}' }],
+      }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result.items[0].data).toEqual({ active: true })
+      expect(result.items[1].data).toEqual({ active: false })
+    })
+
+    test('preserves non-JSON strings', () => {
+      const client = buildClient()
+      const target = { title: 'old' }
+      const source = { title: 'new title', description: 'just a string' }
+
+      const result = client.deepMerge(target, source)
+
+      expect(result).toEqual({
+        title: 'new title',
+        description: 'just a string',
+      })
+    })
+
+    test('handles empty objects', () => {
+      const client = buildClient()
+
+      expect(client.deepMerge({}, { a: 1 })).toEqual({ a: 1 })
+      expect(client.deepMerge({ a: 1 }, {})).toEqual({ a: 1 })
+      expect(client.deepMerge({}, {})).toEqual({})
+    })
+  })
+})

package/src/views/settings/_nav.ejs

@@ -17,6 +17,12 @@
           Layout and Navigation
         </a>
       </div>
+
+      <div class="<%= active === 'variables' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/settings/variables/edit` %>" class="text-raketa-primary font-semibold">
+          Variables
+        </a>
+      </div>
     </div>
   </div>
-</div>
+</div>

package/src/views/settings/variables/edit_form.ejs

@@ -0,0 +1,178 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Global Variables</h1>
+  </div>
+
+  <%- render_partial('../_nav.ejs', { active: 'variables' }) %>
+
+  <% form_for({ resource }, errors, (f) => { %>
+  <form action="<%= `/${_context.locale}/settings/variables` %>" method="post" class="form" onsubmit="filterEmptyVariables()">
+
+    <div class="form-actions mb-6">
+      <div class="btn-toolbar">
+        <%- f.submit('Save', { class: 'btn-primary' }) %>
+      </div>
+    </div>
+
+    <div class="flex gap-4">
+      <div class="flex-1">
+        <div class="mb-6">
+          <table class="data-grid w-full">
+            <thead>
+              <tr>
+                <th>Variable</th>
+                <th>Value</th>
+                <th class="actions"></th>
+              </tr>
+            </thead>
+            <tbody id="variables-tbody">
+            </tbody>
+          </table>
+
+          <div class="p-4">
+            <button type="button" class="btn-text" onclick="addVariable()">
+              Add new variable
+            </button>
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <%- f.submit('Save', { class: 'btn-primary' }) %>
+        </div>
+      </div>
+
+      <div class="w-80">
+        <div class="help">
+          <h3 class="heading-3 mb-3">How to use the global variables?</h3>
+
+          <p class="body-2 mb-4">The variables are intended for short texts, their values can be only 30 characters long.</p>
+
+          <p class="body-2">Use them in page settings or widgets like this {{VARIABLE_NAME}}</p>
+
+        </div>
+      </div>
+    </div>
+
+  </form>
+  <% }) %>
+</div>
+
+<script>
+  let variables = <%- JSON.stringify(resource._global_variables || {}) %>;
+
+  function render() {
+    const tbody = document.getElementById('variables-tbody');
+    const entries = Object.entries(variables);
+
+    tbody.innerHTML = entries.map(([name, value]) => `
+      <tr class="variable-row">
+        <td class="w-1/2">
+            <input type="text"
+                   data-key="${escapeHtml(name)}"
+                   value="${escapeHtml(name)}"
+                   placeholder="VARIABLE_NAME"
+                   maxlength="30"
+                   pattern="[A-Z_][A-Z0-9_]*"
+                   title="Only uppercase letters, numbers and underscore are allowed"
+                   class="border border-neutral-300 rounded px-3 py-2 shadow-inner w-full"
+                   onchange="renameVariable('${escapeHtml(name)}', this.value)">
+        </td>
+        <td class="w-1/2">
+            <input type="text"
+                   value="${escapeHtml(value)}"
+                   placeholder="Value"
+                   maxlength="30"
+                   class="border border-neutral-300 rounded px-3 py-2 shadow-inner w-full"
+                   oninput="updateValue('${escapeHtml(name)}', this.value)">
+        </td>
+        <td class="actions">
+          <button type="button" class="btn-danger btn-sm" onclick="removeVariable('${escapeHtml(name)}')">
+            Delete
+          </button>
+        </td>
+      </tr>
+    `).join('');
+  }
+
+  function updateValue(key, value) {
+    variables[key] = value;
+  }
+
+  function renameVariable(oldKey, newKey) {
+    newKey = newKey.trim();
+
+    if (!newKey) {
+      alert('Variable name cannot be empty');
+      render();
+      return;
+    }
+
+    if (oldKey === newKey) return;
+
+    if (variables[newKey] !== undefined) {
+      alert('Variable name already exists');
+      render();
+      return;
+    }
+
+    variables[newKey] = variables[oldKey];
+    delete variables[oldKey];
+    render();
+  }
+
+  function addVariable() {
+    let counter = 1;
+    let newKey = 'NEW_VAR';
+
+    while (variables[newKey] !== undefined) {
+      newKey = `NEW_VAR_${counter}`;
+      counter++;
+    }
+
+    variables[newKey] = '';
+    render();
+
+    const inputs = document.querySelectorAll(`input[data-key="${newKey}"]`);
+    if (inputs.length > 0) {
+      const row = inputs[0].closest('tr');
+      const valueInput = row.querySelector('input[placeholder="Value"]');
+      if (valueInput) {
+        valueInput.focus();
+      }
+    }
+  }
+
+  function removeVariable(key) {
+    delete variables[key];
+    render();
+  }
+
+  function filterEmptyVariables() {
+    for (const key in variables) {
+      if (!key.trim() || !variables[key].trim()) {
+        delete variables[key];
+      }
+    }
+
+    const form = document.querySelector('form');
+
+    form.querySelectorAll('input[name^="resource[_global_variables]"]').forEach(el => el.remove());
+
+    for (const [key, value] of Object.entries(variables)) {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = `resource[_global_variables][${key}]`;
+      input.value = value;
+      form.appendChild(input);
+    }
+  }
+
+  function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  render();
+</script>