@cdmbase/wiki-browser 12.0.18-alpha.5

package/lib/templates/content/docs/security/secure-button-mobilenative.md

@@ -0,0 +1,88 @@
+---
+meta:
+    title: Secure Button Mobile
+    description: Secure Button Mobile
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Secure Button Mobile...
+headers:
+    Cache-Control: no-cache
+---
+
+# Documentation for SecureButton Component (Mobile)
+
+## Overview
+
+The `SecureButton` component is a higher-order component that wraps another component and adds a security layer to ensure that the action defined in the button is executed only if the user is authenticated. If the user is not authenticated, it navigates them to the login screen.
+
+## Usage
+
+To use the `SecureButton` component, you need to import it and pass a child component (such as a button) as an argument. The child component should accept certain props that are common in most button components.
+
+### Example Usage:
+
+```javascript
+import React from 'react';
+import { Button } from 'native-base';
+import { SecureButton } from './SecureButton';
+
+const SecureMyButton = SecureButton(Button);
+
+function MyButton(props) {
+    // Your button component code
+    return <SecureMyButton onPress={props.onPress}>{props.children}</SecureMyButton>;
+}
+```
+
+In this example, `MyButton` is a custom button component. We wrap it using the `SecureButton` to create a `SecureMyButton`. The `SecureMyButton` will ensure that the action passed to the `onPress` prop is only executed if the user is authenticated.
+
+## Props
+
+The `SecureButton` component accepts the following props:
+
+- `Component`: The child component that you want to wrap with the security layer. This component should accept certain props, including `onPress`, `children`, `borderRadius`, `backgroundColor`, `rightIcon`, and `isDisabled`.
+
+## Behavior
+
+When a user interacts with the `SecureButton`, it will perform the following actions based on the user's authentication status:
+
+- If the user is authenticated:
+    - It will execute the action specified in the `onPress` prop.
+- If the user is not authenticated:
+    - It will navigate the user to the login screen using `navigationRef.navigate`.
+    - It passes the `redirect` parameter as `'back'` to indicate that after successful login, the user should be redirected back to the previous screen.
+
+## Example
+
+```javascript
+import React, { useCallback } from 'react';
+import { navigationRef } from '@common-stack/client-react';
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
+
+export function SecureButton<P extends { onPress; children; borderRadius; backgroundColor; rightIcon; isDisabled }>(
+    Component: React.ComponentType<P>,
+) {
+    return (props: P) => {
+        const { authenticated } = isUserAuthenticated();
+        const handleOnClick = useCallback(() => {
+            if (authenticated) {
+                return props.onPress();
+            } else {
+                navigationRef.navigate('MainStack.Login', {
+                    redirect: 'back',
+                });
+            }
+        }, [authenticated, props]);
+
+        return (
+            <>
+                <Component {...props} onPress={handleOnClick} />
+            </>
+        );
+    };
+}
+```
+
+In this example, the `SecureButton` component is defined, and it wraps a child component specified in the `Component` prop. If the user is authenticated, it allows the action to be executed; otherwise, it navigates the user to the login screen.
+
+Make sure that the child component (`Component`) accepts the required props, including `onPress`, `children`, `borderRadius`, `backgroundColor`, `rightIcon`, and `isDisabled`, to work seamlessly with the `SecureButton`.

package/lib/templates/content/docs/security/secure-button-web.md

