@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/MarketplacePage/PluginCard/Wrapper.js

@@ -0,0 +1,148 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .wrapper {
+    position: relative;
+    min-height: 216px;
+    margin-bottom: 3.6rem;
+    padding: 1.2rem 1.5rem;
+    padding-bottom: 0;
+    background-color: #fff;
+    box-shadow: 0 2px 4px #e3e9f3;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardTitle {
+    display: flex;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    > div:first-child {
+      margin-right: 14px;
+    }
+
+    > div:last-child {
+      height: 36px;
+      line-height: 36px;
+    }
+
+    i,
+    svg {
+      margin-left: 7px;
+      color: #b3b5b9;
+      font-size: 1rem;
+      vertical-align: baseline;
+      cursor: pointer;
+    }
+  }
+
+  .cardDescription {
+    height: 54px;
+    margin-top: 27px;
+    margin-bottom: 9px;
+    font-size: 13px;
+    font-weight: 400;
+
+    > span:last-child {
+      color: #1c5de7;
+    }
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardFooter {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 45px;
+    padding: 0.9rem 1.5rem 1rem;
+    background-color: #fafafb;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    cursor: initial;
+  }
+
+  .compatible {
+    margin-top: 3px;
+    color: #5a9e06;
+    font-size: 1.3rem;
+    font-style: italic;
+
+    > i,
+    > svg {
+      margin-right: 7px;
+      font-size: 12px;
+    }
+  }
+
+  .settings {
+    margin-top: 3px;
+    color: #323740;
+    font-size: 1.3rem;
+    font-weight: 500;
+    cursor: pointer;
+
+    > i,
+    > svg {
+      margin-right: 7px;
+      font-size: 11px;
+      vertical-align: inherit;
+    }
+  }
+
+  .button {
+    height: 26px;
+    min-width: 89px !important;
+    padding: 0 15px;
+    margin: 0;
+    border-radius: 2px !important;
+    line-height: 23px;
+    font-size: 13px;
+    cursor: pointer;
+    span {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .frame {
+    width: 70px;
+    height: 36px;
+    margin: auto 0;
+    text-align: center;
+    border: 1px solid #f3f3f7;
+    border-radius: 3px;
+    white-space: nowrap;
+    > img {
+      max-height: 36px;
+      vertical-align: middle;
+    }
+  }
+
+  .helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+  .primary {
+    background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
+    color: white;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+
+    &:active {
+      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .secondary {
+    border: 1px solid #dfe0e1;
+    font-weight: 600;
+  }
+`;
+
+export default Wrapper;

package/admin/src/containers/MarketplacePage/PluginCard/index.js

@@ -0,0 +1,184 @@
+/**
+ *
+ * PluginCard
+ *
+ */
+/* eslint-disable */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Button, PopUpWarning, CheckPermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import Wrapper from './Wrapper';
+
+/* eslint-disable react/no-unused-state */
+class PluginCard extends React.Component {
+  state = {
+    boostrapCol: 'col-lg-4',
+    showModalAutoReload: false,
+    showModalEnv: false,
+  };
+
+  componentDidMount() {
+    // Listen window resize.
+    window.addEventListener('resize', this.setBoostrapCol);
+    this.setBoostrapCol();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setBoostrapCol);
+  }
+
+  setBoostrapCol = () => {
+    let boostrapCol = 'col-lg-4';
+
+    if (window.innerWidth > 1680) {
+      boostrapCol = 'col-lg-3';
+    }
+
+    if (window.innerWidth > 2300) {
+      boostrapCol = 'col-lg-2';
+    }
+
+    this.setState({ boostrapCol });
+  };
+
+  handleDownloadPlugin = e => {
+    const {
+      autoReload,
+      currentEnvironment,
+      downloadPlugin,
+      history: { push },
+      isAlreadyInstalled,
+      plugin: { id },
+    } = this.props;
+
+    if (!autoReload) {
+      this.setState({ showModalAutoReload: true });
+    } else if (currentEnvironment !== 'development') {
+      this.setState({ showModalEnv: true });
+    } else if (!isAlreadyInstalled) {
+      downloadPlugin(id);
+    } else {
+      push('/list-plugins');
+    }
+  };
+
+  render() {
+    const buttonClass = !this.props.isAlreadyInstalled ? 'primary' : 'secondary';
+    const buttonLabel = this.props.isAlreadyInstalled
+      ? 'app.components.PluginCard.Button.label.install'
+      : 'app.components.PluginCard.Button.label.download';
+
+    const settingsComponent = null;
+
+    const descriptions = {
+      short:
+        this.props.plugin.id === 'support-us' ? (
+          <FormattedMessage id={this.props.plugin.description.short} />
+        ) : (
+          this.props.plugin.description.short
+        ),
+      long:
+        this.props.plugin.id === 'support-us' ? (
+          <FormattedMessage
+            id={this.props.plugin.description.long || this.props.plugin.description.short}
+          />
+        ) : (
+          this.props.plugin.description.long || this.props.plugin.description.short
+        ),
+    };
+
+    return (
+      <Wrapper className={this.state.boostrapCol}>
+        <div className="wrapper">
+          <div className="cardTitle">
+            <div className="frame">
+              <span className="helper" />
+              <img src={this.props.plugin.logo} alt="icon" />
+            </div>
+            <div
+              onClick={e => {
+                window.open(
+                  `https://github.com/strapi/strapi/tree/master/packages/strapi-plugin-${this.props.plugin.id}`,
+                  '_blank'
+                );
+              }}
+            >
+              {this.props.plugin.name} <i className="fa fa-external-link-alt" />
+            </div>
+          </div>
+          <div className="cardDescription">{descriptions.long}</div>
+          <div className="cardFooter" onClick={e => e.stopPropagation()}>
+            <div className="cardFooterButton">
+              <CheckPermissions permissions={adminPermissions.marketplace.install}>
+                <Button
+                  className={`${buttonClass} button`}
+                  label={buttonLabel}
+                  type="button"
+                  onClick={this.handleDownloadPlugin}
+                />
+              </CheckPermissions>
+            </div>
+            {this.props.isAlreadyInstalled ? (
+              settingsComponent
+            ) : (
+              <div className="compatible">
+                <i className={`fa fa-${this.props.plugin.isCompatible ? 'check' : 'times'}`} />
+                <FormattedMessage
+                  id={`app.components.PluginCard.compatible${
+                    this.props.plugin.id === 'support-us' ? 'Community' : ''
+                  }`}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <PopUpWarning
+          content={{
+            message: 'app.components.PluginCard.PopUpWarning.install.impossible.autoReload.needed',
+            title: 'app.components.PluginCard.PopUpWarning.install.impossible.title',
+            confirm: 'app.components.PluginCard.PopUpWarning.install.impossible.confirm',
+          }}
+          isOpen={this.state.showModalAutoReload}
+          onlyConfirmButton
+          onConfirm={() => this.setState({ showModalAutoReload: false })}
+          popUpWarningType="warning"
+        />
+        <PopUpWarning
+          content={{
+            message: 'app.components.PluginCard.PopUpWarning.install.impossible.environment',
+            title: 'app.components.PluginCard.PopUpWarning.install.impossible.title',
+            confirm: 'app.components.PluginCard.PopUpWarning.install.impossible.confirm',
+          }}
+          isOpen={this.state.showModalEnv}
+          onlyConfirmButton
+          onConfirm={() => this.setState({ showModalEnv: false })}
+          popUpWarningType="warning"
+        />
+      </Wrapper>
+    );
+  }
+}
+
+PluginCard.defaultProps = {
+  isAlreadyInstalled: false,
+  plugin: {
+    description: '',
+    id: '',
+    name: '',
+    price: 0,
+    ratings: 5,
+  },
+};
+
+PluginCard.propTypes = {
+  currentEnvironment: PropTypes.string.isRequired,
+  downloadPlugin: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
+  isAlreadyInstalled: PropTypes.bool,
+  plugin: PropTypes.object,
+};
+
+export default PluginCard;

package/admin/src/containers/MarketplacePage/Wrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import ContainerFluid from '../../components/ContainerFluid';
+
+const Wrapper = styled(ContainerFluid)`
+  > div:first-child {
+    margin-bottom: 11px;
+  }
+`;
+
+export default Wrapper;

package/admin/src/containers/MarketplacePage/index.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef } from 'react';
+import { LoadingIndicatorPage, useGlobalContext, request } from 'strapi-helper-plugin';
+import { Header } from '@buffetjs/custom';
+import { useHistory } from 'react-router-dom';
+
+import { useFetchPluginsFromMarketPlace } from '../../hooks';
+import PageTitle from '../../components/PageTitle';
+import PluginCard from './PluginCard';
+import Wrapper from './Wrapper';
+import MarketplaceBanner from './MarketplaceBanner';
+
+const MarketPlacePage = () => {
+  const history = useHistory();
+  const { autoReload, emitEvent, currentEnvironment, formatMessage, plugins } = useGlobalContext();
+  const { error, isLoading, data } = useFetchPluginsFromMarketPlace();
+  const emitEventRef = useRef(emitEvent);
+
+  useEffect(() => {
+    emitEventRef.current('didGoToMarketplace');
+  }, []);
+
+  if (isLoading || error) {
+    return <LoadingIndicatorPage />;
+  }
+
+  const handleDownloadPlugin = async pluginId => {
+    emitEvent('willInstallPlugin', { plugin: pluginId });
+
+    // Force the Overlayblocker to be displayed
+    const overlayblockerParams = {
+      enabled: true,
+      title: 'app.components.InstallPluginPage.Download.title',
+      description: 'app.components.InstallPluginPage.Download.description',
+    };
+
+    // Lock the app
+    strapi.lockApp(overlayblockerParams);
+
+    try {
+      const opts = {
+        method: 'POST',
+        body: {
+          plugin: pluginId,
+          port: window.location.port,
+        },
+      };
+      const response = await request('/admin/plugins/install', opts, overlayblockerParams);
+
+      if (response.ok) {
+        emitEvent('didInstallPlugin', { plugin: pluginId });
+        // Reload the app
+        window.location.reload();
+      }
+    } catch (err) {
+      strapi.unlockApp();
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  return (
+    <div>
+      <PageTitle
+        title={formatMessage({
+          id: 'app.components.InstallPluginPage.helmet',
+        })}
+      />
+      <Wrapper>
+        <Header
+          title={{
+            label: formatMessage({
+              id: 'app.components.InstallPluginPage.title',
+            }),
+          }}
+          content={formatMessage({
+            id: 'app.components.InstallPluginPage.description',
+          })}
+        />
+        <MarketplaceBanner />
+        <div className="row" style={{ paddingTop: '4.1rem' }}>
+          {data.map(plugin => {
+            return (
+              <PluginCard
+                autoReload={autoReload}
+                currentEnvironment={currentEnvironment}
+                downloadPlugin={handleDownloadPlugin}
+                key={plugin.id}
+                history={history}
+                plugin={plugin}
+                showSupportUsButton={false}
+                isAlreadyInstalled={plugins[plugin.id] !== undefined}
+              />
+            );
+          })}
+        </div>
+      </Wrapper>
+    </div>
+  );
+};
+
+export default MarketPlacePage;

package/admin/src/containers/NewNotification/Notification/index.js

@@ -0,0 +1,181 @@
+import React, { useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Padded, Text, Flex } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Remove } from '@buffetjs/icons';
+
+import { HIDE_NEW_NOTIFICATION } from '../constants';
+import { NotificationWrapper, IconWrapper, LinkArrow, RemoveWrapper } from './styledComponents';
+
+const types = {
+  success: {
+    icon: 'check',
+    color: 'green',
+  },
+  warning: {
+    icon: 'exclamation',
+    color: 'orange',
+  },
+  info: {
+    icon: 'info',
+    color: 'blue',
+  },
+};
+
+const Notification = ({ notification }) => {
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+  const {
+    title,
+    message,
+    link,
+    type,
+    id,
+    onClose,
+    timeout,
+    blockTransition,
+    centered,
+  } = notification;
+
+  const formattedMessage = msg => (typeof msg === 'string' ? msg : formatMessage(msg, msg.values));
+
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+
+    dispatch({
+      type: HIDE_NEW_NOTIFICATION,
+      id,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  useEffect(() => {
+    let timeoutToClear;
+
+    if (!blockTransition) {
+      timeoutToClear = setTimeout(() => {
+        handleClose();
+      }, timeout || 2500);
+    }
+
+    return () => clearTimeout(timeoutToClear);
+  }, [blockTransition, handleClose, timeout]);
+
+  return (
+    <NotificationWrapper centered={centered} color={types[type].color}>
+      <Padded top left right bottom size="smd">
+        <Flex alignItems="center" justifyContent="space-between">
+          <IconWrapper>
+            <FontAwesomeIcon icon={types[type].icon} />
+          </IconWrapper>
+          <Padded left size="sm" style={{ width: '80%', flex: 1 }}>
+            {title && (
+              <Text
+                fontSize="xs"
+                textTransform="uppercase"
+                color="grey"
+                title={formattedMessage(title)}
+              >
+                {formattedMessage(title)}
+              </Text>
+            )}
+            <Flex justifyContent="space-between">
+              {message && (
+                <Text title={formattedMessage(message)}>{formattedMessage(message)}</Text>
+              )}
+              {link && (
+                <a
+                  href={link.url}
+                  target={link.target || '_blank'}
+                  rel={!link.target || link.target === '_blank' ? 'noopener noreferrer' : ''}
+                >
+                  <Padded right left size="xs">
+                    <Flex alignItems="center">
+                      <Text
+                        style={{ maxWidth: '100px' }}
+                        ellipsis
+                        fontWeight="bold"
+                        color="blue"
+                        title={formattedMessage(link.label)}
+                      >
+                        {formattedMessage(link.label)}
+                      </Text>
+                      {link.target === '_blank' && (
+                        <Padded left size="xs">
+                          <LinkArrow />
+                        </Padded>
+                      )}
+                    </Flex>
+                  </Padded>
+                </a>
+              )}
+            </Flex>
+          </Padded>
+          <RemoveWrapper>
+            <Remove onClick={handleClose} />
+          </RemoveWrapper>
+        </Flex>
+      </Padded>
+    </NotificationWrapper>
+  );
+};
+
+Notification.defaultProps = {
+  notification: {
+    id: 1,
+    type: 'success',
+    message: {
+      id: 'notification.success.saved',
+      defaultMessage: 'Saved',
+    },
+    onClose: () => null,
+    timeout: 2500,
+    blockTransition: false,
+    centered: false,
+  },
+};
+
+Notification.propTypes = {
+  notification: PropTypes.shape({
+    id: PropTypes.number,
+    message: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        defaultMessage: PropTypes.string,
+        values: PropTypes.object,
+      }),
+    ]),
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        defaultMessage: PropTypes.string,
+        values: PropTypes.object,
+      }),
+    ]),
+    link: PropTypes.shape({
+      target: PropTypes.string,
+      url: PropTypes.string.isRequired,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          defaultMessage: PropTypes.string,
+          values: PropTypes.object,
+        }),
+      ]).isRequired,
+    }),
+    type: PropTypes.string,
+    onClose: PropTypes.func,
+    timeout: PropTypes.number,
+    blockTransition: PropTypes.bool,
+    centered: PropTypes.bool,
+  }),
+};
+
+export default Notification;

