feat(orchestrator): add feature flag for developer mode and config to…

… enable/disable the integration with catalog (janus-idp#58)
jkilzi · Jan 16, 2024 · 05719a9 · 05719a9
1 parent f5ae4d3
commit 05719a9
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 41 deletions.
diff --git a/plugins/orchestrator-backend/src/dynamic/index.ts b/plugins/orchestrator-backend/src/dynamic/index.ts
@@ -21,6 +21,13 @@ export const dynamicPluginInstaller: BackendDynamicPluginInstaller = {
     },
   },
   async catalog(builder, env) {
+    const isIntegrationEnabled = !!env.config.getOptionalBoolean(
+      'orchestrator.catalog.isEnabled',
+    );
+    if (!isIntegrationEnabled) {
+      env.logger.info('The integration with the Catalog plugin is disabled.');
+      return;
+    }
     builder.addEntityProvider(
       await OrchestratorEntityProvider.fromConfig({ ...env }),
     );

diff --git a/plugins/orchestrator-backend/src/module/OrchestratorModuleEntityProvider.ts b/plugins/orchestrator-backend/src/module/OrchestratorModuleEntityProvider.ts
@@ -21,6 +21,13 @@ export const orchestratorModuleEntityProvider = createBackendModule({
         catalog: catalogProcessingExtensionPoint,
       },
       async init({ logger, config, discovery, scheduler, catalog }) {
+        const isIntegrationEnabled = !!config.getOptionalBoolean(
+          'orchestrator.catalog.isEnabled',
+        );
+        if (!isIntegrationEnabled) {
+          logger.info('The integration with the Catalog plugin is disabled.');
+          return;
+        }
         const winstonLogger = loggerToWinstonLogger(logger);
         const eventBroker = new DefaultEventBroker(winstonLogger);
         const provider = await OrchestratorEntityProvider.fromConfig({

diff --git a/plugins/orchestrator-common/config.d.ts b/plugins/orchestrator-common/config.d.ts
@@ -70,6 +70,11 @@ export interface Config {
      * Configuration for the integration with the Catalog plugin.
      */
     catalog?: {
+      /**
+       * Whether to enable the integration with the Catalog plugin.
+       * Default: false
+       */
+      isEnabled?: boolean;
       /**
        * Owner of workflows to present on the component catalog.
        * Default: infrastructure

diff --git a/plugins/orchestrator-common/src/constants.ts b/plugins/orchestrator-common/src/constants.ts
@@ -72,3 +72,5 @@ export const default_workflows_path = 'workflows';
 
 export const ASSESSMENT_WORKFLOW_TYPE = 'workflow-type/assessment';
 export const INFRASTRUCTURE_WORKFLOW_TYPE = 'workflow-type/infrastructure';
+
+export const FEATURE_FLAG_DEVELOPER_MODE = 'developer-mode';
diff --git a/plugins/orchestrator/package.json b/plugins/orchestrator/package.json
@@ -41,6 +41,7 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
+    "@backstage/core-app-api": "^1.11.0",
     "@backstage/core-components": "^0.13.6",
     "@backstage/core-plugin-api": "^1.7.0",
     "@backstage/errors": "^1.2.3",

diff --git a/plugins/orchestrator/src/components/Router.tsx b/plugins/orchestrator/src/components/Router.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+import { FeatureFlagged } from '@backstage/core-app-api';
+
+import { FEATURE_FLAG_DEVELOPER_MODE } from '@janus-idp/backstage-plugin-orchestrator-common';
+
 import {
   createWorkflowRouteRef,
   editWorkflowRouteRef,
@@ -40,14 +44,29 @@ export const Router = () => {
         path={workflowInstanceRouteRef.path}
         element={<WorkflowInstancesViewerPage />}
       />
-      <Route path={newWorkflowRef.path} element={<NewWorkflowViewerPage />} />
+      <Route
+        path={newWorkflowRef.path}
+        element={
+          <FeatureFlagged with={FEATURE_FLAG_DEVELOPER_MODE}>
+            <NewWorkflowViewerPage />
+          </FeatureFlagged>
+        }
+      />
       <Route
         path={createWorkflowRouteRef.path}
-        element={<CreateWorkflowPage />}
+        element={
+          <FeatureFlagged with={FEATURE_FLAG_DEVELOPER_MODE}>
+            <CreateWorkflowPage />
+          </FeatureFlagged>
+        }
       />
       <Route
         path={editWorkflowRouteRef.path}
-        element={<CreateWorkflowPage />}
+        element={
+          <FeatureFlagged with={FEATURE_FLAG_DEVELOPER_MODE}>
+            <CreateWorkflowPage />
+          </FeatureFlagged>
+        }
       />
       <Route
         path={executeWorkflowRouteRef.path}

diff --git a/...orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx b/...orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx
@@ -2,8 +2,10 @@ import React, { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAsync } from 'react-use';
 
+import { FeatureFlagged } from '@backstage/core-app-api';
 import { InfoCard } from '@backstage/core-components';
 import {
+  featureFlagsApiRef,
   useApi,
   useRouteRef,
   useRouteRefParams,
@@ -12,6 +14,8 @@ import {
 import { Button, Grid } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 
+import { FEATURE_FLAG_DEVELOPER_MODE } from '@janus-idp/backstage-plugin-orchestrator-common';
+
 import { orchestratorApiRef } from '../../api';
 import {
   editWorkflowRouteRef,
@@ -23,6 +27,7 @@ import { EditorViewKind, WorkflowEditor } from '../WorkflowEditor';
 import WorkflowDefinitionDetailsCard from './WorkflowDefinitionDetailsCard';
 
 export const WorkflowDefinitionViewerPage = () => {
+  const featureFlagsApi = useApi(featureFlagsApiRef);
   const { workflowId, format } = useRouteRefParams(workflowDefinitionsRouteRef);
   const orchestratorApi = useApi(orchestratorApiRef);
   const { value: workflowOverview } = useAsync(() =>
@@ -35,6 +40,9 @@ export const WorkflowDefinitionViewerPage = () => {
     () => (format === 'json' ? 'json' : 'yaml'),
     [format],
   );
+  const isDeveloperModeOn = featureFlagsApi.isActive(
+    FEATURE_FLAG_DEVELOPER_MODE,
+  );
 
   const handleExecute = () => {
     navigate(executeWorkflowLink({ workflowId }));
@@ -55,20 +63,26 @@ export const WorkflowDefinitionViewerPage = () => {
       <Grid container spacing={2} direction="column" wrap="nowrap">
         <Grid container item justifyContent="flex-end" spacing={1}>
           <Grid item>
-            {loading ? (
-              <Skeleton variant="text" width="5rem" />
-            ) : (
-              <Button variant="contained" color="primary" onClick={handleEdit}>
-                Edit
-              </Button>
-            )}
+            <FeatureFlagged with={FEATURE_FLAG_DEVELOPER_MODE}>
+              {loading ? (
+                <Skeleton variant="text" width="5rem" />
+              ) : (
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={handleEdit}
+                >
+                  Edit
+                </Button>
+              )}
+            </FeatureFlagged>
           </Grid>
           <Grid item>
             {loading ? (
               <Skeleton variant="text" width="5rem" />
             ) : (
               <Button
-                variant="outlined"
+                variant={isDeveloperModeOn ? 'outlined' : 'contained'}
                 color="primary"
                 onClick={handleExecute}
               >

diff --git a/plugins/orchestrator/src/components/next/WorkflowsTabContent.tsx b/plugins/orchestrator/src/components/next/WorkflowsTabContent.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAsync } from 'react-use';
 
+import { FeatureFlagged } from '@backstage/core-app-api';
 import {
   Content,
   Progress,
@@ -12,7 +13,10 @@ import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import Button from '@material-ui/core/Button/Button';
 import Grid from '@material-ui/core/Grid/Grid';
 
-import { WorkflowOverview } from '@janus-idp/backstage-plugin-orchestrator-common';
+import {
+  FEATURE_FLAG_DEVELOPER_MODE,
+  WorkflowOverview,
+} from '@janus-idp/backstage-plugin-orchestrator-common';
 
 import { orchestratorApiRef } from '../../api';
 import { newWorkflowRef } from '../../routes';
@@ -38,17 +42,19 @@ export const WorkflowsTabContent = () => {
       {error ? <ResponseErrorPanel error={error} /> : null}
       {isReady ? (
         <>
-          <Grid container direction="row-reverse">
-            <Grid item>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => navigate(newWorkflowLink())}
-              >
-                Create new
-              </Button>
+          <FeatureFlagged with={FEATURE_FLAG_DEVELOPER_MODE}>
+            <Grid container direction="row-reverse">
+              <Grid item>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={() => navigate(newWorkflowLink())}
+                >
+                  Create new
+                </Button>
+              </Grid>
             </Grid>
-          </Grid>
+          </FeatureFlagged>
           <Grid container direction="column">
             <Grid item>
               <WorkflowsTable items={value ?? []} />

diff --git a/plugins/orchestrator/src/components/next/WorkflowsTable.tsx b/plugins/orchestrator/src/components/next/WorkflowsTable.tsx
@@ -7,14 +7,21 @@ import {
   TableColumn,
   TableProps,
 } from '@backstage/core-components';
-import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import {
+  featureFlagsApiRef,
+  useApi,
+  useRouteRef,
+} from '@backstage/core-plugin-api';
 
 import DeleteForever from '@material-ui/icons/DeleteForever';
 import Edit from '@material-ui/icons/Edit';
 import Pageview from '@material-ui/icons/Pageview';
 import PlayArrow from '@material-ui/icons/PlayArrow';
 
-import { WorkflowOverview } from '@janus-idp/backstage-plugin-orchestrator-common';
+import {
+  FEATURE_FLAG_DEVELOPER_MODE,
+  WorkflowOverview,
+} from '@janus-idp/backstage-plugin-orchestrator-common';
 
 import { orchestratorApiRef } from '../../api';
 import WorkflowOverviewFormatter, {
@@ -33,11 +40,15 @@ export interface WorkflowsTableProps {
 
 export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
   const orchestratorApi = useApi(orchestratorApiRef);
+  const featureFlagsApi = useApi(featureFlagsApiRef);
   const navigate = useNavigate();
   const definitionLink = useRouteRef(workflowDefinitionsRouteRef);
   const executeWorkflowLink = useRouteRef(nextExecuteWorkflowRouteRef);
   const editLink = useRouteRef(editWorkflowRouteRef);
   const [data, setData] = useState<FormattedWorkflowOverview[]>([]);
+  const isDeveloperModeOn = featureFlagsApi.isActive(
+    FEATURE_FLAG_DEVELOPER_MODE,
+  );
 
   const initialState = useMemo(
     () => items.map(WorkflowOverviewFormatter.format),
@@ -88,8 +99,8 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
     [orchestratorApi],
   );
 
-  const actions: TableProps<FormattedWorkflowOverview>['actions'] = useMemo(
-    () => [
+  const actions = useMemo(() => {
+    const actionItems: TableProps<FormattedWorkflowOverview>['actions'] = [
       {
         icon: PlayArrow,
         tooltip: 'Execute',
@@ -102,21 +113,27 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
         onClick: (_, rowData) =>
           handleView(rowData as FormattedWorkflowOverview),
       },
-      {
-        icon: Edit,
-        tooltip: 'Edit',
-        onClick: (_, rowData) =>
-          handleEdit(rowData as FormattedWorkflowOverview),
-      },
-      {
-        icon: DeleteForever,
-        tooltip: 'Delete',
-        onClick: (_, rowData) =>
-          handleDelete(rowData as FormattedWorkflowOverview),
-      },
-    ],
-    [handleDelete, handleEdit, handleExecute, handleView],
-  );
+    ];
+
+    if (isDeveloperModeOn) {
+      actionItems.push(
+        {
+          icon: Edit,
+          tooltip: 'Edit',
+          onClick: (_, rowData) =>
+            handleEdit(rowData as FormattedWorkflowOverview),
+        },
+        {
+          icon: DeleteForever,
+          tooltip: 'Delete',
+          onClick: (_, rowData) =>
+            handleDelete(rowData as FormattedWorkflowOverview),
+        },
+      );
+    }
+
+    return actionItems;
+  }, [handleDelete, handleEdit, handleExecute, handleView, isDeveloperModeOn]);
 
   const columns = useMemo<TableColumn<FormattedWorkflowOverview>[]>(
     () => [

diff --git a/plugins/orchestrator/src/plugin.ts b/plugins/orchestrator/src/plugin.ts
@@ -5,6 +5,8 @@ import {
   discoveryApiRef,
 } from '@backstage/core-plugin-api';
 
+import { FEATURE_FLAG_DEVELOPER_MODE } from '@janus-idp/backstage-plugin-orchestrator-common';
+
 import { orchestratorApiRef, OrchestratorClient } from './api';
 import { orchestratorRootRouteRef } from './routes';
 
@@ -22,6 +24,7 @@ export const orchestratorPlugin = createPlugin({
   routes: {
     root: orchestratorRootRouteRef,
   },
+  featureFlags: [{ name: FEATURE_FLAG_DEVELOPER_MODE }],
 });
 
 export const OrchestratorPage = orchestratorPlugin.provide(
Original file line number	Diff line number	Diff line change
Expand Up		@@ -72,3 +72,5 @@ export const default_workflows_path = 'workflows';

		export const ASSESSMENT_WORKFLOW_TYPE = 'workflow-type/assessment';
		export const INFRASTRUCTURE_WORKFLOW_TYPE = 'workflow-type/infrastructure';

		export const FEATURE_FLAG_DEVELOPER_MODE = 'developer-mode';