feat: Modify plugin preview page (#2359)

apache · Apr 17, 2022 · 0e6411f · 0e6411f
1 parent 8bdf8b6
commit 0e6411f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js
@@ -29,8 +29,9 @@ context('Create Configure and Delete PluginTemplate', () => {
     notification: '.ant-notification-notice-message',
     refresh: '.anticon-reload',
     descriptionSelector: '[title=Description]',
+    pluginTitle: '.ant-divider-inner-text',
+    pluginBtn: '.ant-btn-primary',
   };
-
   const data = {
     pluginTemplateName: 'test_plugin_template1',
     pluginTemplateName2: 'test_plugin_template2',
@@ -74,6 +75,14 @@ context('Create Configure and Delete PluginTemplate', () => {
 
     cy.contains('Submit').click();
     cy.contains('Next').click();
+    cy.contains(selector.pluginCard, 'basic-auth').should('be.visible');
+    cy.contains(selector.pluginTitle, 'Authentication').should('be.visible');
+    cy.contains(selector.pluginTitle, 'Security').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Traffic Control').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Serverless').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Observability').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Other').should('not.exist');
+    cy.contains(selector.pluginBtn, 'Enable').should('not.exist');
     cy.contains('Submit').click();
     cy.get(selector.notification).should('contain', data.createPluginTemplateSuccess);
   });
@@ -88,6 +97,14 @@ context('Create Configure and Delete PluginTemplate', () => {
     cy.get(selector.description).clear().type(data.pluginTemplateName2);
     cy.contains('Next').click();
     cy.contains('Next').click();
+    cy.contains(selector.pluginCard, 'basic-auth').should('be.visible');
+    cy.contains(selector.pluginTitle, 'Authentication').should('be.visible');
+    cy.contains(selector.pluginTitle, 'Security').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Traffic Control').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Serverless').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Observability').should('not.exist');
+    cy.contains(selector.pluginTitle, 'Other').should('not.exist');
+    cy.contains(selector.pluginBtn, 'Enable').should('not.exist');
     cy.contains('Submit').click();
 
     cy.get(selector.notification).should('contain', data.editPluginTemplateSuccess);

diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
@@ -92,6 +92,13 @@ const PluginPage: React.FC<Props> = ({
       form.setFieldsValue({ plugin_config_id });
     });
   }, []);
+  const openPluginList = pluginList.filter(
+    (item) => initialData[item.name] && !initialData[item.name].disable,
+  );
+  const openPluginType = openPluginList.map((item) => item.type);
+  const newOpenPluginType = openPluginType.filter((elem, index, self) => {
+    return index === self.indexOf(elem);
+  });
 
   const PluginList = () => (
     <>
@@ -179,7 +186,7 @@ const PluginPage: React.FC<Props> = ({
             />
           </>
         )}
-        {typeList.map((typeItem) => {
+        {(readonly ? newOpenPluginType : typeList).map((typeItem) => {
           return (
             <PanelSection
               title={formatMessage({ id: `component.plugin.${typeItem}` })}
@@ -188,7 +195,11 @@ const PluginPage: React.FC<Props> = ({
               id={`plugin-category-${typeItem}`}
             >
               {orderBy(
-                pluginList.filter((item) => item.type === typeItem.toLowerCase() && !item.hidden),
+                pluginList.filter(
+                  readonly
+                    ? (item) => item.type === typeItem && !item.hidden && initialData[item.name]
+                    : (item) => item.type === typeItem && !item.hidden,
+                ),
                 'name',
                 'asc',
               ).map((item) => (