@raketa-cloud/admin 1.7.5 → 1.7.8

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.8",
   "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/cloud/documents/articlesDocuments.js

@@ -20,6 +20,7 @@ function minimalArticleFragment() {
       publishAt
       insertedAt
       updatedAt
+      translations
     }
   `;
 }

package/src/cloud/documents/eventsDocuments.js

@@ -22,6 +22,7 @@ function minimalEventFragment() {
       endsAt
       insertedAt
       updatedAt
+      translations
     }
   `;
 }

package/src/cloud/documents/pagesDocuments.js

@@ -19,6 +19,7 @@ function minimalPageFragment() {
       visibility
       insertedAt
       updatedAt
+      translations
     }
   `;
 }

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/handlers/pages/ExportsHandler.js

@@ -18,7 +18,7 @@ const exportCSV = async (ctx) => {
   const csv = CSVExportHelper.formatDataAsCSV(
     pages.list,
     headers,
-    fieldMapping,
+    fieldMapping
   );
 
   return {

package/src/helpers/CSVExportHelper.js

@@ -72,6 +72,10 @@ const extractResourceType = (resource, type) => {
   return type;
 };
 
+function formatTranslations(item) {
+  return Object.keys(item?.translations || {}).map(locale => locale).join(";")
+}
+
 const standardFieldMapping = (remoteConfig, locale, type) => ({
   id: "id",
   type: (item) => extractResourceType(item, type),
@@ -81,6 +85,7 @@ const standardFieldMapping = (remoteConfig, locale, type) => ({
   visibility: "visibility",
   created_at: "insertedAt",
   updated_at: "updatedAt",
+  translations: formatTranslations
 });
 
 const standardHeaders = [
@@ -92,6 +97,7 @@ const standardHeaders = [
   "visibility",
   "created_at",
   "updated_at",
+  "translations"
 ];
 
 export default {

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/tests/handlers/articles/ExportsHandler.test/index.test.js

@@ -144,7 +144,7 @@ describe("Articles ExportsHandler", () => {
       const result = await ExportsHandler.index(ctx);
 
       expect(result.text).toBe(
-        "id,type,locale,title,URL,visibility,created_at,updated_at",
+        "id,type,locale,title,URL,visibility,created_at,updated_at,translations",
       );
     });
 

package/src/tests/handlers/events/ExportsHandler.test/index.test.js

@@ -143,7 +143,7 @@ describe("Events ExportsHandler", () => {
       const result = await ExportsHandler.index(ctx);
 
       expect(result.text).toBe(
-        "id,type,locale,title,URL,visibility,created_at,updated_at",
+        "id,type,locale,title,URL,visibility,created_at,updated_at,translations",
       );
     });
 

package/src/tests/handlers/pages/ExportsHandler.test/index.test.js

@@ -143,7 +143,7 @@ describe("Pages ExportsHandler", () => {
       const result = await ExportsHandler.index(ctx);
 
       expect(result.text).toBe(
-        "id,type,locale,title,URL,visibility,created_at,updated_at",
+        "id,type,locale,title,URL,visibility,created_at,updated_at,translations",
       );
     });
 

package/src/tests/helpers/CSVExportHelper.test.js

@@ -206,6 +206,10 @@ describe("CSVExportHelper", () => {
           visibility: "public",
           insertedAt: "2024-01-01",
           updatedAt: "2024-01-02",
+          translations: {
+            es: {},
+            de: {}
+          }
         },
       ];
       const headers = [...CSVExportHelper.standardHeaders];
@@ -222,8 +226,8 @@ describe("CSVExportHelper", () => {
       );
 
       expect(result).toBe(
-        "id,type,locale,title,URL,visibility,created_at,updated_at\r\n" +
-          "1,article,en,Test Article,/en/article/1,public,2024-01-01,2024-01-02",
+        "id,type,locale,title,URL,visibility,created_at,updated_at,translations\r\n" +
+          "1,article,en,Test Article,/en/article/1,public,2024-01-01,2024-01-02,es;de",
       );
     });
   });
@@ -297,6 +301,7 @@ describe("CSVExportHelper", () => {
         visibility: "visibility",
         created_at: "insertedAt",
         updated_at: "updatedAt",
+        translations: expect.any(Function),
       });
     });
 
@@ -358,6 +363,7 @@ describe("CSVExportHelper", () => {
         "visibility",
         "created_at",
         "updated_at",
+        "translations"
       ]);
     });
   });

package/src/views/_shared/_translations_search_input.ejs

@@ -0,0 +1,31 @@
+<div class="mb-4">
+  <label for="" class="font-semibold hover:cursor-pointer body-3">Translations</label>
+  <div class="checkbox-group mb-4">
+    <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
+    <div class="flex items-center gap-1">
+      <% if (utils.includedInCollection(item.code, _context.query["f:translations"])) { %>
+          <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
+      <% } else { %>
+      <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
+      <% } %>
+      <label for='locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
+    </div>
+    <% }); %>
+  </div>
+</div>
+
+<div class="mb-4">
+  <label for="" class="font-semibold hover:cursor-pointer body-3">Without translations</label>
+  <div class="checkbox-group mb-4">
+    <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
+    <div class="flex items-center gap-1">
+      <% if (utils.includedInCollection(item.code, _context.query["f:without_translations"])) { %>
+          <input type="checkbox" name="f:without_translations" id='n-locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
+      <% } else { %>
+      <input type="checkbox" name="f:without_translations" id='n-locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
+      <% } %>
+      <label for='n-locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
+    </div>
+    <% }); %>
+  </div>
+</div>

package/src/views/_shared/_visibility_search_input.ejs

@@ -0,0 +1,30 @@
+<div class="mb-4">
+  <label for="visibility" class="font-semibold hover:cursor-pointer body-3">Visibility</label>
+  <select name="f:visibility">
+    <option value="">Please select...</option>
+
+    <% if (_context.query["f:visibility"] === "PRIVATE") { %>
+        <option value="PRIVATE" selected>Private</option>
+    <% } else { %>
+        <option value="PRIVATE">Private</option>
+    <% } %>
+
+    <% if (_context.query["f:visibility"] === "PUBLIC") { %>
+        <option value="PUBLIC" selected>Public</option>
+    <% } else { %>
+        <option value="PUBLIC">Public</option>
+    <% } %>
+
+    <% if (_context.query["f:visibility"] === "UNLISTED") { %>
+        <option value="UNLISTED" selected>Unlisted</option>
+    <% } else { %>
+        <option value="UNLISTED">Unlisted</option>
+    <% } %>
+
+    <% if (_context.query["f:visibility"] === "PROTECTED") { %>
+        <option value="PROTECTED" selected>Protected</option>
+    <% } else { %>
+        <option value="PROTECTED">Protected</option>
+    <% } %>
+  </select>
+</div>

package/src/views/articles/index.ejs

@@ -139,6 +139,8 @@
       <input type="text" name="f:keyword" value="<%= _context.query["f:keyword"] %>" />
     </div>
 
+    <%- include('./../_shared/_visibility_search_input.ejs') %>
+
     <div class="mb-4">
       <label for="widget" class="font-semibold hover:cursor-pointer body-3">Widget</label>
       <input type="text" name="f:widget" value="<%= _context.query["f:widget"] %>" />
@@ -159,21 +161,7 @@
         <input type="datetime-local" name="f:last_updated_to" value="<%= _context.query["f:last_updated_to"] %>" data-no-hints="true" />
     </div>
 
-    <div class="mb-4">
-      <label for="" class="font-semibold hover:cursor-pointer body-3">Translations</label>
-      <div class="checkbox-group mb-4">
-        <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
-        <div class="flex items-center gap-1">
-          <% if (utils.includedInCollection(item.code, _context.query["f:translations"])) { %>
-              <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
-          <% } else { %>
-          <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
-          <% } %>
-          <label for='locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
-        </div>
-        <% }); %>
-      </div>
-    </div>
+    <%- include('./../_shared/_translations_search_input.ejs') %>
 
     <div class="mb-4">
       <label for="" class="font-semibold hover:cursor-pointer body-3">Tags</label>

package/src/views/events/index.ejs

@@ -139,6 +139,8 @@
       <input type="text" name="f:keyword" value="<%= _context.query["f:keyword"] %>" />
     </div>
 
+    <%- include('./../_shared/_visibility_search_input.ejs') %>
+
     <div class="mb-4">
       <label for="widget" class="font-semibold hover:cursor-pointer body-3">Widget</label>
       <input type="text" name="f:widget" value="<%= _context.query["f:widget"] %>" />
@@ -159,21 +161,7 @@
         <input type="datetime-local" name="f:last_updated_to" value="<%= _context.query["f:last_updated_to"] %>" />
     </div>
 
-    <div class="mb-4">
-      <label for="" class="font-semibold hover:cursor-pointer body-3">Translations</label>
-      <div class="checkbox-group mb-4">
-        <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
-        <div class="flex items-center gap-1">
-          <% if (utils.includedInCollection(item.code, _context.query["f:translations"])) { %>
-              <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
-          <% } else { %>
-          <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
-          <% } %>
-          <label for='locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
-        </div>
-        <% }); %>
-      </div>
-    </div>
+    <%- include('./../_shared/_translations_search_input.ejs') %>
 
     <div class="mb-4">
       <label for="" class="font-semibold hover:cursor-pointer body-3">Tags</label>

package/src/views/pages/index.ejs

@@ -134,6 +134,8 @@
       <input type="text" name="f:keyword" value="<%= _context.query["f:keyword"] %>" />
     </div>
 
+    <%- include('./../_shared/_visibility_search_input.ejs') %>
+
     <div class="mb-4">
       <label for="widget" class="font-semibold hover:cursor-pointer body-3">Widget</label>
       <input type="text" name="f:widget" value="<%= _context.query["f:widget"] %>" />
@@ -154,21 +156,7 @@
         <input type="datetime-local" name="f:last_updated_to" value="<%= _context.query["f:last_updated_to"] %>" />
     </div>
 
-    <div class="mb-4">
-      <label for="" class="font-semibold hover:cursor-pointer body-3">Translations</label>
-      <div class="checkbox-group mb-4">
-        <% translations.filter(item => item.code !== _context.locale).forEach((item,idx)=> { %>
-        <div class="flex items-center gap-1">
-          <% if (utils.includedInCollection(item.code, _context.query["f:translations"])) { %>
-              <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' checked value="<%= item.code %>" class="hover:cursor-pointer">
-          <% } else { %>
-          <input type="checkbox" name="f:translations" id='locale-<%= item.code %>' value="<%= item.code %>" class="hover:cursor-pointer">
-          <% } %>
-          <label for='locale-<%= item.code %>' class="body-2 hover:cursor-pointer"><%= item.name %></label>
-        </div>
-        <% }); %>
-      </div>
-    </div>
+    <%- include('./../_shared/_translations_search_input.ejs') %>
 
     <div class="mb-4">
       <label for="" class="font-semibold hover:cursor-pointer body-3">Tags</label>

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>