Merge pull request #7420 from rohitkrai03/gitops-plugin

Move gitops code out into its own monorepo package

frontend/packages/console-app/package.json

@@ -11,6 +11,7 @@
     "@console/ceph-storage-plugin": "0.0.0-fixed",
     "@console/container-security": "0.0.0-fixed",
     "@console/dev-console": "0.0.0-fixed",
+    "@console/gitops-plugin": "0.0.0-fixed",
     "@console/helm-plugin": "0.0.0-fixed",
     "@console/internal": "0.0.0-fixed",
     "@console/insights-plugin": "0.0.0-fixed",

frontend/packages/dev-console/locales/en/devconsole.json

@@ -58,25 +58,6 @@
   "Cancel": "Cancel",
   "Edit": "Edit",
   "Select a way to create an Application, component or service from one of the options.": "Select a way to create an Application, component or service from one of the options.",
-  "{{id}} by {{author}}": "{{id}} by {{author}}",
-  "Commit details not available": "Commit details not available",
-  "Cluster URL not available": "Cluster URL not available",
-  "Environments": "Environments",
-  "Application environments": "Application environments",
-  "Manifest file repo": "Manifest file repo",
-  "Image not available": "Image not available",
-  "Service source URL not available": "Service source URL not available",
-  "Pod info not available": "Pod info not available",
-  "Info not available": "Info not available",
-  "Environment details were not found. Try reloading the page or contacting an administrator.": "Environment details were not found. Try reloading the page or contacting an administrator.",
-  "{{appName}} · Details": "{{appName}} · Details",
-  "Argo CD": "Argo CD",
-  "{{count, number}} item": "{{count, number}} item",
-  "{{count, number}} item_plural": "{{count, number}} items",
-  "{{count, number}} Environment": "{{count, number}} Environment",
-  "{{count, number}} Environment_plural": "{{count, number}} Environments",
-  "No GitOps manifest URLs found": "No GitOps manifest URLs found",
-  "No Application groups found": "No Application groups found",
   "Get started with a tour of some of the key areas in OpenShift {{version}} Developer perspective that can help you complete workflows and be more productive.": "Get started with a tour of some of the key areas in OpenShift {{version}} Developer perspective that can help you complete workflows and be more productive.",
   "Switch between the Developer and Administrator perspectives.": "Switch between the Developer and Administrator perspectives.",
   "Use the Administrator perspective to manage workload storage, networking, cluster settings, and more. This may require additional user access.": "Use the Administrator perspective to manage workload storage, networking, cluster settings, and more. This may require additional user access.",

frontend/packages/dev-console/src/const.ts

