Add new templates and remove old templates (#8490)

* bugfix: airtable plugin support for personal access token (#8295)

* fix: airtable plugin support for personal access token

* fix: review comments fixed

* Add new templates and remove old templates

* Change onboarding page templates and fix CSS

* Change Job application tracker template images

* Implement dark mode for onbarding page templates

* Fix templates with query issues

* fix template creation

* Remove redundant datasource options from templates

---------

Co-authored-by: Ganesh Kumar <40178541+ganesh8056@users.noreply.github.com>
Co-authored-by: Akshay <akshaysasidharan93@gmail.com>

frontend/src/HomePage/BlankPage.jsx

@@ -23,9 +23,9 @@ export const BlankPage = function BlankPage({
   const navigate = useNavigate();
 
   const staticTemplates = [
-    { id: 's3-file-explorer', name: 'S3 file explore' },
-    { id: 'job-application-tracker', name: 'Job application tracker' },
-    { id: 'whatsapp-and-sms-crm', name: 'Whatsapp and sms crm' },
+    { id: 'customer-ticketing-form', name: 'Customer ticketing form' },
+    { id: 'inventory-management-tooljet-db', name: 'Inventory management' },
+    { id: 'kpi-management-dashboard-tooljet-db', name: 'KPI management dashboard' },
   ];
 
   const appCreationDisabled = !canCreateApp();
@@ -114,7 +114,9 @@ export const BlankPage = function BlankPage({
                           >
                             <div
                               className="img-responsive img-responsive-21x9 card-img-top template-card-img"
-                              style={{ backgroundImage: `url(assets/images/templates/${id}.png)` }}
+                              style={{
+                                backgroundImage: `url(assets/images/templates/${id}${darkMode ? '-dark' : ''}.png)`,
+                              }}
                               data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-image`}
                             />
                             <div className="card-body">

frontend/src/_styles/theme.scss

@@ -9987,8 +9987,9 @@ tbody {
 .template-card {
   padding: 16px;
   gap: 16px;
-  width: 272px;
-  height: 184px;
+  min-width: 280px;
+  max-width: 100%;
+  height: 210px;
   background: var(--base);
   border: 1px solid var(--slate3);
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
@@ -10001,8 +10002,8 @@ tbody {
 
 .template-card-img {
   padding: 0px;
-  width: 240px;
-  height: 112px;
+  width: 100%;
+  height: 77.5%;
   border-radius: 4px;
 }
 

plugins/packages/airtable/lib/index.ts

@@ -9,11 +9,15 @@ export default class AirtableQueryService implements QueryService {
 
   async run(sourceOptions: SourceOptions, queryOptions: QueryOptions): Promise<QueryResult> {
     let result = {};
+    let apiToken = '';
     let response = null;
     const operation = queryOptions.operation;
     const baseId = queryOptions.base_id;
     const tableName = queryOptions.table_name;
-    const apiKey = sourceOptions.api_key;
+
+    // Below condition for API Key is kept for Backward compatibility and needs migration to be removed later on.
+    if (sourceOptions.api_key) apiToken = sourceOptions.api_key;
+    if (sourceOptions.personal_access_token) apiToken = sourceOptions.personal_access_token;
 
     try {
       switch (operation) {
@@ -25,7 +29,7 @@ export default class AirtableQueryService implements QueryService {
             `https://api.airtable.com/v0/${baseId}/${tableName}/?pageSize=${pageSize}&offset=${offset}`,
             {
               method: 'get',
-              headers: this.authHeader(apiKey),
+              headers: this.authHeader(apiToken),
             }
           );
 
@@ -37,7 +41,7 @@ export default class AirtableQueryService implements QueryService {
           const recordId = queryOptions.record_id;
 
           response = await got(`https://api.airtable.com/v0/${baseId}/${tableName}/${recordId}`, {
-            headers: this.authHeader(apiKey),
+            headers: this.authHeader(apiToken),
           });
 
           result = JSON.parse(response.body);
@@ -47,7 +51,7 @@ export default class AirtableQueryService implements QueryService {
         case 'create_record': {
           response = await got(`https://api.airtable.com/v0/${baseId}/${tableName}`, {
             method: 'post',
-            headers: this.authHeader(apiKey),
+            headers: this.authHeader(apiToken),
             json: {
               records: JSON.parse(queryOptions.body),
             },
@@ -61,7 +65,7 @@ export default class AirtableQueryService implements QueryService {
         case 'update_record': {
           response = await got(`https://api.airtable.com/v0/${baseId}/${tableName}`, {
             method: 'patch',
-            headers: this.authHeader(apiKey),
+            headers: this.authHeader(apiToken),
             json: {
               records: [
                 {
@@ -82,7 +86,7 @@ export default class AirtableQueryService implements QueryService {
 
           response = await got(`https://api.airtable.com/v0/${baseId}/${tableName}/${_recordId}`, {
             method: 'delete',
-            headers: this.authHeader(apiKey),
+            headers: this.authHeader(apiToken),
           });
           result = JSON.parse(response.body);
 

plugins/packages/airtable/lib/manifest.json

@@ -12,7 +12,7 @@
       "rawData": {}
     },
     "options": {
-      "api_key": {
+      "personal_access_token": {
         "type": "string",
         "encrypted": true
       }
@@ -20,20 +20,20 @@
     "customTesting": true
   },
   "defaults": {
-    "api_key": {
+    "personal_access_token": {
       "value": ""
     }
   },
   "properties": {
-    "api_key": {
-      "label": "API key",
-      "key": "api_key",
+    "personal_access_token": {
+      "label": "Personal access token",
+      "key": "personal_access_token",
       "type": "password",
-      "description": "Api key for airtable",
-      "helpText": "For generating API key, visit: <a href='https://airtable.com/account' target='_blank' rel='noreferrer'>Airtable account page</a>"
+      "description": "Personal access token for airtable",
+      "helpText": "For generating personal access token, visit: <a href='https://airtable.com/account' target='_blank' rel='noreferrer'>Airtable account page</a>"
     }
   },
   "required": [
-    "api_key"
+    "personal_access_token"
   ]
 }

plugins/packages/airtable/lib/types.ts

@@ -1,4 +1,8 @@
-export type SourceOptions = { api_key: string };
+export type SourceOptions = {
+  api_key?: string;
+  personal_access_token?: string;
+};
+
 export type QueryOptions = {
   operation: string;
   base_id: string;

server/src/services/library_app_creation.service.ts

@@ -20,6 +20,7 @@ export class LibraryAppCreationService {
     importDto.organization_id = currentUser.organizationId;
     importDto.app = templateDefinition.app || templateDefinition.appV2;
     importDto.tooljet_database = templateDefinition.tooljet_database;
+    importDto.tooljet_version = templateDefinition.tooljet_version;
 
     if (this.isVersionGreaterThanOrEqual(templateDefinition.tooljet_version, '2.16.0')) {
       importDto.app[0].appName = appName;

server/templates/applicant-tracking-system/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Applicant tracking system",
+  "description": "Streamline hiring with customizable job posts, candidate profiles, and interview status tracking with this simple yet powerful template.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "ToolJet Database", "id": "tooljetdb" }],
+  "id": "applicant-tracking-system",
+  "category": "operations"
+}

server/templates/aws-s3-file-explorer/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "AWS S3 file explorer",
+  "description": "Navigate Amazon S3 buckets, search, preview, and manage objects with an easy-to-use web explorer for S3 storage.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "AWS S3", "id": "s3" }],
+  "id": "aws-s3-file-explorer",
+  "category": "product-management"
+}

server/templates/customer-dashboard/manifest.json

@@ -1,8 +0,0 @@
-{
-  "name": "Customer dashboard",
-  "description": "Display the list of customers on a table and signups on a chart using data from a PostgreSQL database.",
-  "widgets": ["Table", "Chart"],
-  "sources": [{"name": "PostgreSQL", "id": "postgresql"}],
-  "id": "customer-dashboard",
-  "category": "sales"
-}

server/templates/customer-support-admin/manifest.json

@@ -3,10 +3,8 @@
   "description": "The Customer Support Admin template streamlines support with a Main Dashboard for ticket management and All Contacts for maintaining customer data.",
   "widgets": ["Table", "Chart"],
   "sources": [
-    {
-      "name": "Tooljet Database",
-      "id": "tooljetdb"
-    }
+    { "name": "ToolJet Database", "id": "tooljetdb" },
+    { "name": "SMTP", "id": "smtp" }
   ],
   "id": "customer-support-admin",
   "category": "operations"

server/templates/customer-ticketing-form/manifest.json

@@ -3,10 +3,8 @@
   "description": "The Customer Ticketing Form optimizes support ticket management, seamlessly gathering customer info and tracking ticket progress with deep integration into Customer Support Admin.",
   "widgets": ["Table", "Chart"],
   "sources": [
-    {
-      "name": "Tooljet Database",
-      "id": "tooljetdb"
-    }
+    { "name": "ToolJet Database", "id": "tooljetdb" },
+    { "name": "SMTP", "id": "smtp" }
   ],
   "id": "customer-ticketing-form",
   "category": "operations"

server/templates/employee-directory/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Employee directory",
+  "description": "Manage employee contact information and profiles in a centralized database built on the ToolJet database.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "ToolJet Database", "id": "tooljetdb" }],
+  "id": "employee-directory",
+  "category": "operations"
+}

server/templates/expense-tracker-admin/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Expense tracker admin",
+  "description": "Update and manage employee expenses centrally through an admin dashboard built with ToolJet web UI and database.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "ToolJet Database", "id": "tooljetdb" }],
+  "id": "expense-tracker-admin",
+  "category": "operations"
+}

server/templates/expense-tracker-portal/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Expense tracker portal",
+  "description": "Submit and track personal expenses through an easy portal built with a ToolJet web UI and database.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "ToolJet Database", "id": "tooljetdb" }],
+  "id": "expense-tracker-portal",
+  "category": "operations"
+}

server/templates/gcs-file-explorer/manifest.json

@@ -1,18 +0,0 @@
-{
-    "name": "Google Cloud Storage Explorer",
-    "description": "A file explorer template that lets you view, download, and upload files in any of your GCS bucket.",
-    "widgets": [
-        "List view",
-        "File Picker",
-        "Dropdown",
-        "Modal"
-    ],
-    "sources": [
-        {
-            "name": "GCS",
-            "id": "gcs"
-        }
-    ],
-    "id": "gcs-file-explorer",
-    "category": "product-management"
-}

server/templates/github-contributors/manifest.json

@@ -1,8 +0,0 @@
-{
-  "name": "GitHub contributors",
-  "description": "Display the list of contributors of a GitHub repository and display profile details on selection.",
-  "widgets": ["Table"],
-  "sources": [{"name": "REST API", "id": "restapi"}],
-  "id": "github-contributors",
-  "category": "product-management"
-}

server/templates/github-star-history-tracker/manifest.json

@@ -1,8 +0,0 @@
-{
-  "name": "GitHub star history tracker",
-  "description": "Tracks the growth of stargazers in a GitHub repository over time.",
-  "widgets": ["Chart"],
-  "sources": [{"name": "REST API", "id": "restapi"}],
-  "id": "github-star-history-tracker",
-  "category": "product-management"
-}

server/templates/github-star-ranking/manifest.json

@@ -1,8 +0,0 @@
-{
-  "name": "GitHub Star Ranking",
-  "description": "Display the list of repositories having equal or more stars as set the by the user, includes advance search filter like language and minimum forks.",
-  "widgets": ["Table"],
-  "sources": [{"name": "REST API", "id": "restapi"}],
-  "id": "github-star-ranking",
-  "category": "product-management"
-}

server/templates/google-cloud-storage-explorer/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Google cloud storage explorer",
+  "description": "Browse, search, upload, download, and manage objects in Google Cloud Storage buckets through an intuitive ToolJet web interface.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "GCS", "id": "gcs" }],
+  "id": "google-cloud-storage-explorer",
+  "category": "product-management"
+}

server/templates/inventory-management-postgresql/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Inventory management - PostgreSQL",
+  "description": "Track inventory levels, orders, and shipments using a PostgreSQL database to monitor and optimize stock.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "PostgreSQL", "id": "postgresql" }],
+  "id": "inventory-management-postgresql",
+  "category": "operations"
+}

server/templates/inventory-management-tooljet-db/manifest.json

@@ -1,13 +1,8 @@
 {
-  "name": "Inventory management",
+  "name": "Inventory management - ToolJet Database",
   "description": "Easily manage, control, and optimise your inventory with our single-page Inventory Management Template.",
   "widgets": ["Table", "Chart"],
-  "sources": [
-    {
-      "name": "Tooljet Database",
-      "id": "tooljetdb"
-    }
-  ],
-  "id": "inventory-management",
+  "sources": [{ "name": "ToolJet Database", "id": "tooljetdb" }],
+  "id": "inventory-management-tooljet-db",
   "category": "operations"
 }

server/templates/job-application-tracker/manifest.json

@@ -1,8 +1,8 @@
 {
-  "name": "Job Application Tracker",
-  "description": "A dashboard for performing CRUD operations in google sheets.",
-  "widgets": ["Table"],
-  "sources": [{"name": "Google Sheets", "id": "googlesheets"}],
+  "name": "Job application tracker",
+  "description": "Centralize job applications in a Google Sheet with custom columns for position, date applied, status, and notes to streamline tracking.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "Google Sheets", "id": "googlesheets" }],
   "id": "job-application-tracker",
   "category": "operations"
-}
+}

server/templates/kpi-management-dashboard-airtable/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "KPI management dashboard - Airtable",
+  "description": "Monitor essential product metrics with the AARRR pirate metrics framework using dynamic dashboards and Airtable as the backend.",
+  "widgets": ["Table", "Chart"],
+  "sources": [{ "name": "Airtable", "id": "airtable" }],
+  "id": "kpi-management-dashboard-airtable",
+  "category": "data-and-analytics"
+}