@things-factory/shell 10.1.165 → 10.1.178

package/helps/about/framework.ko.md

@@ -4,7 +4,7 @@
 
 ### 1. **클라우드 및 인프라 지원**
 
-Things-Factory 프레임워크는 현대적인 클라우드 인프라와의 완벽한 호환성을 제공하여, 애플리케이션 배포와 관리를 더욱 효율적으로 만듭니다. Edge Computing 기능을 통해 데이터 처리의 효율성을 극대화하며, 다양한 파일 스토리지 옵션을 통해 유연한 데이터 관리를 지원합니다. 클러스터링 환경에서도 높은 성능을 유지할 수 있도록 설계되었습니다.
+Things-Factory 프레임워크는 클라우드 인프라에서 애플리케이션을 배포하고 관리할 수 있도록 지원합니다. Edge Computing 기능으로 현장 데이터를 처리하고, 다양한 파일 스토리지 옵션을 통해 데이터를 관리할 수 있습니다. 실제 처리 성능과 배포 방식은 구성한 인프라에서 확인해야 합니다.
 
 - **클라우드 서비스 구조 준비**: Things-Factory는 AWS, GCP, Azure 등 주요 클라우드 플랫폼과 Kubernetes(K8s)와의 원활한 통합을 제공합니다. 이를 통해 사용자는 클라우드 환경에서 애플리케이션을 손쉽게 배포하고 관리할 수 있습니다. 예를 들어, 자동 확장 및 로드 밸런싱 기능을 통해 트래픽 급증 시에도 안정적인 서비스를 유지할 수 있으며, IaC(Infrastructure as Code) 지원으로 클라우드 리소스를 코드로 관리할 수 있습니다.
 - **Edge Computing**: 클라우드에서 모델링한 데이터를 Edge에서 실행하여, 실시간 데이터 처리와 빠른 응답성을 제공합니다. 예를 들어, 제조 현장에서 발생하는 대량의 센서 데이터를 실시간으로 처리하여, 클라우드에 전송하기 전에 필요한 데이터를 선별하고 필터링할 수 있습니다. 이 기능은 분산된 환경에서도 높은 성능을 유지하며, 네트워크 지연을 최소화할 수 있습니다.
@@ -43,9 +43,9 @@ Things-Factory 프레임워크는 현대적인 클라우드 인프라와의 완
 
 ### 5. **개발 생산성 및 관리**
 
-효율적인 개발과 관리 도구는 Things-Factory 프레임워크의 핵심입니다. 모듈 구조의 재활용성, 계층적 도메인 구조, 사용자 정의 메뉴 시스템, 다국어 기능 등을 통해 개발 생산성과 관리 효율성을 극대화합니다. 이를 통해 개발자는 더 빠르고 효율적으로 애플리케이션을 구축할 수 있습니다.
+효율적인 개발과 관리 도구는 Things-Factory 프레임워크의 핵심입니다. 모듈 구조의 재활용성, 계층적 도메인 구조, 사용자 정의 메뉴 시스템, 다국어 기능 등을 통해 개발 생산성과 관리 효율성을 높입니다. 이를 통해 개발자는 더 빠르고 효율적으로 애플리케이션을 구축할 수 있습니다.
 