@@ -1,5 +1,3 @@
-export const FLAG_OPENSHIFT_GITOPS = 'OPENSHIFT_GITOPS';
-
 /** URL query params that adjust scope / purpose of the page */
 export enum QUERY_PROPERTIES {
   /** For defining a contextual application group (ie, add new workload into this application group) */

frontend/packages/dev-console/src/models/index.ts

@@ -1 +0,0 @@
-export * from './gitops';

frontend/packages/dev-console/src/plugin.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 import {
   BoltIcon,
   CatalogIcon,
@@ -9,7 +8,6 @@ import {
 } from '@patternfly/react-icons';
 import {
   Plugin,
-  ModelDefinition,
   ModelFeatureFlag,
   KebabActions,
   NavSection,
@@ -41,9 +39,8 @@ import {
   DeploymentModel,
 } from '@console/internal/models';
 import { doConnectsToBinding } from '@console/topology/src/utils/connector-utils';
-import * as models from './models';
 import { getKebabActionsForKind } from './utils/kebab-actions';
-import { FLAG_OPENSHIFT_GITOPS, INCONTEXT_ACTIONS_CONNECTS_TO } from './const';
+import { INCONTEXT_ACTIONS_CONNECTS_TO } from './const';
 import { AddAction } from './extensions/add-actions';
 import * as yamlIcon from './images/yaml.svg';
 import * as importGitIcon from './images/from-git.svg';
@@ -54,7 +51,6 @@ import { getGuidedTour } from './components/guided-tour';
 import { CatalogConsumedExtensions, catalogPlugin } from './components/catalog/catalog-plugin';
 
 type ConsumedExtensions =
-  | ModelDefinition
   | ModelFeatureFlag
   | NavSection
   | CustomFeatureFlag
@@ -75,19 +71,6 @@ type ConsumedExtensions =
   | CatalogConsumedExtensions;
 
 const plugin: Plugin<ConsumedExtensions> = [
-  {
-    type: 'ModelDefinition',
-    properties: {
-      models: _.values(models),
-    },
-  },
-  {
-    type: 'FeatureFlag/Model',
-    properties: {
-      model: models.GitOpsServiceModel,
-      flag: FLAG_OPENSHIFT_GITOPS,
-    },
-  },
   {
     type: 'Nav/Section',
     properties: {
@@ -183,23 +166,6 @@ const plugin: Plugin<ConsumedExtensions> = [
       required: [FLAGS.OPENSHIFT],
     },
   },
-  {
-    type: 'NavItem/Href',
-    properties: {
-      id: 'environments',
-      perspective: 'dev',
-      section: 'resources',
-      componentProps: {
-        // t('devconsole~Environments')
-        name: '%devconsole~Environments%',
-        href: '/environments',
-        testID: 'environments-header',
-      },
-    },
-    flags: {
-      required: [FLAG_OPENSHIFT_GITOPS],
-    },
-  },
   {
     type: 'NavItem/Href',
     properties: {
@@ -304,32 +270,6 @@ const plugin: Plugin<ConsumedExtensions> = [
         ).default,
     },
   },
-  {
-    type: 'Page/Route',
-    properties: {
-      exact: true,
-      path: '/environments',
-      loader: async () =>
-        (
-          await import(
-            './components/gitops/GitOpsListPage' /* webpackChunkName: "dev-console-gitops" */
-          )
-        ).default,
-    },
-  },
-  {
-    type: 'Page/Route',
-    properties: {
-      exact: true,
-      path: '/environments/:appName',
-      loader: async () =>
-        (
-          await import(
-            './components/gitops/GitOpsDetailsPage' /* webpackChunkName: "dev-console-gitops" */
-          )
-        ).default,
-    },
-  },
   {
     type: 'Page/Route',
     properties: {

frontend/packages/gitops-plugin/OWNERS

@@ -0,0 +1,21 @@
+reviewers:
+  - andrewballantyne
+  - abhinandan13jan
+  - debsmita1
+  - divyanshiGupta
+  - christianvogt
+  - invincibleJai
+  - jerolimov
+  - karthikjeeyar
+  - nemesis09
+  - rohitkrai03
+  - rottencandy
+  - sahil143
+  - vikram-raj
+approvers:
+  - andrewballantyne
+  - christianvogt
+  - invincibleJai
+  - rohitkrai03
+labels:
+  - component/gitops-plugin

frontend/packages/gitops-plugin/console-extensions.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "../console-dynamic-plugin-sdk/dist/schema/console-extensions.json",
+  "data": []
+}

frontend/packages/gitops-plugin/locales/en/gitops-plugin.json

@@ -0,0 +1,21 @@
+{
+  "{{id}} by {{author}}": "{{id}} by {{author}}",
+  "Commit details not available": "Commit details not available",
+  "Cluster URL not available": "Cluster URL not available",
+  "Environments": "Environments",
+  "Application environments": "Application environments",
+  "Manifest file repo": "Manifest file repo",
+  "Image not available": "Image not available",
+  "Service source URL not available": "Service source URL not available",
+  "Pod info not available": "Pod info not available",
+  "Info not available": "Info not available",
+  "Environment details were not found. Try reloading the page or contacting an administrator.": "Environment details were not found. Try reloading the page or contacting an administrator.",
+  "{{appName}} · Details": "{{appName}} · Details",
+  "Argo CD": "Argo CD",
+  "{{count, number}} item": "{{count, number}} item",
+  "{{count, number}} item_plural": "{{count, number}} items",
+  "{{count, number}} Environment": "{{count, number}} Environment",
+  "{{count, number}} Environment_plural": "{{count, number}} Environments",
+  "No GitOps manifest URLs found": "No GitOps manifest URLs found",
+  "No Application groups found": "No Application groups found"
+}

frontend/packages/gitops-plugin/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@console/gitops-plugin",
+  "version": "0.0.0-fixed",
+  "description": "Gitops plugin contributes gitops environments UI to Developer Console.",
+  "private": true,
+  "scripts": {
+    "coverage": "yarn test --coverage --collectCoverageFrom='[\"packages/gitops-plugin/src/**\",\"!**/__tests__/**\",\"!packages/gitops-plugin/src/test/**\"]'",
+    "lint": "yarn --cwd ../.. eslint packages/gitops-plugin",
+    "test": "yarn --cwd ../.. test packages/gitops-plugin"
+  },
+  "consolePlugin": {
+    "entry": "src/plugin.ts"
+  }
+}

frontend/packages/dev-console/src/components/gitops/GitOpsDetailsPage.tsx → frontend/packages/gitops-plugin/src/components/GitOpsDetailsPage.tsx

@@ -45,7 +45,7 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
       const app = _.find(appGroups, (appObj) => appName === appObj?.name);
       if (!app?.environments) {
         emptyMsg = t(
-          'devconsole~Environment details were not found. Try reloading the page or contacting an administrator.',
+          'gitops-plugin~Environment details were not found. Try reloading the page or contacting an administrator.',
         );
       }
       setEmptyStateMsg(emptyMsg);
@@ -78,7 +78,7 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
   return (
     <>
       <Helmet>
-        <title>{t('devconsole~{{appName}} · Details', { appName })}</title>
+        <title>{t('gitops-plugin~{{appName}} · Details', { appName })}</title>
       </Helmet>
       <GitOpsDetailsPageHeading
         url={match.url}

frontend/packages/dev-console/src/components/gitops/GitOpsEmptyState.tsx → frontend/packages/gitops-plugin/src/components/GitOpsEmptyState.tsx

@@ -5,7 +5,7 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
 } from '@patternfly/react-core';
-import * as gitopsIcon from '../../images/gitops.svg';
+import * as gitopsIcon from '../images/gitops.svg';
 import './GitOpsEmptyState.scss';
 
 interface GitOpsEmptyStateProps {

frontend/packages/dev-console/src/components/gitops/GitOpsListPage.tsx → frontend/packages/gitops-plugin/src/components/GitOpsListPage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { PageHeading, LoadingBox, ExternalLink } from '@console/internal/components/utils';
@@ -10,7 +11,6 @@ import GitOpsList from './list/GitOpsList';
 import { fetchAllAppGroups, getManifestURLs, getPipelinesBaseURI } from './utils/gitops-utils';
 import useDefaultSecret from './utils/useDefaultSecret';
 import { Split, SplitItem } from '@patternfly/react-core';
-import * as _ from 'lodash';
 import './GitOpsListPage.scss';
 
 const projectRes = { isList: true, kind: ProjectModel.kind, optional: true };
@@ -57,15 +57,15 @@ const GitOpsListPage: React.FC = () => {
   return (
     <>
       <Helmet>
-        <title>{t('devconsole~Environments')}</title>
+        <title>{t('gitops-plugin~Environments')}</title>
       </Helmet>
       <PageHeading
-        title={t('devconsole~Environments')}
+        title={t('gitops-plugin~Environments')}
         badge={
           <Split className="odc-gitops-list-page-heading" hasGutter>
             <SplitItem>
               {argocdLink && (
-                <ExternalLink href={argocdLink.spec.href} text={t('devconsole~Argo CD')} />
+                <ExternalLink href={argocdLink.spec.href} text={t('gitops-plugin~Argo CD')} />
               )}
             </SplitItem>
             <SplitItem>

frontend/packages/dev-console/src/components/gitops/details/CommitDetails.tsx → frontend/packages/gitops-plugin/src/components/details/CommitDetails.tsx

@@ -81,10 +81,13 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
       {commitData.id ? (
         <>
           <Timestamp timestamp={commitData.timestamp} />
-          {t('devconsole~{{id}} by {{author}}', { id: commitData.id, author: commitData.author })}
+          {t('gitops-plugin~{{id}} by {{author}}', {
+            id: commitData.id,
+            author: commitData.author,
+          })}
         </>
       ) : (
-        <span>{t('devconsole~Commit details not available')}</span>
+        <span>{t('gitops-plugin~Commit details not available')}</span>
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.tsx → frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx

@@ -73,7 +73,7 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
                           />
                         ) : (
                           <div className="odc-gitops-details__env-section__url-empty-state">
-                            {t('devconsole~Cluster URL not available')}
+                            {t('gitops-plugin~Cluster URL not available')}
                           </div>
                         )}
                       </StackItem>

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsController.tsx → frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsController.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
 import * as _ from 'lodash';
 import GitOpsDetails from './GitOpsDetails';
-import { routeDecoratorIcon } from '../../import/render-utils';
+import { routeDecoratorIcon } from '@console/dev-console/src/components/import/render-utils';
 import PodRingWrapper from './PodRingWrapper';
 import TimestampWrapper from './TimestampWrapper';
 import { WORKLOAD_KINDS, GitOpsResource, GitOpsEnvironment } from '../utils/gitops-types';

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsPageHeading.tsx → frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { BreadCrumbs, ResourceIcon } from '@console/internal/components/utils';
 import { Split, SplitItem, Label } from '@patternfly/react-core';
-import { routeDecoratorIcon } from '../../import/render-utils';
+import { routeDecoratorIcon } from '@console/dev-console/src/components/import/render-utils';
 import './GitOpsDetailsPageHeading.scss';
 
 interface GitOpsDetailsPageHeadingProps {
@@ -21,11 +21,11 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
   const { t } = useTranslation();
   const breadcrumbs = [
     {
-      name: t('devconsole~Environments'),
+      name: t('gitops-plugin~Environments'),
       path: '/environments',
     },
     {
-      name: t('devconsole~Application environments'),
+      name: t('gitops-plugin~Application environments'),
       path: `${url}`,
     },
   ];
@@ -41,7 +41,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
         {badge && <span className="co-m-pane__heading-badge">{badge}</span>}
       </h1>
       <Split className="odc-gitops-details-page-heading__repo" hasGutter>
-        <SplitItem>{t('devconsole~Manifest file repo')}:</SplitItem>
+        <SplitItem>{t('gitops-plugin~Manifest file repo')}:</SplitItem>
         <SplitItem isFilled>
           <Label
             style={{ fontSize: '12px' }}

frontend/packages/dev-console/src/components/gitops/details/GitOpsServiceDetailsSection.tsx → frontend/packages/gitops-plugin/src/components/details/GitOpsServiceDetailsSection.tsx

@@ -37,7 +37,7 @@ const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> =
                 </CardTitle>
                 <CardBody>
                   <Label className="co-nowrap" style={{ fontSize: '12px' }} color="cyan">
-                    {service.image || <div>{t('devconsole~Image not available')}</div>}
+                    {service.image || <div>{t('gitops-plugin~Image not available')}</div>}
                   </Label>
                   <Split className="odc-gitops-service__details">
                     <SplitItem>
@@ -60,7 +60,7 @@ const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> =
                     />
                   ) : (
                     <div className="odc-gitops-service__details">
-                      {t('devconsole~Service source URL not available')}
+                      {t('gitops-plugin~Service source URL not available')}
                     </div>
                   )}
                 </CardBody>

frontend/packages/dev-console/src/components/gitops/details/PodRingWrapper.tsx → frontend/packages/gitops-plugin/src/components/details/PodRingWrapper.tsx

@@ -53,7 +53,7 @@ const PodRingWrapper: React.FC<PodRingWrapperProps> = ({ workload }) => {
           enableScaling={false}
         />
       ) : (
-        <div style={{ border: '1px solid' }}>{t('devconsole~Pod info not available')}</div>
+        <div style={{ border: '1px solid' }}>{t('gitops-plugin~Pod info not available')}</div>
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/details/TimestampWrapper.tsx → frontend/packages/gitops-plugin/src/components/details/TimestampWrapper.tsx

@@ -57,7 +57,7 @@ const TimestampWrapper: React.FC<TimestampWrapperProps> = ({ resModels }) => {
       {lastUpdatedTimestamp ? (
         <Timestamp timestamp={lastUpdatedTimestamp} />
       ) : (
-        <div>{t('devconsole~Info not available')}</div>
+        <div>{t('gitops-plugin~Info not available')}</div>
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/list/GitOpsList.tsx → frontend/packages/gitops-plugin/src/components/list/GitOpsList.tsx

@@ -22,7 +22,7 @@ const GitOpsList: React.FC<GitOpsListProps> = ({ appGroups, emptyStateMsg }) =>
             <Split>
               <SplitItem isFilled />
               <SplitItem>
-                {t('devconsole~{{count, number}} item', {
+                {t('gitops-plugin~{{count, number}} item', {
                   count: _.size(appGroups),
                 })}
               </SplitItem>

frontend/packages/dev-console/src/components/gitops/list/GitOpsListItem.tsx → frontend/packages/gitops-plugin/src/components/list/GitOpsListItem.tsx

@@ -24,7 +24,7 @@ const GitOpsListItem: React.FC<GitOpsListItemProps> = ({ appGroup }) => {
             <ResourceLink kind="application" name={appGroup.name} linkTo={false} />
           </GridItem>
           <GridItem lg={6} md={6} sm={6}>
-            {t('devconsole~{{count, number}} Environment', {
+            {t('gitops-plugin~{{count, number}} Environment', {
               count: _.size(appGroup.environments),
             })}
           </GridItem>