Working on the admin side

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
-
-import { Button, List, Item } from 'coral-ui';
-import styles from './Configure.css';
-import StreamSettings from '../containers/StreamSettings';
-import ModerationSettings from '../containers/ModerationSettings';
-import TechSettings from '../containers/TechSettings';
+import React from 'react';
 import t from 'coral-framework/services/i18n';
 import { can } from 'coral-framework/services/perms';
 import PropTypes from 'prop-types';
+import { Button, List, Item } from 'coral-ui';
+import StreamSettings from '../containers/StreamSettings';
+import ModerationSettings from '../containers/ModerationSettings';
+import TechSettings from '../containers/TechSettings';
+import OrganizationSettings from '../containers/OrganizationSettings';
+import styles from './Configure.css';
 
-export default class Configure extends Component {
+class Configure extends React.Component {
   getSectionComponent(section) {
     switch (section) {
       case 'stream':
@@ -18,8 +18,11 @@ export default class Configure extends Component {
         return ModerationSettings;
       case 'tech':
         return TechSettings;
+      case 'organization':
+        return OrganizationSettings;
+      default:
+        return StreamSettings;
     }
-    throw new Error(`Unknown section ${section}`);
   }
 
   render() {
@@ -54,6 +57,9 @@ export default class Configure extends Component {
             <Item itemId="tech" icon="code">
               {t('configure.tech_settings')}
             </Item>
+            <Item itemId="organization" icon="people">
+              {t('configure.organization_settings')}
+            </Item>
           </List>
           <div className={styles.saveBox}>
             {canSave ? (
@@ -93,3 +99,5 @@ Configure.propTypes = {
   setActiveSection: PropTypes.func.isRequired,
   activeSection: PropTypes.string.isRequired,
 };
+
+export default Configure;

client/coral-admin/src/routes/Configure/components/OrganizationSettings.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Slot from 'coral-framework/components/Slot';
+import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
+
+class OrganizationSettings extends React.Component {
+  render() {
+    const { settings, slotPassthrough } = this.props;
+    console.log(this.props);
+    return (
+      <ConfigurePage title={t('configure.organization_settings')}>
+        <ConfigureCard title={t('configure.organization_details')}>
+          <ul>
+            <li>
+              {t('configure.organization_name')}: {settings.organizationName}
+            </li>
+            <li>
+              {t('configure.organization_contact_email')}:{' '}
+              {settings.organizationContactEmail}
+            </li>
+          </ul>
+        </ConfigureCard>
+        <Slot fill="adminOrganizationSettings" passthrough={slotPassthrough} />
+      </ConfigurePage>
+    );
+  }
+}
+
+OrganizationSettings.propTypes = {
+  updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
+};
+
+export default OrganizationSettings;

client/coral-admin/src/routes/Configure/containers/Configure.js

@@ -12,6 +12,7 @@ import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
 import { clearPending, setActiveSection } from '../../../actions/configure';
 import Configure from '../components/Configure';
+import OrganizationSettings from './OrganizationSettings';
 
 class ConfigureContainer extends Component {
   savePending = async () => {
@@ -49,10 +50,12 @@ const withConfigureQuery = withQuery(
       ...${getDefinitionName(StreamSettings.fragments.settings)}
       ...${getDefinitionName(TechSettings.fragments.settings)}
       ...${getDefinitionName(ModerationSettings.fragments.settings)}
+      ...${getDefinitionName(OrganizationSettings.fragments.settings)}
     }
     ...${getDefinitionName(StreamSettings.fragments.root)}
     ...${getDefinitionName(TechSettings.fragments.root)}
     ...${getDefinitionName(ModerationSettings.fragments.root)}
+    ...${getDefinitionName(OrganizationSettings.fragments.root)}
   }
   ${StreamSettings.fragments.root}
   ${StreamSettings.fragments.settings}
@@ -60,6 +63,8 @@ const withConfigureQuery = withQuery(
   ${TechSettings.fragments.settings}
   ${ModerationSettings.fragments.root}
   ${ModerationSettings.fragments.settings}
+  ${OrganizationSettings.fragments.root}
+  ${OrganizationSettings.fragments.settings}
   `,
   {
     options: () => ({

client/coral-admin/src/routes/Configure/containers/OrganizationSettings.js

@@ -0,0 +1,53 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
+import OrganizationSettings from '../components/OrganizationSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';
+
+const slots = ['adminOrganizationSettings'];
+
+const mapStateToProps = state => ({
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updatePending,
+    },
+    dispatch
+  );
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_OrganizationSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_OrganizationSettings_settings on Settings {
+        organizationName
+        organizationContactEmail
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `,
+  }),
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
+)(OrganizationSettings);

docs/source/api/slots.md

@@ -81,6 +81,7 @@ You won't have to use this to build plugins, but it's helpful to find where to e
 * `adminCommentMoreDetails`
 * `adminCommentLabels`
 * `adminModerationSettings`
+* `adminOrganizationSettings`
 * `adminStreamSettings`
 * `adminTechSettings`
 * `adminCommentInfoBar`

locales/en.yml

@@ -157,6 +157,10 @@ en:
     suspect_word_title: "Suspect words list"
     suspect_word_text: "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list."
     tech_settings: "Tech Settings"
+    organization_settings: "Organization Settings"
+    organization_details: "Organization Details"
+    organization_name: "Organization Name"
+    organization_contact_email: "Organization Contact Email"
     title: "Configure Comment Stream"
     weeks: Weeks
     wordlist: "Banned Words"

locales/es.yml

@@ -156,6 +156,10 @@ es:
     suspect_word_title: "Lista de palabras sospechosas"
     suspect_word_text: "Comentarios que contengan estas palabras o frases, considerando mayusculas y minúsculas, serán automáticamente  destacadas en los comentarios publicados. Escribir una palabra y apretar Enter o Tabulador para agregarla. O pegar una lista de palabras separadas por coma."
     tech_settings: "Configuración Técnica"
+    organization_settings: "Configuración de la Organización"
+    organization_details: "Detalles de la Organización"
+    organization_name: "Nombre de la Organización"
+    organization_contact_email: "Email de la Organización"
     title: "Configurar los comentarios"
     weeks: Semanas
     wordlist: "Palabras Suspendidas"