@@ -0,0 +1,89 @@
+---
+meta:
+    title: Secure Button Web
+    description: Secure Button Web
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Secure Button Web...
+headers:
+    Cache-Control: no-cache
+---
+
+# Documentation for SecureButton Component (Web Version)
+
+The `SecureButton` component for the web is an extension of the SecureButton component. It is designed for use on web applications and provides additional functionality, including the ability to display a login modal when the user is not authenticated. This component ensures that the action specified in the `onClick` prop is executed only if the user is authenticated. If the user is not authenticated, it can show a login modal for the user to log in.
+
+## Usage
+
+To use the `SecureButton` component for the web, you need to import it and pass a child component (e.g., a button) as an argument. The child component should accept an `onClick` prop, which is a function that defines the action to be executed when the button is clicked.
+
+### Example Usage:
+
+```javascript
+import React from 'react';
+import { SecureButton } from './SecureButton';
+
+function MyButton(props) {
+    // Your button component code
+    return <button onClick={props.onClick}>{props.children}</button>;
+}
+
+const SecureMyButton = SecureButton(MyButton);
+```
+
+In this example, `MyButton` is a custom button component. We wrap it using the `SecureButton` to create a `SecureMyButton`. The `SecureMyButton` will ensure that the action specified in the `onClick` prop is only executed if the user is authenticated. If the user is not authenticated, it can display a login modal for the user to log in.
+
+## Props
+
+The `SecureButton` component for the web accepts the following props:
+
+- `Component`: The child component that you want to wrap with the security layer. This component should accept the `onClick` prop, which is a function that defines the action to be executed when the button is clicked.
+
+## Behavior
+
+When a user interacts with the `SecureButton`, it will perform the following actions based on the user's authentication status:
+
+- If the user is authenticated:
+    - It will execute the action specified in the `onClick` prop.
+- If the user is not authenticated:
+    - It will set `renderProtectedComponent` to `true`, which can trigger the display of a login modal.
+    - It passes control to the `onClick` function with the event object.
+    - The login modal should be displayed conditionally based on the value of `renderProtectedComponent`.
+    - The login modal should provide a way for the user to log in.
+    - The login modal should also have a mechanism to close it, which can be achieved by invoking `onLoginModalClose`.
+
+## Example
+
+```javascript
+import React, { useState, useCallback } from 'react';
+import { LoginModal } from './LoginModal'; // Import your login modal component
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
+
+export function SecureButton<P extends { onClick: (e?: React.MouseEvent<HTMLButtonElement>) => {} }>(
+    Component: React.ComponentType<P>,
+) {
+    return (props: P) => {
+        const [renderProtectedComponent, setRenderProtectedComponent] = useState(false);
+        const { authenticated } = isUserAuthenticated();
+        const handleOnClick = useCallback((e) => {
+            if (authenticated) {
+                return props.onClick(e);
+            }
+            setRenderProtectedComponent(true);
+        }, [authenticated, props, setRenderProtectedComponent]);
+
+        const onLoginModalClose = useCallback(() => {
+            setRenderProtectedComponent(false);
+        }, [setRenderProtectedComponent]);
+
+        return (
+            <>
+                {renderProtectedComponent && <LoginModal onClose={onLoginModalClose} />}
+                <Component {...props} onClick={handleOnClick} />
+            </>
+        );
+    };
+}
+```
+
+In this example, the `SecureButton` component for the web is defined. It wraps a child component specified in the `Component` prop. If the user is not authenticated, it sets `renderProtectedComponent` to `true`, which can trigger the display of a login modal. The login modal can be your custom modal component, and it provides a way for the user to log in. The `onLoginModalClose` function allows closing the login modal when needed.

package/lib/templates/content/docs/server-side/account-customization.md

