@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/HomePage/components.js

@@ -0,0 +1,260 @@
+/* eslint-disable */
+import styled, { css } from 'styled-components';
+
+const Block = styled.div`
+  width: 100%;
+  position: relative;
+  margin-bottom: 34px;
+  background: #ffffff;
+  padding: 19px 30px 30px 30px;
+  box-shadow: 0 2px 4px 0 #e3e9f3;
+  border-radius: 3px;
+  line-height: 18px;
+
+  a {
+    position: relative;
+    text-decoration: none;
+
+    &:hover::after {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      border-radius: 0.3rem;
+      content: '';
+      opacity: 0.1;
+      background: #ffffff;
+    }
+  }
+  h2,
+  p {
+    line-height: 18px;
+  }
+  h2 {
+    display: inline-block;
+  }
+  #mainHeader {
+    &:after {
+      content: '';
+      width: 100%;
+      height: 3px;
+      margin-top: 4px;
+      display: block;
+      background: #f0b41e;
+    }
+  }
+
+  .social-wrapper {
+    span {
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    > div:nth-child(2n) {
+      padding-right: 0;
+    }
+  }
+`;
+
+const Container = styled.div`
+  padding: 47px 13px 0 13px;
+  > div {
+    margin: 0;
+  }
+`;
+
+const P = styled.p`
+  max-width: 550px;
+  padding-top: 10px;
+  padding-right: 30px;
+  color: #5c5f66;
+  font-size: 14px;
+  b {
+    font-weight: 600;
+  }
+`;
+
+const Wave = styled.div`
+  &:before {
+    content: '👋';
+    position: absolute;
+    top: 24px;
+    right: 30px;
+    font-size: 50px;
+  }
+`;
+
+const ALink = styled.a`
+  display: inline-block;
+  position: relative;
+  height: 34px;
+  padding-right: 20px;
+  border-radius: 3px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 34px;
+  font-size: 13px;
+
+  &:before {
+    content: '\f105';
+
+    font-weight: 600;
+    margin-right: 10px;
+    font-family: 'FontAwesome';
+  }
+
+  &:hover,
+  :focus,
+  :active {
+    text-decoration: none;
+    outline: 0;
+  }
+
+  &:hover::after {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: 0.3rem;
+    content: '';
+    opacity: 0.1;
+    background: #ffffff;
+  }
+
+  ${({ type }) =>
+    type === 'blog' || type === 'documentation'
+      ? css`
+          padding-left: 20px;
+          margin-top: 16px;
+          color: #ffffff;
+          text-transform: uppercase;
+          font-size: 13px;
+          font-weight: 500;
+          &:before {
+            font-size: 16px;
+          }
+          &:hover {
+            color: #ffffff;
+          }
+        `
+      : css`
+          margin-top: 9px;
+          font-size: 14px;
+          color: #005fea;
+          &:before {
+            font-size: 12px;
+          }
+          &:hover {
+            color: #005fea;
+          }
+        `}
+
+  ${({ type }) =>
+    type === 'blog' &&
+    css`
+      background-color: #333740;
+    `}
+
+  ${({ type }) =>
+    type === 'documentation' &&
+    css`
+      background-color: #005fea;
+    `}
+`;
+
+const Separator = styled.div`
+  height: 2px;
+  background-color: #f7f8f8;
+`;
+
+const LinkWrapper = styled.a`
+  width: calc(50% - 6px);
+  position: relative;
+  padding: 21px 30px;
+  padding-left: 95px;
+  height: auto;
+  line-height: 18px;
+  background-color: #f7f8f8;
+
+  &:hover,
+  :focus,
+  :active {
+    text-decoration: none;
+    outline: 0;
+  }
+
+  &:before {
+    position: absolute;
+    left: 30px;
+    top: 38px;
+    font-family: 'FontAwesome';
+    font-size: 38px;
+
+    ${({ type }) => {
+      if (type === 'doc') {
+        return css`
+          content: '\f02d';
+          color: #42b88e;
+        `;
+      }
+
+      return css`
+        content: '\f121';
+        color: #f0811e;
+      `;
+    }}
+  }
+
+  > p {
+    margin: 0;
+    font-size: 13px;
+    &:first-child {
+      font-size: 16px;
+    }
+    color: #919bae;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .bold {
+    color: #333740;
+    font-weight: 600;
+  }
+`;
+
+const SocialLinkWrapper = styled.div`
+  position: relative;
+  height: 24px;
+  margin-bottom: 30px;
+  font-size: 14px;
+  font-weight: 500;
+  a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #333740 !important;
+    text-decoration: none;
+    line-height: 18px;
+    img,
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    img {
+      height: 24px;
+      width: 24px;
+      object-fit: contain;
+    }
+    span {
+      width: calc(100% - 24px);
+      padding-left: 11px;
+      font-weight: 600;
+    }
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;
+
+export { ALink, Block, Container, LinkWrapper, P, Separator, SocialLinkWrapper, Wave };

package/admin/src/containers/HomePage/hooks.js

@@ -0,0 +1,54 @@
+import { useEffect, useState, useRef } from 'react';
+import axios from 'axios';
+
+const useFetch = () => {
+  const isMounted = useRef(true);
+  const [state, setState] = useState({
+    error: false,
+    isLoading: true,
+    posts: [{ link: '1' }, { link: '2' }],
+  });
+
+  useEffect(() => {
+    const CancelToken = axios.CancelToken;
+    const source = CancelToken.source();
+
+    const fetchData = async () => {
+      try {
+        const { data } = await axios.get(
+          'https://strapi.akemona.com/api/blog-posts?_limit=2&_sort=publishedAt:desc',
+          {
+            cancelToken: source.token,
+          }
+        );
+
+        const posts = data.reduce((acc, curr) => {
+          acc.push({
+            title: curr.seo.metaTitle,
+            link: curr.slug,
+            content: curr.seo.metaDescription,
+          });
+
+          return acc;
+        }, []);
+
+        setState({ isLoading: false, posts, error: false });
+      } catch (err) {
+        if (isMounted.current) {
+          setState({ isLoading: false, error: true, posts: [] });
+        }
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      isMounted.current = false;
+      source.cancel('abort');
+    };
+  }, []);
+
+  return state;
+};
+
+export default useFetch;

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

@@ -0,0 +1,239 @@
+/*
+ *
+ * HomePage
+ *
+ */
+/* eslint-disable */
+import React, { memo, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { get, upperFirst } from 'lodash';
+import { auth, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import PageTitle from '../../components/PageTitle';
+import { useModels } from '../../hooks';
+
+import useFetch from './hooks';
+import { ALink, Block, Container, LinkWrapper, P, Wave, Separator } from './components';
+import BlogPost from './BlogPost';
+import SocialLink from './SocialLink';
+
+const FIRST_BLOCK_LINKS = [
+  {
+    link:
+      'https://strapi.akemona.com/documentation/developer-docs/latest/getting-started/quick-start.html#_4-create-a-category-content-type',
+    contentId: 'app.components.BlockLink.documentation.content',
+    titleId: 'app.components.BlockLink.documentation',
+  },
+  {
+    link: 'https://github.com/strapi/foodadvisor',
+    contentId: 'app.components.BlockLink.code.content',
+    titleId: 'app.components.BlockLink.code',
+  },
+];
+
+const SOCIAL_LINKS = [
+  {
+    name: 'GitHub',
+    link: 'https://github.com/strapi/strapi/',
+  },
+  {
+    name: 'Discord',
+    link: 'https://discord.strapi.io/',
+  },
+  {
+    name: 'Reddit',
+    link: 'https://www.reddit.com/r/Strapi/',
+  },
+  {
+    name: 'Twitter',
+    link: 'https://twitter.com/strapijs',
+  },
+  {
+    name: 'Blog',
+    link: 'https://strapi.akemona.com/blog',
+  },
+  {
+    name: 'Forum',
+    link: 'https://forum.strapi.io',
+  },
+  {
+    name: 'Careers',
+    link: 'https://strapi.akemona.com/careers',
+  },
+];
+
+const HomePage = ({ history: { push } }) => {
+  const { error, isLoading, posts } = useFetch();
+  // Temporary until we develop the menu API
+  const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
+
+  const handleClick = e => {
+    e.preventDefault();
+
+    push(
+      '/plugins/content-type-builder/content-types/plugins::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
+    );
+  };
+
+  const hasAlreadyCreatedContentTypes = useMemo(() => {
+    const filterContentTypes = contentTypes => contentTypes.filter(c => c.isDisplayed);
+
+    return (
+      filterContentTypes(collectionTypes).length > 1 || filterContentTypes(singleTypes).length > 0
+    );
+  }, [collectionTypes, singleTypes]);
+
+  if (isLoadingForModels) {
+    return <LoadingIndicatorPage />;
+  }
+
+  const headerId = hasAlreadyCreatedContentTypes
+    ? 'HomePage.greetings'
+    : 'app.components.HomePage.welcome';
+  const username = get(auth.getUserInfo(), 'firstname', '');
+  const linkProps = hasAlreadyCreatedContentTypes
+    ? {
+        id: 'app.components.HomePage.button.blog',
+        href: 'https://strapi.akemona.com/blog/',
+        onClick: () => {},
+        type: 'blog',
+        target: '_blank',
+      }
+    : {
+        id: 'app.components.HomePage.create',
+        href: '',
+        onClick: handleClick,
+        type: 'documentation',
+      };
+
+  return (
+    <>
+      <FormattedMessage id="HomePage.helmet.title">
+        {title => <PageTitle title={title} />}
+      </FormattedMessage>
+      <Container className="container-fluid">
+        <div className="row">
+          <div className="col-lg-8 col-md-12">
+            <Block>
+              <Wave />
+              <FormattedMessage
+                id={headerId}
+                values={{
+                  name: upperFirst(username),
+                }}
+              >
+                {msg => <h2 id="mainHeader">{msg}</h2>}
+              </FormattedMessage>
+              {hasAlreadyCreatedContentTypes ? (
+                <FormattedMessage id="app.components.HomePage.welcomeBlock.content.again">
+                  {msg => <P>{msg}</P>}
+                </FormattedMessage>
+              ) : (
+                <FormattedMessage id="HomePage.welcome.congrats">
+                  {congrats => {
+                    return (
+                      <FormattedMessage id="HomePage.welcome.congrats.content">
+                        {content => {
+                          return (
+                            <FormattedMessage id="HomePage.welcome.congrats.content.bold">
+                              {boldContent => {
+                                return (
+                                  <P>
+                                    <b>{congrats}</b>&nbsp;
+                                    {content}&nbsp;
+                                    <b>{boldContent}</b>
+                                  </P>
+                                );
+                              }}
+                            </FormattedMessage>
+                          );
+                        }}
+                      </FormattedMessage>
+                    );
+                  }}
+                </FormattedMessage>
+              )}
+              {hasAlreadyCreatedContentTypes && (
+                <div style={{ marginTop: isLoading ? 60 : 50 }}>
+                  {posts.map((post, index) => (
+                    <BlogPost
+                      {...post}
+                      key={post.link}
+                      isFirst={index === 0}
+                      isLoading={isLoading}
+                      error={error}
+                    />
+                  ))}
+                </div>
+              )}
+              <FormattedMessage id={linkProps.id}>
+                {msg => (
+                  <ALink
+                    rel="noopener noreferrer"
+                    {...linkProps}
+                    style={{ verticalAlign: ' bottom', marginBottom: 5 }}
+                  >
+                    {msg}
+                  </ALink>
+                )}
+              </FormattedMessage>
+              <Separator style={{ marginTop: 37, marginBottom: 36 }} />
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                {FIRST_BLOCK_LINKS.map((data, index) => {
+                  const type = index === 0 ? 'doc' : 'code';
+
+                  return (
+                    <LinkWrapper href={data.link} target="_blank" key={data.link} type={type}>
+                      <FormattedMessage id={data.titleId}>
+                        {title => <p className="bold">{title}</p>}
+                      </FormattedMessage>
+                      <FormattedMessage id={data.contentId}>
+                        {content => <p>{content}</p>}
+                      </FormattedMessage>
+                    </LinkWrapper>
+                  );
+                })}
+              </div>
+            </Block>
+          </div>
+
+          <div className="col-md-12 col-lg-4">
+            <Block style={{ paddingRight: 30, paddingBottom: 0 }}>
+              <FormattedMessage id="HomePage.community">{msg => <h2>{msg}</h2>}</FormattedMessage>
+              <FormattedMessage id="app.components.HomePage.community.content">
+                {content => <P style={{ marginTop: 7, marginBottom: 0 }}>{content}</P>}
+              </FormattedMessage>
+              <FormattedMessage id="HomePage.roadmap">
+                {msg => (
+                  <ALink
+                    rel="noopener noreferrer"
+                    href="https://portal.productboard.com/strapi/1-public-roadmap/tabs/2-under-consideration"
+                    target="_blank"
+                  >
+                    {msg}
+                  </ALink>
+                )}
+              </FormattedMessage>
+
+              <Separator style={{ marginTop: 18 }} />
+              <div
+                className="row social-wrapper"
+                style={{
+                  display: 'flex',
+                  margin: 0,
+                  marginTop: 36,
+                  marginLeft: -15,
+                }}
+              >
+                {SOCIAL_LINKS.map((value, key) => (
+                  <SocialLink key={key} {...value} />
+                ))}
+              </div>
+            </Block>
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+};
+
+export default memo(HomePage);

package/admin/src/containers/InstalledPluginsPage/ListWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding-top: 3px;
+`;
+
+export default Wrapper;

