strapi-plugin-comments 1.0.1 → 2.0.0-beta.1

package/admin/src/pages/Discover/index.js

@@ -0,0 +1,185 @@
+/*
+ *
+ * Discover
+ *
+ */
+
+import React, { memo, useRef, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { useQuery } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import { isEmpty } from 'lodash';
+import { Badge } from '@strapi/design-system/Badge';
+import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; 
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex'; 
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Layout, HeaderLayout, ActionLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@strapi/design-system/Table'; 
+import { Typography } from '@strapi/design-system/Typography'; 
+import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; 
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { Eye } from '@strapi/icons';
+
+import {
+  EmptyStateLayout,
+  SearchURLQuery,
+  LoadingIndicatorPage,
+  useTracking,
+  useNotification,
+  useRBAC,
+  useFocusWhenNavigate,
+  useQueryParams,
+} from '@strapi/helper-plugin';
+import getMessage from '../../utils/getMessage';
+import { fetchData } from './utils/api';
+import pluginPermissions from '../../permissions';
+
+import getUrl from '../../utils/getUrl';
+import Nav from '../../components/Nav';
+import { COMMENT_STATUS } from '../../utils/constants';
+import TablePagination from '../../components/TablePagination';
+import filtersSchema from './utils/filtersSchema';
+import TableFilters from '../../components/TableFilters';
+
+const Discover = () => {
+  useFocusWhenNavigate();
+
+  const { push } = useHistory();
+  const { notifyStatus } = useNotifyAT();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const toggleNotification = useNotification();
+  const { formatDate } = useIntl();
+  const [{ query: queryParams }] = useQueryParams();
+  const _q = queryParams?._q || '';
+
+  const viewPermissions = useMemo(() => {
+    return { view: pluginPermissions.view };
+  }, []);
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canView },
+  } = useRBAC(viewPermissions);
+
+  const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching } = useQuery(
+    ['get-providers', queryParams],
+    () => fetchData(queryParams, toggleNotification),
+    {
+      initialData: { },
+    }
+  );
+
+  const handleClickDisplay = id => {
+    push(getUrl(`discover/${id}`));
+  };
+
+  const isLoading = isLoadingForData || isFetching;
+  const { total } = pagination;
+
+  const emptyLayout = {
+    comments: {
+      id: getMessage('page.discover.table.empty'),
+      defaultMessage: "You don't have any comments yet.",
+    },
+    search: {
+      id: getMessage('page.discover.table.empty.search'),
+      defaultMessage: 'No comments match the search.',
+    },
+  };
+
+  const renderStatus = ({ blocked, blockedThread }) => {
+    const status = blocked || blockedThread ? COMMENT_STATUS.BLOCKED : COMMENT_STATUS.OPEN;
+    let color = 'secondary';
+    switch (status) {
+        case COMMENT_STATUS.OPEN:
+            color = 'success';
+            break;
+        case COMMENT_STATUS.BLOCKED:
+            color = 'danger';
+    };
+    return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.discover.table.header.status.${status}`, status) }</Badge>);
+  };
+
+  const emptyContent = _q ? 'search' : 'comments';
+  
+  const COL_COUNT = 7;
+
+  return <Box background="neutral100">
+          <Layout sideNav={<Nav />}>
+            {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
+            <>
+              <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
+              <ActionLayout 
+                    startActions={<>
+                      <SearchURLQuery
+                        label={ getMessage('search.label', 'Search', false) }
+                      />
+                      <TableFilters displayedFilters={filtersSchema} />
+                    </>} />
+              <ContentLayout>
+                { !isEmpty(result) ? (<>
+                <Table colCount={COL_COUNT} rowCount={result.length}>
+                  <Thead>
+                    <Tr>
+                      <Th>
+                        <BaseCheckbox aria-label="Select all entries" />
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.thread') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.entry') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.lastUpdate') }</Typography>
+                      </Th>
+                      <Th>
+                        <Typography variant="sigma">{ getMessage('page.discover.table.header.status') }</Typography>
+                      </Th>
+                      <Th>
+                        <VisuallyHidden>{ getMessage('page.discover.table.header.actions') }</VisuallyHidden>
+                      </Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {result.map(entry => <Tr key={entry.id}>
+                        <Td>
+                          <BaseCheckbox aria-label={`Select ${entry.content}`} />
+                        </Td>
+                        <Td style={{ maxWidth: '40vw' }}>
+                          <Typography textColor="neutral800" ellipsis>{entry.content}</Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{entry.threadOf?.id || '-'}</Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{entry.related?.id}</Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{ formatDate(entry.updatedAt || entry.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{ renderStatus(entry) }</Typography>
+                        </Td>
+                        <Td>
+                          <Flex direction="column" alignItems="flex-end">
+                            <IconButton onClick={() => handleClickDisplay(entry.id)} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
+                          </Flex>
+                        </Td>
+                      </Tr>)}
+                  </Tbody>
+                </Table>
+                <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
+                </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
+              </ContentLayout>
+            </>) }
+          </Layout>
+        </Box>;
+}
+
+export default memo(Discover);

package/admin/src/pages/Discover/utils/api.js

@@ -0,0 +1,23 @@
+import { stringify } from 'qs';
+import { isEmpty } from 'lodash';
+
+import { getApiURL, axiosInstance } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchData = async (queryParams, toggleNotification) => {
+  try {
+    console.log('api');
+    console.log(queryParams);
+    console.log(getApiURL(`moderate/all${!isEmpty(queryParams) ? `?${stringify(queryParams, { encode: false })}` : ''}`));
+    const { data } = await axiosInstance.get(getApiURL(`moderate/all${queryParams ? `?${stringify(queryParams, { encode: false })}` : ''}`));
+
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    throw new Error('error');
+  }
+};

package/admin/src/pages/Discover/utils/filtersSchema.js

@@ -0,0 +1,9 @@
+const filtersSchema = [
+    {
+      name: 'content',
+      metadatas: { label: 'Message' },
+      fieldSchema: { type: 'string' },
+    },
+  ];
+  
+  export default filtersSchema;

package/admin/src/permissions.js

@@ -1,34 +1,14 @@
 const pluginPermissions = {
-  // This permission regards the main component (App) and is used to tell
-  // If the plugin link should be displayed in the menu
-  // And also if the plugin is accessible. This use case is found when a user types the url of the
-  // plugin directly in the browser
-  main: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.comment', subject: null },
-    { action: 'plugins::comments.moderate.block.thread', subject: null },
-    { action: 'plugins::comments.moderate.reports', subject: null },
-  ],
-  open: [
-    { action: 'plugins::comments.read', subject: null },
-  ],
-  moderate: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.comment', subject: null },
-    { action: 'plugins::comments.moderate.block.thread', subject: null },
-  ],
-  moderateComments: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.comment', subject: null },
-  ],
-  moderateThreads: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.block.thread', subject: null },
-  ],
-  moderateReports: [
-    { action: 'plugins::comments.read', subject: null },
-    { action: 'plugins::comments.moderate.reports', subject: null },
-  ],
-};
-
-export default pluginPermissions;
+    access: [
+      { action: 'plugin::comments.read', subject: null },
+      { action: 'plugin::comments.reports.read', subject: null },
+      { action: 'plugin::comments.discovery.read', subject: null },
+      { action: 'plugin::comments.settings.read', subject: null },
+    ],
+    discover: [{ action: 'plugin::comments.read', subject: null }],
+    moderate: [{ action: 'plugin::comments.moderate', subject: null }],
+    reports: [{ action: 'plugin::comments.reports.read', subject: null }],
+    reportsReview: [{ action: 'plugin::comments.reports.action', subject: null }],
+  };
+  
+  export default pluginPermissions;

package/admin/src/pluginId.js

@@ -1,7 +1,5 @@
 const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-);
+
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
 
 module.exports = pluginId;

package/admin/src/translations/en.json

@@ -1,35 +1,74 @@
 {
     "plugin.name": "Comments",
-    "components.Search.placeholder": "Search for an entry...",
-    "list.header.title": "Comments",
-    "list.header.description": "{count, plural, =0 {All available} one {# new comment} other {# new comments}}",
-    "list.content.empty": "Nothing found, lift your search criteria and try again",
-    "list.item.header.blocked": "This comment has been blocked",
-    "list.item.header.blocked.thread": "This comment and thread have been blocked",
-    "list.item.header.removed": "This comment and thread have been removed by author",
-    "list.item.indication.new": "New comment",
-    "list.item.indication.abuse": "Abuse reported",
-    "list.item.threads.drilldown": "Drilldown",
-    "list.item.threads.count": "{count, plural, =0 {There is no threads} one {# thread} other {# threads}}",
-    "list.item.header.abuse": "{count, plural, =0 {Nothing reported} one {# report waits for review} other {# reports waits for review}}",
-    "list.item.moderation.button.comment.restore": "Restore comment",
-    "list.item.moderation.button.comment.hide": "Hide comment",
-    "list.item.moderation.button.thread.restore": "Restore thread",
-    "list.item.moderation.button.thread.hide": "Hide thread",
-    "moderation.header.title": "Moderation",
-    "moderation.header.description": "Discussion thread",
-    "moderation.content.empty": "Choose a comment to start moderating",
-    "popup.reports.header": "Review - Abuse reports",
-    "popup.reports.item.header.date": "Issue date",
-    "popup.reports.item.header.reason": "Reason",
-    "popup.reports.item.header.message": "Message",
-    "popup.reports.item.reason.other": "Other",
-    "popup.reports.item.reason.discrimination": "Discrimination",
-    "popup.reports.item.reason.bad_language": "Bad language used",
-    "popup.reports.item.button": "Resolve",
-    "popup.reports.footer.actions": "Moderator actions:",
-    "popup.reports.empty": "All good, no issues reported",
-    "notification.comment.visibility": "Comment visibility has been changed",
-    "notification.thread.visibility": "Comment thread visibility has been changed",
-    "notification.abuse-report.resolution": "Abuse report has been resolved"
-}
+    "common.button.back": "Go back",
+    "nav.header.moderation": "Moderation",
+    "nav.header.settings": "Settings",
+    "nav.item.updates": "Updates",
+    "nav.item.discover": "Discover",
+    "nav.item.reports": "Reports",
+    "nav.item.settings": "Settings",
+    "page.updates.header": "Recent updates",
+    "page.discover.header": "Discover threads",
+    "page.discover.header.count": "entries found",
+    "page.discover.table.header.message": "Message",
+    "page.discover.table.header.thread": "Thread of",
+    "page.discover.table.header.entry": "Entry",
+    "page.discover.table.header.lastUpdate": "Last update",
+    "page.discover.table.header.status": "Status",
+    "page.discover.table.header.status.OPEN": "OPEN",
+    "page.discover.table.header.status.BLOCKED": "BLOCKED",
+    "page.discover.table.header.status.TO_REVIEW": "TO REVIEW",
+    "page.discover.table.header.actions": "Status",
+    "page.discover.table.action.display": "Display",
+    "page.discover.table.action.reports": "Reports",
+    "page.discover.table.empty": "You don't have any comments yet.",
+    "page.discover.table.empty.search": "No comments match the search.",
+    "page.discover.table.filters": "Filtering",
+    "page.details.header": "Discussion panel",
+    "page.details.header.description": "Drilldown and manage discussion related to the entity",
+    "page.details.panel.discussion": "Discussion",
+    "page.details.panel.discussion.nav.drilldown": "Drilldown",
+    "page.details.panel.discussion.nav.back": "Go top",
+    "page.details.panel.discussion.warnings.reports.description": "open reports",
+    "page.details.panel.discussion.warnings.reports.review": "Review",
+    "page.details.panel.discussion.warnings.reports.dialog.list": "Reports",
+    "page.details.panel.discussion.warnings.reports.dialog.header": "Moderation: Review open reports",
+    "page.details.panel.discussion.warnings.reports.dialog.reason": "Reason",
+    "page.details.panel.discussion.warnings.reports.dialog.reason.BAD_LANGUAGE": "Bad language",
+    "page.details.panel.discussion.warnings.reports.dialog.reason.DISCRIMINATION": "Discrimination",
+    "page.details.panel.discussion.warnings.reports.dialog.reason.OTHER": "Other",
+    "page.details.panel.discussion.warnings.reports.dialog.content": "Content",
+    "page.details.panel.discussion.warnings.reports.dialog.createdAt": "Issue date",
+    "page.details.panel.discussion.warnings.reports.dialog.status": "Status",
+    "page.details.panel.discussion.warnings.reports.dialog.status.OPEN": "OPEN",
+    "page.details.panel.discussion.warnings.reports.dialog.status.RESOLVED": "RESOLVED",
+    "page.details.panel.discussion.warnings.reports.dialog.actions": "Actions",
+    "page.details.panel.discussion.warnings.reports.dialog.actions.resolve": "Resolve",
+    "page.details.panel.discussion.warnings.reports.dialog.confirmation.success": "Open report has been resolved",
+    "page.details.panel.discussion.status.blocked": "BLOCKED",
+    "page.details.panel.entity": "Entity details",
+    "page.details.panel.status": "Discussion is",
+    "page.details.panel.status.open": "OPEN",
+    "page.details.panel.status.blocked": "BLOCKED",
+    "page.details.panel.status.pending": "PENDING",
+    "page.details.actions.comment.block": "Block comment",
+    "page.details.actions.comment.block.confirmation.header": "Moderation: Block comment",
+    "page.details.actions.comment.block.confirmation.description": "Do you really want to block this comment?",
+    "page.details.actions.comment.block.confirmation.button.confirm": "Yes, block it",
+    "page.details.actions.comment.block.confirmation.success": "Comment has been blocked",
+    "page.details.actions.comment.unblock": "Unblock comment",
+    "page.details.actions.comment.unblock.confirmation.success": "Comment has been unblocked",
+    "page.details.actions.comment.reports.review": "Review",
+    "page.details.actions.thread.block": "Block thread",
+    "page.details.actions.thread.block.confirmation.header": "Moderation: Block thread",
+    "page.details.actions.thread.block.confirmation.description": "Do you really want to block whole thread? No further discussions are going to be allowed.",
+    "page.details.actions.thread.block.confirmation.button.confirm": "Yes, block it",
+    "page.details.actions.thread.block.confirmation.success": "Thread has been blocked",
+    "page.details.actions.thread.unblock": "Unblock thread",
+    "page.details.actions.thread.unblock.confirmation.success": "Thread has been unblocked",
+    "page.coming.soon": "Wait for what is coming soon...",
+    "compontents.confirmation.dialog.header": "Confirmation",
+    "compontents.confirmation.dialog.description": "Do you really want to perform this action?",
+    "compontents.confirmation.dialog.button.confirm": "Yes, I do",
+    "compontents.confirmation.dialog.button.cancel": "Cancel"
+}

package/admin/src/translations/fr.json

@@ -0,0 +1 @@
+{}

package/admin/src/utils/axiosInstance.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async config => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  error => {
+    Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  response => response,
+  error => {
+    if (error.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
+export default instance;

package/admin/src/utils/constants.js

@@ -0,0 +1,28 @@
+export const APPROVAL_STATUS = {
+  PENDING: "PENDING",
+  APPROVED: "APPROVED",
+  REJECTED: "REJECTED",
+};
+
+export const REPORT_STATUS = {
+  'RESOLVED': 'RESOLVED',
+  'OPEN': 'OPEN',
+};
+
+export const REPORT_REASON = {
+  'BAD_LANGUAGE': 'BAD_LANGUAGE',
+  'DISCRIMINATION': 'DISCRIMINATION',
+  'OTHER': 'OTHER',
+};
+
+export const COMMENT_STATUS = {
+  'BLOCKED': 'BLOCKED',
+  'OPEN': 'OPEN',
+  'TO_REVIEW': 'TO_REVIEW',
+};
+
+export const REGEX = {
+  uid: new RegExp(/^(?<type>[a-z]+)\:{2}(?<api>[a-z]+)\.{1}(?<contentType>[a-z]+)$/gmi),
+  relatedUid: new RegExp(/^(?<uid>[a-z]+\:{2}[a-z]+\.[a-z]+)\:{1}(?<id>[0-9]+)$/gmi),
+  email: new RegExp(/\S+@\S+\.\S+/),
+};

package/admin/src/utils/getApiUrl.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getApiURL = endPoint => `/${pluginId}/${endPoint}`;
+
+export default getApiURL;

package/admin/src/utils/getMessage.js

@@ -0,0 +1,14 @@
+
+import { useIntl } from 'react-intl';
+
+import pluginId from '../pluginId';
+
+const getMessage = (id, defaultMessage, inPluginScope = true) => {
+    const { formatMessage } = useIntl();
+    return formatMessage({
+        id: `${inPluginScope ? pluginId : 'app.component'}.${id}`,
+        defaultMessage,
+    })
+};
+
+export default getMessage;

package/admin/src/utils/getRelatedGroups.js

@@ -0,0 +1,5 @@
+import { REGEX } from "./constants";
+
+const getRelatedGroups = related => related.split(REGEX.relatedUid).filter(s => s && s.length > 0);
+
+export default getRelatedGroups;

package/admin/src/utils/getUrl.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getUrl = (path = '') => `/plugins/${pluginId}/${path}`;
+
+export default getUrl;

package/admin/src/utils/handleAPIError.js

@@ -0,0 +1,15 @@
+
+const handleAPIError = (err = null, toggleNotification = null) => {
+    toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error' },
+    });
+
+    if (err) {
+        throw err;
+    } else {
+        throw new Error('error');
+    }
+}
+
+export default handleAPIError;

package/admin/src/utils/index.js

@@ -0,0 +1,6 @@
+export { default as axiosInstance } from './axiosInstance';
+export { default as getApiURL } from './getApiURL';
+export { default as getUrl } from './getUrl';
+export { default as getMessage } from './getMessage';
+export { default as handleAPIError } from './handleAPIError';
+export { default as getRelatedGroups } from './getRelatedGroups';

package/codecov.yml

@@ -1,3 +1,4 @@
 comment:
   branches:
-    - master
+    - master
+    - feat/strapi-v4

package/content-types/comment.js

@@ -0,0 +1,97 @@
+/**
+ * Comments Collection Type
+ */
+
+module.exports = {
+  info: {
+    tableName: 'plugin-comments-comments',
+    singularName: 'comment',
+    pluralName: 'comments',
+    displayName: 'Comment',
+    description: 'Comment content type',
+    kind: 'collectionType',
+  },
+  options: {
+    draftAndPublish: false,
+  },
+  pluginOptions: {
+    'content-manager': {
+      visible: false
+    },
+    'content-type-builder': {
+      visible: false
+    }
+  },
+  attributes: {
+    content: {
+      type: 'text',
+      configurable: false,
+      required: true
+    },
+    blocked: {
+      type: 'boolean',
+      default: false,
+      configurable: false
+    },
+    blockedThread: {
+      type: 'boolean',
+      default: false,
+      configurable: false
+    },
+    blockReason: {
+      type: 'string',
+      configurable: false
+    },
+    authorUser: {
+      type: 'relation',
+      relation: 'oneToOne',
+      target: 'plugin::users-permissions.user',
+      configurable: false,
+    },
+    authorType: {
+      type: 'string',
+      configurable: false
+    },
+    authorId: {
+      type: 'string',
+      configurable: false
+    },
+    authorName: {
+      type: 'string',
+      configurable: false
+    },
+    authorEmail: {
+      type: 'email',
+      configurable: false
+    },
+    authorAvatar: {
+      type: 'string',
+      configurable: false
+    },
+    removed: {
+      type: 'boolean',
+      configurable: false
+    },
+    approvalStatus: {
+      type: 'string',
+      configurable: false
+    },
+    related: {
+      type: 'string',
+      configurable: false
+    },
+    reports: {
+      type: 'relation',
+      relation: 'oneToMany',
+      target: 'plugin::comments.comment-report',
+      mappedBy: 'related',
+      configurable: false,
+    },
+    threadOf: {
+      type: 'relation',
+      relation: 'oneToOne',
+      target: 'plugin::comments.comment',
+      configurable: false,
+    },
+  },
+};

package/content-types/index.js

@@ -0,0 +1,11 @@
+const CommentCT = require('./comment');
+const ReportCT = require('./report');
+
+module.exports = {
+  'comment': {
+    schema: CommentCT,
+  },
+  'comment-report': {
+    schema: ReportCT,
+  }, 
+};