-- **모듈 구조의 재활용성**: 모듈 구조를 통해, 코드를 재활용하고 유지보수하기 쉽게 만듭니다. 예를 들어, 공통 기능을 모듈로 분리하여 여러 프로젝트에서 재사용할 수 있으며, 새로운 기능 추가 시 기존 코드를 수정하지 않고도 쉽게 확장할 수 있습니다. 이를 통해 개발자는 반복적인 작업을 줄이고, 생산성을 극대화할 수 있습니다. 모듈 구조는 애플리케이션의 확장성을 높이고, 품질을 유지합니다.
+- **모듈 구조의 재활용성**: 모듈 구조를 통해, 코드를 재활용하고 유지보수하기 쉽게 만듭니다. 예를 들어, 공통 기능을 모듈로 분리하여 여러 프로젝트에서 재사용할 수 있으며, 새로운 기능 추가 시 기존 코드를 수정하지 않고도 쉽게 확장할 수 있습니다. 이를 통해 개발자는 반복적인 작업을 줄이고, 생산성을 높일 수 있습니다. 모듈 구조는 애플리케이션의 확장성을 높이고, 품질을 유지합니다.
 - **계층적 도메인 구조**: 상속 가능한 테넌시 구조를 지원하여, 복잡한 다중 도메인 환경에서도 효율적인 관리가 가능합니다. 예를 들어, 여러 하위 도메인이 상위 도메인의 설정과 권한을 상속받아, 일관된 정책을 유지할 수 있습니다. 이를 통해 다양한 비즈니스 요구에 유연하게 대응할 수 있으며, 테넌트 간의 데이터와 설정을 효율적으로 관리할 수 있습니다. 계층적 구조는 관리 효율성을 높입니다.
 - **사용자 정의 메뉴 시스템 제공**: 각기 다른 사용자 요구에 맞춰 메뉴 시스템을 사용자 정의할 수 있습니다. 예를 들어, 관리자와 일반 사용자에게 각각 다른 메뉴를 제공하여, 필요 없는 기능을 숨기고 중요한 기능을 강조할 수 있습니다. 이를 통해 사용자는 자신에게 최적화된 인터페이스를 만들 수 있으며, 관리자는 다양한 설정을 유연하게 조정할 수 있습니다. 사용자 정의 메뉴 시스템은 사용자 경험을 향상시킵니다.
 - **다국어 기능**: 테넌시별 사용자 정의 다국어 기능을 통해, 글로벌 비즈니스 환경에서도 원활한 애플리케이션 사용을 보장합니다. 예를 들어, 각 국가별로 언어와 지역 설정을 적용하여, 사용자에게 최적화된 콘텐츠를 제공할 수 있습니다. 이를 통해 각기 다른 언어를 사용하는 사용자들에게 일관된 경험을 제공합니다. 다국어 기능은 글로벌 시장 진출을 용이하게 합니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "10.1.165",
+  "version": "10.1.178",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -67,13 +67,13 @@
     "@operato/layout": "^10.0.0",
     "@operato/shell": "^10.0.0",
     "@operato/typeorm-history": "^10.0.0",
-    "@operato/utils": "^10.0.0",
+    "@operato/utils": "^10.29.36",
     "@reduxjs/toolkit": "^2.2.5",
     "@things-factory/ejs-remote": "^10.1.20",
     "@things-factory/env": "^10.1.149",
     "@things-factory/operato-license-checker": "^4.0.4",
     "@things-factory/styles": "^10.1.123",
-    "@things-factory/utils": "^10.1.20",
+    "@things-factory/utils": "^10.1.178",
     "@types/koa": "^3.0.1",
     "@types/koa-bodyparser": "^4.3.13",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",
@@ -142,5 +142,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "d9e3774d70561b063e4f1d10c387caf721d99b61"
+  "gitHead": "d57448d3f3045f72a9f24b877a3e306eb34cbaf1"
 }

package/tests/client-upload-limits.test.ts

@@ -0,0 +1,38 @@
+/**
+ * The shell tells every file picker the server's upload limits.
+ *
+ * ## Why this is tested
+ *
+ * `ox-input-file` refuses before the upload only when someone registered where the limits come from
+ * (@operato/utils `registerFileUploadLimits`). The shell is that someone: on bootstrap it registers a
+ * reader of the `fileUploadLimits` query. If the registration is dropped, every picker quietly takes a
+ * file the server then refuses after the whole upload.
+ */
+
+const mockRegistered: Array<() => Promise<any>> = []
+const mockQueries: string[] = []
+
+jest.mock('@operato/utils', () => ({ registerFileUploadLimits: (reader: any) => mockRegistered.push(reader) }))
+jest.mock('@operato/layout', () => ({ updateLayout: () => {} }))
+jest.mock('@operato/graphql', () => ({
+  client: {
+    query: async ({ query }: any) => {
+      mockQueries.push(query.loc.source.body)
+      return { data: { fileUploadLimits: { maxFileSize: 1024, maxFiles: 3 } } }
+    }
+  }
+}))
+
+describe('client bootstrap', () => {
+  it('registers the server upload limits for every file picker', async () => {
+    /* The module writes its version on window when loaded. */
+    ;(global as any).window = { matchMedia: () => ({ matches: true, addEventListener: () => {} }) }
+    const bootstrap = require('../client/bootstrap').default
+
+    bootstrap()
+
+    expect(mockRegistered.length).toBe(1)
+    expect(await mockRegistered[0]()).toEqual({ maxFileSize: 1024, maxFiles: 3 })
+    expect(mockQueries[0]).toMatch(/fileUploadLimits\s*\{\s*maxFileSize\s+maxFiles\s*\}/)
+  })
+})

package/tests/file-upload-limits.test.ts

