Admin dashboard for configuring feature flags

angular.json

@@ -30,7 +30,8 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "moment",
-              "currencies.json"
+              "currencies.json",
+              "@superset-ui/embedded-sdk"
             ]
           },
           "configurations": {

cypress/support/constants.ts

@@ -19,6 +19,22 @@ export const init_config = {
     'matomoUrl': '',
     'googleTagManagerId': '',
     'searchEnabled': true,
+    'analyticsEnabled': true,
+    'analytics': 'https://analytics.dome-marketplace-sbx.org',
+    'analyticsDashboards': {
+        'businessInsightsNonLear': 'business-insights-non-lear',
+        'businessInsightsLear': 'business-insights-lear',
+        'usageMonitor': 'usage-monitor'
+    },
+    'analyticsSuperset': {
+        'guestTokenPath': '/api/v1/dome/guest_token/'
+    },
+    'quotesEnabled': false,
+    'tenderingEnabled': false,
+    'dataSpaceEnabled': false,
+    'launchValidationEnabled': false,
+    'tenderDevButtonsOpenCloseEnabled': false,
+    'aiEnabled': false,
     'domeAbout': 'https://dome-marketplace.eu/about/',
     'domeRegister': 'https://dome-marketplace.github.io/onboarding/',
     'domePublish': 'https://knowledgebase.dome-marketplace.org/shelves/company-onboarding-process',

package.json

@@ -35,6 +35,7 @@
     "@fortawesome/sharp-solid-svg-icons": "^6.4.2",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
+    "@superset-ui/embedded-sdk": "^0.4.0",
     "@types/tailwindcss": "^3.1.0",
     "currencies.json": "^1.0.2",
     "fast-average-color": "^9.4.0",

src/app/app-routing.module.ts

@@ -103,6 +103,11 @@ const routes: Routes = [
     component: ProductOrdersComponent,
     canActivate: [AuthGuard], data: { roles: [] }
   },
+  {
+    path: 'analytics',
+    loadComponent: () => import('./pages/analytics/analytics.component').then(c => c.AnalyticsComponent),
+    canActivate: [AuthGuard], data: { roles: [] }
+  },
   {
     path: 'quote-list',
     component: QuoteListComponent,

src/app/app.module.ts

@@ -25,10 +25,12 @@ import { GalleryComponent } from "./offerings/gallery/gallery.component";
 import { HowItWorksComponent } from "./offerings/how-it-works/how-it-works.component";
 import { PlatformBenefitsComponent } from "./offerings/platform-benefits/platform-benefits.component";
 import { AdminComponent } from './pages/admin/admin.component';
+import { AnalyticsConfigComponent } from './pages/admin/analytics-config/analytics-config.component';
 import { CategoriesComponent } from './pages/admin/categories/categories.component';
 import { CreateCategoryComponent } from './pages/admin/categories/create-category/create-category.component';
 import { UpdateCategoryComponent } from './pages/admin/categories/update-category/update-category.component';
 import { EmailComponent } from './pages/admin/email/email.component';
+import { FeaturesConfigComponent } from './pages/admin/features-config/features-config.component';
 import { DefaultCatalogComponent } from './pages/admin/default-catalog/default-catalog.component';
 import { SearchFiltersConfigComponent } from './pages/admin/search-filters-config/search-filters-config.component';
 import { VerificationComponent } from './pages/admin/verification/verification.component';
@@ -146,13 +148,15 @@ import { RequestValidationModalComponent } from './pages/seller-offerings/offeri
     ErrorMessageComponent,
     CartCardComponent,
     AdminComponent,
+    AnalyticsConfigComponent,
     CategoriesComponent,
     CreateCategoryComponent,
     UpdateCategoryComponent,
     CategoriesRecursionListComponent,
     ContactUsComponent,
     VerificationComponent,
     EmailComponent,
+    FeaturesConfigComponent,
     SearchFiltersConfigComponent,
     DefaultCatalogComponent,
     InventoryResourcesComponent,

src/app/data/featuresConfig.ts

@@ -0,0 +1,97 @@
+import { environment } from 'src/environments/environment';
+
+export type FeatureFlagKey =
+  | 'purchaseEnabled'
+  | 'quotesEnabled'
+  | 'tenderingEnabled'
+  | 'dataSpaceEnabled'
+  | 'launchValidationEnabled'
+  | 'tenderDevButtonsOpenCloseEnabled'
+  | 'aiEnabled';
+
+export type RuntimeFeatureFlagKey = FeatureFlagKey | 'searchEnabled';
+
+export type FeaturesConfig = Partial<Record<RuntimeFeatureFlagKey, boolean>> & Record<string, boolean | undefined>;
+
+export interface FeatureFlagDefinition {
+  key: FeatureFlagKey;
+  label: string;
+  description: string;
+}
+
+export const FEATURE_FLAG_DEFINITIONS: FeatureFlagDefinition[] = [
+  {
+    key: 'quotesEnabled',
+    label: 'Quotes',
+    description: 'Enable quote request flows and quote pages.'
+  },
+  {
+    key: 'purchaseEnabled',
+    label: 'Purchases',
+    description: 'Enable shopping cart and checkout actions.'
+  },
+  {
+    key: 'aiEnabled',
+    label: 'AI search',
+    description: 'Enable AI-assisted catalog search.'
+  },
+  {
+    key: 'tenderingEnabled',
+    label: 'Tendering',
+    description: 'Enable tendering features.'
+  },
+  {
+    key: 'dataSpaceEnabled',
+    label: 'Data space',
+    description: 'Enable data space fields in organization and offer forms.'
+  },
+  {
+    key: 'launchValidationEnabled',
+    label: 'Launch validation',
+    description: 'Enable launch validation requests for offerings.'
+  },
+  {
+    key: 'tenderDevButtonsOpenCloseEnabled',
+    label: 'Tender dev actions',
+    description: 'Enable tender open and close development controls.'
+  }
+];
+
+function isRecord(value: any): value is Record<string, any> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function readBoolean(source: Record<string, any>, key: RuntimeFeatureFlagKey): boolean | undefined {
+  const value = source[key];
+  return typeof value === 'boolean' ? value : undefined;
+}
+
+export function readFeaturesConfig(config: any): FeaturesConfig {
+  const source = isRecord(config) ? config : {};
+
+  const result: FeaturesConfig = {};
+
+  result.searchEnabled = readBoolean(source, 'searchEnabled');
+  result.purchaseEnabled = readBoolean(source, 'purchaseEnabled');
+  result.quotesEnabled = readBoolean(source, 'quotesEnabled');
+  result.tenderingEnabled = readBoolean(source, 'tenderingEnabled');
+  result.dataSpaceEnabled = readBoolean(source, 'dataSpaceEnabled');
+  result.launchValidationEnabled = readBoolean(source, 'launchValidationEnabled');
+  result.tenderDevButtonsOpenCloseEnabled = readBoolean(source, 'tenderDevButtonsOpenCloseEnabled');
+  result.aiEnabled = readBoolean(source, 'aiEnabled');
+
+  return result;
+}
+
+export function applyRuntimeFeaturesConfig(config: any): void {
+  const features = readFeaturesConfig(config);
+
+  environment.SEARCH_ENABLED = features.searchEnabled ?? environment.SEARCH_ENABLED;
+  environment.PURCHASE_ENABLED = features.purchaseEnabled ?? true;
+  environment.QUOTES_ENABLED = features.quotesEnabled ?? false;
+  environment.TENDER_ENABLED = features.tenderingEnabled ?? false;
+  environment.DATA_SPACE_ENABLED = features.dataSpaceEnabled ?? false;
+  environment.LAUNCH_VALIDATION_ENABLED = features.launchValidationEnabled ?? false;
+  environment.TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED = features.tenderDevButtonsOpenCloseEnabled ?? false;
+  environment.AI_SEARCH_ENABLED = features.aiEnabled ?? false;
+}

src/app/pages/admin/admin.component.html

@@ -45,9 +45,15 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
         <li>
           <a (click)="goToEmail()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'ADMIN._email' | translate }}</a>
         </li>
+        <li>
+          <a (click)="goToAnalytics()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Analytics</a>
+        </li>
         <li>
           <a (click)="goToSearchFilters()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Search &amp; filters</a>
         </li>
+        <li>
+          <a (click)="goToFeatures()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Features</a>
+        </li>
       </ul>
     </div>
 
@@ -84,9 +90,15 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
                 <button (click)="goToEmail()" id="email-button" class="block w-full px-4 py-2 border-b border-gray-200 rounded-t-lg cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                   {{ 'ADMIN._email' | translate }}
                 </button>
-                <button (click)="goToSearchFilters()" id="search-filters-button" data-cy="adminSearchFiltersSection" class="block w-full px-4 py-2 rounded-b-lg cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+                <button (click)="goToAnalytics()" id="analytics-button" data-cy="adminAnalyticsSection" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+                  Analytics
+                </button>
+                <button (click)="goToSearchFilters()" id="search-filters-button" data-cy="adminSearchFiltersSection" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                   Search &amp; filters
                 </button>
+                <button (click)="goToFeatures()" id="features-button" data-cy="adminFeaturesSection" class="block w-full px-4 py-2 rounded-b-lg cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+                  Features
+                </button>
               </div>
             </div>
           </div>
@@ -110,9 +122,15 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
         @if(show_email){
           <email></email>
         }
+        @if(show_analytics){
+          <analytics-config></analytics-config>
+        }
         @if(show_search_filters){
           <search-filters-config></search-filters-config>
         }
+        @if(show_features){
+          <features-config></features-config>
+        }
         @if(show_default_catalog){
           <default-catalog></default-catalog>
         }