Merge pull request #37 from yzhao583/DBAAS-144-upgrade-dynamic-plugin…

…-sdk-to-newer-version

DBAAS-144: Upgrade dynamic-plugin-sdk to 0.0.2

README.md

@@ -32,36 +32,6 @@ For more details, see the plugin development section in
 [Console Dynamic Plugins README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk/README.md) for details
 on how to run Bridge using local plugins.
 
-## Using Console's API
-
-OpenShift Console exposes API via global window object in runtime. In order to use the API you need to configure [webpack externals](https://webpack.js.org/configuration/externals).
-
-1. in webpack.config.js add [externals configuration](https://github.com/rawagner/console-dynamic-foo/blob/wp_externals/webpack.config.ts#L40-L42)
-
-```
-externals: {
-  '@openshift-console/dynamic-plugin-sdk/api': 'api',
-}
-```
-
-2. Add path mapping to [tsconfig.json](https://github.com/rawagner/console-dynamic-foo/blob/wp_externals/tsconfig.json#L11-L14) - this step is needed because TS does not yet support node's package exports
-
-```
-"paths": {
-  "@openshift-console/dynamic-plugin-sdk/api": ["node_modules/@openshift-console/dynamic-plugin-sdk/lib/api/api"],
-}
-```
-
-After following the steps above you will be able to import API in your components/functions like
-
-```
-import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk/api';
-```
-
-See the usage in [Foo component](https://github.com/rawagner/console-dynamic-foo/blob/wp_externals/src/components/Foo.tsx)
-
-Every imported component/function from `@openshift-console/dynamic-plugin-sdk/api` will be replaced in runtime by an actual implementation.
-
 ## Deployment on cluster
 
 Console dynamic plugins are supposed to be deployed via [OLM operators](https://github.com/operator-framework).

package.json

@@ -38,7 +38,8 @@
     "style-loader": "^2.0.0"
   },
   "devDependencies": {
-    "@openshift-console/dynamic-plugin-sdk": "0.0.0-alpha18",
+    "@openshift-console/dynamic-plugin-sdk": "0.0.2",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "^0.0.2",
     "@types/react": "16.8.13",
     "@types/react-router-dom": "5.1.2",
     "babel-eslint": "^10.1.0",
@@ -67,7 +68,7 @@
   },
   "consolePlugin": {
     "name": "dbaas-dynamic-plugin",
-    "version": "0.0.0",
+    "version": "0.1.3",
     "displayName": "DBaaS Dynamic Plugin",
     "description": "Dynamic Plugin for Openshift Console to provide custom components for DBaaS",
     "exposedModules": {
@@ -80,4 +81,4 @@
       "@console/pluginAPI": "*"
     }
   }
-}
+}

src/catalog/providers/useDBaaSCatalog.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import { TextContent, Text, TextVariants } from '@patternfly/react-core'
 import { CatalogItem } from '@openshift-console/dynamic-plugin-sdk'
 import { ExtensionHook } from '../../types'
-import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk/api'
+import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk'
 import { CATALOG_TYPE, DBAAS_PROVIDER_KIND } from '../const'
 
 const useDBaaSCatalog: ExtensionHook<CatalogItem[]> = ({ namespace }): [CatalogItem[], boolean, any] => {
-  const { t } = useTranslation()
-
   const [dbaasProviders, loaded, errorMsg] = useK8sWatchResource({
     kind: DBAAS_PROVIDER_KIND,
     isList: false,
@@ -21,25 +18,25 @@ const useDBaaSCatalog: ExtensionHook<CatalogItem[]> = ({ namespace }): [CatalogI
 
     const providerCards: CatalogItem[] = (dbaasProviders as any).items?.map((provider) => {
       return {
-        name: t(provider.spec?.provider?.displayName),
+        name: provider.spec?.provider?.displayName,
         type: CATALOG_TYPE,
         uid: provider.metadata?.uid,
-        description: t(provider.spec?.provider?.displayDescription),
-        provider: t(provider.spec?.provider?.name),
+        description: provider.spec?.provider?.displayDescription,
+        provider: provider.spec?.provider?.name,
         tags: ['mongodb', 'crunchy'],
         icon: {
           url: `data:${provider.spec?.provider?.icon?.mediatype};base64,${provider.spec?.provider?.icon?.base64data}`,
         },
         cta: {
-          label: t('Connect'),
+          label: 'Connect',
           href: `/k8s/ns/${namespace}/${provider.metadata?.name}`,
         },
         details: {
           descriptions: [
             {
               value: (
                 <TextContent>
-                  <Text component={TextVariants.p}>{t(provider.spec?.provider?.displayDescription)}</Text>
+                  <Text component={TextVariants.p}>{provider.spec?.provider?.displayDescription}</Text>
                 </TextContent>
               ),
             },

src/components/instanceListPage.jsx

@@ -18,7 +18,6 @@ import {
 } from '@patternfly/react-core'
 import { InfoCircleIcon } from '@patternfly/react-icons'
 import './_dbaas-import-view.css'
-import { useTranslation } from 'react-i18next'
 import FormHeader from './form/formHeader'
 import FlexForm from './form/flexForm'
 import FormBody from './form/formBody'
@@ -171,7 +170,6 @@ function json(response) {
 }
 
 const InstanceListPage = () => {
-  const { t } = useTranslation()
   const [noInstances, setNoInstances] = React.useState(false)
   const [statusMsg, setStatusMsg] = React.useState('')
   const [fetchInstancesFailed, setFetchInstancesFailed] = React.useState(false)
@@ -189,7 +187,7 @@ const InstanceListPage = () => {
 
   const dbProviderTitle = (
     <div>
-      Connect {dbProviderName} <Label className="ocs-preview-badge extra-left-margin">{t('Alpha')}</Label>
+      Connect {dbProviderName} <Label className="ocs-preview-badge extra-left-margin">Alpha</Label>
     </div>
   )
   const filteredInstances = React.useMemo(
@@ -221,7 +219,7 @@ const InstanceListPage = () => {
     let newServiceBindingList = serviceBindingList
     let newConnectionAndServiceBindingList = []
 
-    if (newDbaasConnectionList.length > 0 && newServiceBindingList.length > 0) {
+    if (newDbaasConnectionList.length > 0) {
       newDbaasConnectionList.forEach((dbaasConnection) => {
         if (
           selectedInventory?.instances?.find((instance) => instance.instanceID === dbaasConnection.spec?.instanceID)

tsconfig.json

@@ -7,11 +7,7 @@
     "jsx": "react",
     "allowJs": true,
     "strict": false,
-    "noUnusedLocals": true,
-    "paths": {
-      "@openshift-console/dynamic-plugin-sdk/api": ["node_modules/@openshift-console/dynamic-plugin-sdk/lib/api/api"],
-      "@openshift-console/dynamic-plugin-sdk/webpack": ["node_modules/@openshift-console/dynamic-plugin-sdk/lib/webpack"],
-    },
+    "noUnusedLocals": true
   },
   "include": ["src"],
   }

webpack.config.ts

@@ -2,7 +2,7 @@
 
 import * as webpack from 'webpack';
 import * as path from 'path';
-import { ConsoleRemotePlugin } from '@openshift-console/dynamic-plugin-sdk/webpack';
+import { ConsoleRemotePlugin } from '@openshift-console/dynamic-plugin-sdk-webpack';
 
 const config: webpack.Configuration = {
   mode: 'development',
@@ -48,9 +48,6 @@ const config: webpack.Configuration = {
   optimization: {
     chunkIds: 'named',
     minimize: false,
-  },
-  externals: {
-    '@openshift-console/dynamic-plugin-sdk/api': 'api'
   }
 };