[#27] Archives integration

.env

@@ -4,3 +4,4 @@ REACT_APP_AUTHORIZATION_URL=https://auth.cern.ch/auth/realms/cern/protocol/openi
 REACT_APP_OAUTH_REDIRECT_URL=https://localhost:3000/redirect
 REACT_APP_OAUTH_LOGOUT_URL=https://localhost:3000/logout
 REACT_APP_NODE_TLS_REJECT_UNAUTHORIZED=0
+REACT_APP_ARCHIVE_URL=https://cern.ch/notifications-archives

.env.dev

@@ -3,3 +3,4 @@ REACT_APP_OAUTH_CLIENT_ID=push-notifications
 REACT_APP_AUTHORIZATION_URL=https://auth.cern.ch/auth/realms/cern/protocol/openid-connect/auth
 REACT_APP_OAUTH_REDIRECT_URL=https://test-notifications-service.web.cern.ch/redirect
 REACT_APP_OAUTH_LOGOUT_URL=https://test-notifications-service.web.cern.ch/logout
+REACT_APP_ARCHIVE_URL=https://cern.ch/notifications-archives

.gitignore

@@ -23,3 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 .idea
 .vscode
+yarn.lock
+src/*.css

README.md

@@ -10,13 +10,18 @@
   npm install
   ```
 2. After installing all the dependencies, you should be able to run the project
-  ```
-  npm start
-  ```
+```
+npm start
+```
 
 ## Test docker image locally
 
-We can build the docker image to test the production build of the system:
+The Dockerfile is meant to build the image that is going to be used in the production environment,
+so it expects to use the production build of the web-portal application. So first of all we should build the application:
+```
+npx env-cmd -f .env cross-env npm build
+```
+When the build is finished, we can build the docker image to test the production build of the system:
 ```
 docker build . -t web-portal
 ```

src/channels/components/ChannelsList/ChannelsList.js

@@ -10,21 +10,31 @@ import * as getChannelsActionCreators from '../../actions/GetChannels';
 import * as getPublicChannelsActionCreators from '../../actions/GetPublicChannels';
 
 const columns = [
-  {id: 'name', numeric: false, disablePadding: true, label: 'Name'},
+  {id: 'name', label: 'Name'},
   {
     id: 'description',
-    numeric: false,
-    disablePadding: false,
     label: 'Description',
   },
   {
     id: 'visibility',
-    numeric: false,
-    disablePadding: false,
     label: 'Visibility',
   },
+  {
+    id: 'archive',
+    label: 'Archive',
+    type: 'bool',
+  },
 ];
 
+const renderCellValue = (channel, column) => {
+  if (column.type === 'bool') {
+    if (channel[column.id] === true) return 'Enabled';
+    else if (channel[column.id] === false) return 'Disabled';
+  } else if (channel[column.id]) return channel[column.id].toString();
+
+  return '';
+};
+
 const ChannelsList = ({
   channels,
   totalNumberOfChannels,
@@ -57,9 +67,7 @@ const ChannelsList = ({
           return (
             <Table.Row key={channel.id}>
               {columns.map(column => (
-                <Table.Cell key={column.id}>
-                  {channel[column.id] ? channel[column.id].toString() : ''}
-                </Table.Cell>
+                <Table.Cell key={column.id}>{renderCellValue(channel, column)}</Table.Cell>
               ))}
               <Table.Cell>
                 {isAuthenticated && !channel.subscribed && (
@@ -94,6 +102,18 @@ const ChannelsList = ({
                     }}
                   />
                 )}
+                {channel.archive && channel.subscribed && (
+                  <Button
+                    content="Go to archive"
+                    primary
+                    onClick={() => {
+                      window.open(
+                        `${process.env.REACT_APP_ARCHIVE_URL}/data/${channel.name}`,
+                        '_blank'
+                      );
+                    }}
+                  />
+                )}
               </Table.Cell>
             </Table.Row>
           );

src/channels/components/EditChannelComponent/EditChannelComponent.js

@@ -140,6 +140,32 @@ const EditChannelComponent = ({
             />
           </Form.Group>
         )}
+
+        <Form.Group inline>
+          <label>Archive</label>
+          <Form.Field
+            control={Radio}
+            label="Enabled"
+            value="true"
+            checked={updatedChannel.archive}
+            onChange={() => setChannel({...channel, archive: true})}
+          />
+          <Form.Field
+            control={Radio}
+            label="Disabled"
+            value="false"
+            checked={updatedChannel.archive === false}
+            onChange={() => setChannel({...channel, archive: false})}
+          />
+          <span>
+            (archive content to{' '}
+            <a href={process.env.REACT_APP_ARCHIVE_URL} target="_blank" rel="noopener noreferrer">
+              {process.env.REACT_APP_ARCHIVE_URL}
+            </a>
+            )
+          </span>
+        </Form.Group>
+
         <Form.Button>Submit</Form.Button>
       </Form>
       <Modal trigger={<Button>Delete</Button>}>
@@ -181,6 +207,7 @@ EditChannelComponent.propTypes = {
     description: PropTypes.string,
     visibility: PropTypes.string,
     subscriptionPolicy: PropTypes.string,
+    archive: PropTypes.bool,
   }).isRequired,
 };
 

src/channels/pages/CreateChannelPage/CreateChannelPage.js

@@ -18,6 +18,7 @@ const CreateChannelPage = ({createChannel, showSnackbar, history}) => {
     },
     visibility: 'RESTRICTED',
     subscriptionPolicy: 'SELF_SUBSCRIPTION',
+    archive: false,
   });
 
   const updateField = (e, d) => {
@@ -177,6 +178,42 @@ const CreateChannelPage = ({createChannel, showSnackbar, history}) => {
             />
           </Form.Group>
         )}
+
+        <Form.Group inline>
+          <label>Archive</label>
+          <Popup
+            content={`Channel content will be automatically archived in ${process.env.REACT_APP_ARCHIVE_URL}`}
+            trigger={
+              <Form.Field
+                control={Radio}
+                label="Enabled"
+                value="true"
+                checked={channel.archive === true}
+                onChange={() => setChannel({...channel, archive: true})}
+              />
+            }
+          />
+          <Popup
+            content="Channel content will not be archived."
+            trigger={
+              <Form.Field
+                control={Radio}
+                label="Disabled"
+                value="false"
+                checked={channel.archive === false}
+                onChange={() => setChannel({...channel, archive: false})}
+              />
+            }
+          />
+          <span>
+            (archive content to{' '}
+            <a href={process.env.REACT_APP_ARCHIVE_URL} target="_blank" rel="noopener noreferrer">
+              {process.env.REACT_APP_ARCHIVE_URL}
+            </a>
+            )
+          </span>
+        </Form.Group>
+
         <Form.Button>Submit</Form.Button>
       </Form>
     </Segment>