@@ -0,0 +1,82 @@
+---
+meta:
+    title: Account Customization
+    description: Account Customization
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Account Customization...
+headers:
+    Cache-Control: no-cache
+---
+
+# Backend
+
+Accounts are now customized to add multiple fields.
+
+1. Accounts module is imported from `adminide-stack/accounts-api-server` the module has basic fields like `email, phone number, etc` and those are added to graphql schema and mongo schema like below.
+
+Mongo Schema
+
+![image](https://user-images.githubusercontent.com/3382355/144945764-d2156f59-3214-41c9-b11b-63cca85d32e8.png)
+
+Graphql Schema
+
+![image](https://user-images.githubusercontent.com/3382355/144945790-d55cdd2c-493c-4044-80b2-1d6c54eb79e1.png)
+
+2. We can inject the default mongo schema through the module.
+
+![image](https://user-images.githubusercontent.com/3382355/144945863-493875ff-cab0-4032-b1f0-b09465e13237.png)
+
+![image](https://user-images.githubusercontent.com/3382355/144945891-4076c4b6-cf0e-4b44-9da9-f04bfdb56130.png)
+
+3. But if we need to customize accounts to add more fields, we can skip the default module.
+
+a) Add extended fields in mongo scheme like below.
+
+![image](https://user-images.githubusercontent.com/3382355/144945975-641e1245-e13a-4a7e-ae8d-a127ae56c15f.png)
+
+b) As well graphql extension. Make sure to add the directives `@isAuthenticated @addAccountContext` at the end.
+
+![image](https://user-images.githubusercontent.com/3382355/205443321-4559131a-f249-4990-81f1-018a98ebee72.png)
+
+Generate graphql types by running `yarn generateGraphql` and all the new files generated need to be compiled in those specific packages.
+
+c) Write service
+
+![image](https://user-images.githubusercontent.com/3382355/205443342-ed4b61de-9ec3-4ced-bde6-87fd85613b5d.png)
+
+d) Add necessary types to refer in the Container
+
+![image](https://user-images.githubusercontent.com/3382355/205443415-3c503643-8f04-4ec3-bd8d-f0c4a27d7f0e.png)
+
+e) Bind to the `IAccountMongoExtSchema` in Container for extending Account's Mongo Schema. Also bind `ExtendedAccountServce` for accessing in the resolvers.
+
+![image](https://user-images.githubusercontent.com/3382355/207566937-cfc8b5d3-54e8-4d5e-bcf3-7e9a6a6a5dec.png)
+
+d) Write the resolver to get the specific field data
+
+![image](https://user-images.githubusercontent.com/3382355/205443631-b2965917-7f33-47a9-96cd-8ee03c5e0155.png)
+
+f) Include it in the modules
+
+![image](https://user-images.githubusercontent.com/3382355/205443438-81f5a99a-f91b-467f-b07b-6d9341781dff.png)
+
+# Frontend
+
+On frontend you can write queries how you want.
+
+For example if you need to get Composite Account data including the basic account field + exntended account fields, you can query in one gql
+
+Fragment
+
+![image](https://user-images.githubusercontent.com/3382355/205443555-eb07cfdc-539d-40c9-9d78-1ca10f405509.png)
+
+Query
+
+![image](https://user-images.githubusercontent.com/3382355/205443487-fee8a27b-33a2-45e3-b1ee-73c32783a15d.png)
+
+Also you can call individual queries
+
+![image](https://user-images.githubusercontent.com/3382355/205443514-0bac754b-27da-4bf3-9ac4-0e31413e6b36.png)
+
+After any changes to `.gql` or `.graphql` make sure to run `yarn generateGraphql` to generate types.

package/lib/templates/content/docs/server-side/apollo/caching.md

@@ -0,0 +1,164 @@
+---
+meta:
+    title: Caching with Apollo Server
+    description: Caching with Apollo Server
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Caching with Apollo Server...
+headers:
+    Cache-Control: no-cache
+---
+
+# Caching with Apollo Server
+
+## A Guide to Using `ApolloServerPluginCacheControl` and Redis
+
+Apollo Server provides multiple ways to implement caching, helping reduce server load and improve response times for frequently requested data. This document outlines how caching works in Apollo Server and how to use the `ApolloServerPluginCacheControl` and `responseCachePlugin` to store cache in Redis.
+
+### 1. **How Caching Works in Apollo Server**
+
+Apollo Server supports two types of caching:
+
+- **In-memory cache**: Data is temporarily stored on the server to avoid recomputation on subsequent identical queries.
+- **External cache (e.g., Redis)**: Data is stored in external caching layers, such as Redis, allowing caching across multiple servers.
+
+To enable caching, Apollo Server relies on two key plugins:
+
+- `ApolloServerPluginCacheControl`: Controls caching at the field level using cache directives and provides metadata like `maxAge` (TTL) for each field or query.
+- `responseCachePlugin`: Caches full query responses based on the operation (i.e., the entire query and its result).
+
+### 2. **Caching with `ApolloServerPluginCacheControl`**
+
+`ApolloServerPluginCacheControl` allows you to define cache control settings directly in your GraphQL schema using the `@cacheControl` directive or globally through server settings.
+
+#### Key Features:
+
+- **`maxAge`**: Sets the time (in seconds) for which a response or field can be cached.
+- **`scope`**: Defines if the cache is shared (`public`) or user-specific (`private`).
+
+#### Example:
+
+```graphql
+type Query {
+    favouriteBooks: [Book] @cacheControl(maxAge: 60, scope: Private)
+    books: [Book] @cacheControl(maxAge: 60)
+    bookByTitle(title: String!): Book @cacheControl(maxAge: 30)
+}
+```
+
+In this example, the `books` query response is cached for 60 seconds, while `bookByTitle` is cached for 30 seconds, both of them will be cached
+once whereas the `favouriteBooks` due to its private scope will be cached differently against each user request.
+
+#### Default Cache Control:
+
+If no `@cacheControl` directive is used, you can specify a default `maxAge` globally.
+PS: We do not use Global Max Age
+
+```javascript
+const server = new ApolloServer({
+    typeDefs,
+    resolvers,
+    plugins: [
+        ApolloServerPluginCacheControl({
+            defaultMaxAge: 10, // Default cache duration of 10 seconds
+        }),
+    ],
+});
+```
+
+---
+
+### 3. **Using the `responseCachePlugin` with Redis**
+
+The `responseCachePlugin` is designed to cache entire query responses (not just field-level caching). By integrating Redis as the cache storage, responses can be cached externally and shared across multiple instances of Apollo Server.
+
+#### Steps to Enable Response Caching in Redis:
+
+1. **Install Redis and Required Packages**:
+   Install Redis and its Node.js client (`ioredis`) to interact with the Redis server.
+
+    ```bash
+    npm install ioredis @apollo/server-plugin-response-cache
+    ```
+
+2. **Setup Redis Client**:
+   Initialize a Redis client using `ioredis` and configure the cache storage.
+
+    ```javascript
+    const Redis = require('ioredis');
+    const redis = new Redis();
+    ```
+
+3. **Configure the `responseCachePlugin`**:
+   Use the `responseCachePlugin` to store query results in Redis.
+
+    ```javascript
+    const { ApolloServer } = require('@apollo/server');
+    const { responseCachePlugin } = require('@apollo/server-plugin-response-cache');
+
+    const server = new ApolloServer({
+        typeDefs,
+        resolvers,
+        cache: redisCache,
+        plugins: [
+            responseCachePlugin({
+                shouldReadFromCache: async (requestContext) => {
+                    const { maxAge } = requestContext.overallCachePolicy || {};
+                    return maxAge > 0; // Cache only if maxAge is set
+                },
+                shouldWriteToCache: async (requestContext) => {
+                    const { maxAge } = requestContext.overallCachePolicy || {};
+                    return maxAge > 0; // Write to cache only if maxAge is set
+                },
+            }),
+        ],
+    });
+    ```
+
+4. **Server Configuration**:
+   Add both `ApolloServerPluginCacheControl` (for defining cache policies) and `responseCachePlugin` (for full-response caching) to your Apollo Server configuration.
+
+    ```javascript
+    const { ApolloServerPluginCacheControl } = require('@apollo/server-plugin-cache-control');
+
+    const server = new ApolloServer({
+        typeDefs,
+        resolvers,
+        plugins: [
+            ApolloServerPluginCacheControl({}),
+            responseCachePlugin({
+                ...pluginOptions,
+            }),
+        ],
+    });
+    ```
+
+### 4. **How the Caching Workflow Operates**
+
+- **Field-level Cache Control**: The `ApolloServerPluginCacheControl` checks for `@cacheControl` directives or uses the default `maxAge` to define TTLs for each query/field.
+- **Full Response Caching**: The `responseCachePlugin` caches the full result of a query if the request is cacheable (i.e., if `maxAge` is set).
+- **Redis as Cache Store**: Query responses are stored in Redis, and when a cached query is requested again, the response is served from Redis, avoiding the need for computation.
+
+### 5. **Cache Invalidation**
+
+As we know, Redis stores cached data with a TTL (Max Age) value, and it automatically expires once that time limit is reached. However, in scenarios where the actual data changes before the cache expires, we need a way to **invalidate the cache on demand** to ensure the application always returns up-to-date information.
+
+To address this, we’ve developed a custom plugin called `invalidateCachePlugin`. This plugin introduces a custom directive that can be applied to mutations. With this directive, you can specify a list of queries to invalidate. Whenever the mutation runs successfully, the cache for all the listed queries is automatically cleared, ensuring the application serves fresh data.
+
+#### Example:
+
+```graphql
+type Mutation {
+    addToFavourites(id: ID!): Boolean @invalidateCache(queries: ["favouriteBooks"])
+    addBook(book: BookInput!): [Book] @invalidateCache(queries: ["books"])
+}
+```
+
+### 6 . **Caveats**
+
+There is one weird issue happening with `@cacheControl` directive, as it fails to set `maxAge` for some queries.
+To overcome that we've written a custom resolver for `cacheController` to make sure that value is always there
+
+### Conclusion:
+
+By using `ApolloServerPluginCacheControl` for cache control metadata and `responseCachePlugin` to cache full responses, you can significantly improve the performance of your Apollo Server application. Storing the cache in Redis ensures a scalable, centralized cache that works across multiple instances, making it ideal for distributed systems.

package/lib/templates/content/docs/server-side/backend-architecture/FINAL-DECISION.md

@@ -0,0 +1,209 @@
+# FINAL ARCHITECTURE DECISION ✅
+
+**Date:** October 31, 2025  
+**Status:** APPROVED - This is the correct pattern
+
+---
+
+## 🎯 The Winning Pattern (Simple!)
+
+### What You Store in Database
+
+```javascript
+{
+  _id: ObjectId("507f..."),                    // MongoDB internal
+  appId: "f47ac10b-...",                       // External UUID
+
+  project: ObjectId("507f..."),                // ObjectId reference
+  tenant: ObjectId("507f..."),                 // ObjectId reference
+  organization: ObjectId("507f..."),           // ObjectId reference
+
+  name: "My Application"
+}
+```
+
+**One field per reference!** No duplication!
+
+### What Client Sees via GraphQL
+
+```json
+{
+    "id": "f47ac10b-...",
+    "name": "My Application",
+    "project": {
+        "id": "a1b2c3d4-...",
+        "name": "My Project"
+    },
+    "tenant": {
+        "id": "e5f6a7b8-...",
+        "name": "Production"
+    }
+}
+```
+
+**Only UUIDs!** ObjectIds never exposed!
+
+---
+
+## 🔑 Key Principles
+
+1. **Store ObjectId references** - Fast MongoDB joins
+2. **Store UUID for each entity** - appId, projectId, tenantId
+3. **Query by UUID** - application(id: "uuid")
+4. **Populate via ObjectId** - .populate('project')
+5. **Expose UUIDs via GraphQL** - Resolvers transform ObjectId → UUID
+
+---
+
+## 📋 Naming Convention (Final)
+
+| Field     | Type          | Example               | Exposed to Client?          |
+| --------- | ------------- | --------------------- | --------------------------- |
+| `_id`     | ObjectId      | `ObjectId('507f...')` | ❌ Never                    |
+| `appId`   | String (UUID) | `'f47ac10b-...'`      | ✅ Yes (as `id`)            |
+| `project` | ObjectId      | `ObjectId('507f...')` | ❌ Never (GraphQL resolves) |
+| `tenant`  | ObjectId      | `ObjectId('507f...')` | ❌ Never (GraphQL resolves) |
+
+**When GraphQL resolves `project`, it returns the populated Project document which has `projectId` exposed as `id`.**
+
+---
+
+## 🎨 GraphQL Flow
+
+```
+Client: application(id: "uuid-app") { id, project { id, name } }
+         ↓
+Resolver: Application.findOne({ appId: "uuid-app" }).populate('project')
+         ↓
+MongoDB: Fast join using ObjectId reference
+         ↓
+Response: { id: "uuid-app", project: { id: "uuid-project", name: "..." } }
+```
+
+---
+
+## ✅ Why This Works Perfectly
+
+| Benefit            | How                            |
+| ------------------ | ------------------------------ |
+| **Fast Joins**     | ObjectId references + populate |
+| **Clean API**      | GraphQL exposes only UUIDs     |
+| **No Duplication** | One field per reference        |
+| **Simple**         | Straightforward schema         |
+| **Secure**         | No internal structure leaked   |
+
+---
+
+## 📊 Schema Template
+
+```typescript
+const ApplicationSchema = new Schema(
+    {
+        // External UUID (query entry point)
+        appId: {
+            type: String,
+            default: () => uuidv4(),
+            unique: true,
+        },
+
+        // ObjectId references (fast joins, never exposed)
+        project: {
+            type: Schema.Types.ObjectId,
+            ref: 'Project',
+            required: true,
+        },
+        tenant: {
+            type: Schema.Types.ObjectId,
+            ref: 'Tenant',
+            required: true,
+        },
+
+        // Business fields
+        name: String,
+    },
+    {
+        toJSON: {
+            virtuals: true,
+            transform: (doc, ret) => {
+                delete ret._id; // Hide MongoDB ID
+                delete ret.project; // Hide ObjectId refs
+                delete ret.tenant; // GraphQL will resolve these
+                return ret;
+            },
+        },
+    },
+);
+
+ApplicationSchema.virtual('id').get(function () {
+    return this.appId;
+});
+```
+
+---
+
+## 🚀 Implementation Checklist
+
+For each collection:
+
+- [ ] Has `<entity>Id` UUID field (appId, projectId, etc.)
+- [ ] Virtual `id` maps to `<entity>Id`
+- [ ] References are ObjectId (project, tenant, organization)
+- [ ] `toJSON` hides `_id` and ObjectId references
+- [ ] GraphQL resolvers populate and expose nested UUIDs
+- [ ] No duplicate reference fields
+
+---
+
+## 📄 Document Priority
+
+1. **[TRUE-FINAL-ARCHITECTURE.md](./TRUE-FINAL-ARCHITECTURE.md)** ⭐ **START HERE**
+    - Complete implementation guide
+    - 20 minutes
+
+2. **[FINAL-NAMING-CONVENTION.md](./FINAL-NAMING-CONVENTION.md)** 📋
+    - Quick reference
+    - 10 minutes
+
+---
+
+## 💡 The Bottom Line
+
+```
+INTERNAL: ObjectId references (fast)
+EXTERNAL: UUIDs via GraphQL (clean)
+NO DUPLICATION: One field per reference
+```
+
+**Simple, fast, and clean!** 🎉
+
+---
+
+**Approved by:** Architecture Team  
+**Date:** October 31, 2025  
+**Ready for:** Implementation
+
+---
+
+## 🎓 Quick Example
+
+```typescript
+// Create
+const project = await Project.findOne({ projectId: input.projectId });
+await Application.create({
+  appId: uuidv4(),
+  project: project._id,  // Store ObjectId
+  name: input.name
+});
+
+// Query
+const app = await Application.findOne({ appId: 'uuid' })
+  .populate('project');  // Fast ObjectId join
+
+// GraphQL returns
+{
+  id: "uuid-app",
+  project: { id: "uuid-project", name: "..." }  // UUIDs only!
+}
+```
+
+**Perfect!** ✅