Plugin and Collapsable visual updates

Author: obgibson

src/components/Collapsable/__tests__/Collapsable.test.cypress.tsx

@@ -22,7 +22,7 @@ describe('Collapsable test', () => {
     );
 
     // check that the component renders correctly in default closed state
-    cy.get('[data-testid="collapsable-header"]').find('.icon-arrowDown').invoke('attr', 'rotate').should('eq', '0');
+    cy.get('[data-testid="collapsable-header"]').find('.icon-arrowDown').invoke('attr', 'rotate').should('eq', '-90');
     cy.get('[data-testid="collapsable-content"]').not('visbile');
 
     // check that the component renders correctly when opened
@@ -32,15 +32,15 @@ describe('Collapsable test', () => {
         cy.get('[data-testid="collapsable-header"]')
           .find('.icon-arrowDown')
           .invoke('attr', 'rotate')
-          .should('eq', '180');
+          .should('eq', '0');
         cy.get('[data-testid="collapsable-content"]').should('be.visible');
       });
 
     // check that the component renders correctly when closed
     cy.get('[data-testid="collapsable-header"]')
       .click()
       .then(() => {
-        cy.get('[data-testid="collapsable-header"]').find('.icon-arrowDown').invoke('attr', 'rotate').should('eq', '0');
+        cy.get('[data-testid="collapsable-header"]').find('.icon-arrowDown').invoke('attr', 'rotate').should('eq', '-90');
         cy.get('[data-testid="collapsable-content"]').not('visible');
       });
   });

src/components/Collapsable/index.tsx

@@ -44,8 +44,8 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
           }}
           data-testid="collapsable-header"
         >
+          <Icon name="arrowDown" rotate={open ? 0 : -90} />
           <Title>{title}</Title>
-          <Icon name="arrowDown" rotate={open ? 180 : 0} />
         </CollapsableHeader>
 
         {(animated || open) && (
@@ -94,6 +94,7 @@ const Content = styled.div<{ open: boolean; visible: boolean }>`
 
 const Title = styled.div`
   margin-right: 1rem;
+  margin-left: 0.3rem;
 `;
 
 export default Collapsable;

src/components/Icon/index.tsx

@@ -126,13 +126,14 @@ interface IconProps {
   padRight?: boolean;
   spin?: boolean;
   title?: string;
+  visible?: boolean;
   onClick?: () => void;
 }
 
-const Icon: React.FC<IconProps> = ({ name, size = 'sm', rotate, ...rest }) => {
+const Icon: React.FC<IconProps> = ({ name, size = 'sm', visible = true, rotate, ...rest }) => {
   const IconComponent = icons[name];
   return (
-    <Wrapper className={`icon icon-${name}`} {...rest} {...{ size, rotate }}>
+    <Wrapper className={`icon icon-${name}`} {...rest} {...{ size, visible, rotate }}>
       <IconComponent />
     </Wrapper>
   );
@@ -148,9 +149,10 @@ const Wrapper = styled.i<{
   padLeft?: boolean;
   padRight?: boolean;
   title?: string;
+  visible?: boolean;
 }>`
   vertical-align: text-top;
-  display: inline-flex;
+  display: ${(p) => (p.visible ? 'inline-flex' : 'none')};
   align-items: center;
   margin: 0;
   padding: 0;

src/components/Plugins/PluginGroup.tsx

@@ -63,7 +63,10 @@ const PluginContainer: React.FC<{ plugin: Plugin; children: ReactNode }> = ({ pl
   const props = plugin.config.containerProps || {};
   if (isCollapsableContainer(plugin.config.container)) {
     return (
-      <Collapsable {...props} title={<PluginHeaderSection name={plugin.config.name} />}>
+      <Collapsable
+        {...props}
+        title={<PluginHeaderSection name={plugin.config.name} showIcon={props.showIcon === 'false' ? false : true} />}
+      >
         {children}
       </Collapsable>
     );
@@ -85,9 +88,9 @@ const PluginContainer: React.FC<{ plugin: Plugin; children: ReactNode }> = ({ pl
   return <>{children}</>;
 };
 
-const PluginHeaderSection: React.FC<{ name: string }> = ({ name }) => (
+const PluginHeaderSection: React.FC<{ name: string; showIcon?: boolean }> = ({ name, showIcon = true }) => (
   <PluginHeader>
-    <Icon name="plugin" />
+    <Icon name="plugin" visible={showIcon} />
     {name}
   </PluginHeader>
 );