@@ -0,0 +1,48 @@
+/**
+ * The upload limits, in one place.
+ *
+ * ## Why this is tested
+ *
+ * The upload middleware enforces `fileUpload.maxFileSize` / `maxFiles`; the `fileUploadLimits`
+ * query hands the same numbers to every file picker so it refuses before uploading. Both servers
+ * (server.ts, server-dev.ts) once carried their own copy of the reading. If the query and the
+ * middleware drift, a picker takes a file the server then refuses.
+ */
+import 'reflect-metadata'
+
+const mockConfig: Record<string, any> = {}
+
+jest.mock('@things-factory/env', () => ({ config: { get: (key: string) => mockConfig[key] } }))
+
+import { fileUploadOption } from '../server/service/file-upload/file-upload-option'
+import { FileUploadQuery } from '../server/service/file-upload/file-upload-query'
+
+describe('upload limits', () => {
+  afterEach(() => delete mockConfig.fileUpload)
+
+  it('falls back to 10mb and 10 files', () => {
+    expect(fileUploadOption()).toEqual({ maxFileSize: 10 * 1024 * 1024, maxFiles: 10 })
+  })
+
+  it('reads the configured limits', () => {
+    mockConfig.fileUpload = { maxFileSize: '25mb', maxFiles: 3 }
+    expect(fileUploadOption()).toEqual({ maxFileSize: 25 * 1024 * 1024, maxFiles: 3 })
+  })
+
+  it('answers the picker with the numbers the middleware enforces', () => {
+    mockConfig.fileUpload = { maxFileSize: '2mb', maxFiles: 4 }
+    expect(new FileUploadQuery().fileUploadLimits()).toEqual(fileUploadOption())
+  })
+})
+
+describe('both servers', () => {
+  const fs = require('fs')
+  const path = require('path')
+
+  it.each(['server.ts', 'server-dev.ts'])('%s reads the limits from the one place', name => {
+    const source = fs.readFileSync(path.join(__dirname, '../server', name), 'utf8')
+
+    expect(source).toContain('graphqlUploadKoa(fileUploadOption())')
+    expect(source).not.toContain("config.get('fileUpload')")
+  })
+})

package/tests/one-file-picker.test.ts

@@ -0,0 +1,52 @@
+/**
+ * One file picker.
+ *
+ * Picking a file was written eight times across operato and things-factory. `ox-input-file`
+ * (@operato/input) is now the one picker and `FileDropHelper` (@operato/utils) the one drop helper.
+ * This counts that the retired copies stay gone from things-factory client code: the form-ui
+ * `file-uploader`, the image-uploader-ui `image-uploader` and the second `FileDropHelper`.
+ *
+ * A new need goes into ox-input-file, not into a new element here.
+ *
+ * It also asserts how many files it read, so a wrong path cannot pass by reading nothing.
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs'
+import path from 'path'
+
+const PACKAGES = path.resolve(__dirname, '../..')
+const SKIP = new Set(['node_modules', 'dist', 'dist-client', 'dist-server', 'coverage'])
+
+function sources(dir: string, found: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    if (SKIP.has(name) || name.startsWith('.')) continue
+    const full = path.join(dir, name)
+    const stat = statSync(full)
+    if (stat.isDirectory()) sources(full, found)
+    else if (/\.(ts|js)$/.test(name)) found.push(full)
+  }
+  return found
+}
+
+const RETIRED: [string, RegExp][] = [
+  ['form-ui file-uploader', /customElements\.define\(\s*['"]file-uploader['"]|<file-uploader[\s>]/],
+  ['image-uploader-ui image-uploader', /customElements\.define\(\s*['"]image-uploader['"]|<image-uploader[\s>]/],
+  ['a second FileDropHelper', /class\s+FileDropHelper\b/]
+]
+
+describe('one file picker', () => {
+  const files = readdirSync(PACKAGES)
+    .map(one => path.join(PACKAGES, one))
+    .filter(dir => statSync(dir).isDirectory())
+    .flatMap(dir => ['client', 'src'].map(sub => path.join(dir, sub)).filter(sub => statSync(sub, { throwIfNoEntry: false })?.isDirectory()))
+    .flatMap(dir => sources(dir))
+
+  it('reads the client code of every package', () => {
+    expect(files.length).toBeGreaterThan(1000)
+  })
+
+  it.each(RETIRED)('%s is gone', (_, pattern) => {
+    const found = files.filter(file => pattern.test(readFileSync(file, 'utf8'))).map(file => path.relative(PACKAGES, file))
+    expect(found).toEqual([])
+  })
+})