package/admin/src/containers/NewNotification/Notification/styledComponents.js

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { Arrow } from '@buffetjs/icons';
+
+const NotificationWrapper = styled.div`
+  position: relative;
+  border-top-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  margin-bottom: ${({ theme }) => theme.main.sizes.paddings.sm};
+  box-shadow: 0 2px 4px 0 ${({ theme }) => theme.main.colors.darkGrey};
+  background-color: ${props => props.theme.main.colors.white};
+  border-left: 2px solid ${({ theme, color }) => theme.main.colors[color]};
+  overflow: hidden;
+  z-index: 10;
+  color: ${({ color, theme }) => theme.main.colors[color]};
+  transition: all 0.15s ease;
+  width: 400px;
+  min-height: 60px;
+  margin-left: ${({ centered }) => (centered ? '0px' : '240px')};
+  pointer-events: auto;
+
+  &:hover {
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+`;
+
+const IconWrapper = styled.div`
+  border: 1px solid;
+  padding: 5px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+`;
+
+const LinkArrow = styled(Arrow)`
+  transform: rotate(45deg);
+  margin-top: 4px;
+  color: ${({ theme }) => theme.main.colors.blue};
+`;
+
+const RemoveWrapper = styled.div`
+  position: relative;
+  display: flex;
+  width: 20px;
+  cursor: pointer;
+  opacity: 0.6;
+  font-size: 1.4rem;
+  color: #bbc2bf;
+  transition: opacity 0.1s ease;
+  -webkit-font-smoothing: antialiased;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    margin: auto;
+    font-size: 1.3rem;
+    font-weight: 100 !important;
+  }
+`;
+
+export { NotificationWrapper, IconWrapper, LinkArrow, RemoveWrapper };

package/admin/src/containers/NewNotification/Wrapper.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { TransitionGroup } from 'react-transition-group';
+
+const Wrapper = styled(TransitionGroup)`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: fixed;
+  top: 72px;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  list-style: none;
+  width: 100%;
+  overflow-y: hidden;
+  pointer-events: none;
+`;
+
+export default Wrapper;