package/admin/src/containers/InstalledPluginsPage/Logo.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const LogoContainer = styled.div`
+  width: 70px;
+  height: 36px;
+  position: relative;
+  margin: 0;
+  text-align: center;
+  background: #fafafb;
+  border: 1px solid #f3f3f7;
+  border-radius: 3px;
+  font-size: 20px;
+
+  > img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+`;
+
+export default LogoContainer;

package/admin/src/containers/InstalledPluginsPage/Row.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { IconLinks, Text } from '@buffetjs/core';
+import { CustomRow } from '@buffetjs/styles';
+import { useGlobalContext, PopUpWarning, CheckPermissions } from 'strapi-helper-plugin';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import adminPermissions from '../../permissions';
+import LogoContainer from './Logo';
+
+const Row = ({ logo, name, description, isRequired, id, icon, onConfirm }) => {
+  const { formatMessage } = useGlobalContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const links = [];
+
+  const handleClickConfirm = () => {
+    handleToggle();
+    onConfirm(id);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  if (!isRequired) {
+    links.push({
+      icon: (
+        <CheckPermissions permissions={adminPermissions.marketplace.uninstall}>
+          <FontAwesomeIcon icon={faTrashAlt} />
+        </CheckPermissions>
+      ),
+      onClick: handleToggle,
+    });
+  }
+
+  return (
+    <CustomRow>
+      <td style={{ paddingTop: 0, width: 100, verticalAlign: 'bottom' }}>
+        <LogoContainer>
+          {logo && <img src={logo} alt="icon" />}
+          {!logo && (
+            <div className="icon-wrapper">
+              <FontAwesomeIcon icon={icon} />
+            </div>
+          )}
+        </LogoContainer>
+      </td>
+      <td>
+        <Text>
+          <Text
+            as="span"
+            fontSize="xs"
+            fontWeight="bold"
+            letterSpacing="0.7px"
+            textTransform="uppercase"
+          >
+            {name}&nbsp;—&nbsp;
+          </Text>
+          <Text as="span" fontSize="md">
+            {formatMessage({
+              id: `${description}.short`,
+              defaultMessage: description,
+            })}
+          </Text>
+        </Text>
+      </td>
+
+      <td>
+        <IconLinks links={links} />
+        <PopUpWarning
+          isOpen={isOpen}
+          toggleModal={handleToggle}
+          popUpWarningType="danger"
+          onConfirm={handleClickConfirm}
+        />
+      </td>
+    </CustomRow>
+  );
+};
+
+Row.defaultProps = {
+  icon: 'plug',
+  isRequired: false,
+  logo: null,
+  onConfirm: () => {},
+};
+
+Row.propTypes = {
+  description: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  logo: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func,
+};
+
+export default Row;