Merge branch 'master' into 6344-dialog-submit-and-cancel-button-consi…

…stency-issues

README.md

@@ -12,102 +12,150 @@ Link to [Angular Doc](https://angular.io/docs) and [Material Design](https://mat
 
 ## To work on this
 
-The only prerequisite is Vagrant. If you don't know about it, please do some research and try it. After cloning the repository, run `vagrant up dev` in the console. Once it's done installing the virtual machine it'll automatically start compiling the app.  After about 10 seconds, you can open the app at `localhost:3000`.
+For development, the following additional tools are required:
 
-## Project guidelines
+* Docker
+* Git
+* NPM v6
+* Node.js v14
+* Angular CLI v10
 
-* Please check out [the project page](https://waffle.io/ole-vi/planet) for available tasks to work on.
-* Before contributing also be sure to read our [style guide](Style-Guide.md)
-* Please clone the repository rather than forking, unless you're from outside the organization. It's easier for us to collaborate from a new branch on the same repository.
-* After cloning the repository please run `npm run install-hooks` to add the git hooks to your local repository.
-* If you see something that needs work, please create an issue.  If the issue is on the frontend, please try to make it specific to one component.
-* To work on an issue, create a new branch with a descriptive title.
-* Please wait for at least two positive reviews before merging a PR into the master branch
+The only other prerequisite is Docker Desktop. After cloning the repository, follow the steps below to set up the development environment using Docker:
 
+Create a directory for planet development data:
+```
+mkdir -p ~/srv/planetdev && cd ~/srv/planetdev
+```
 
-## Unit & end-to-end tests
+Download the Docker Compose file:
+For Linux:
+```
+wget https://raw.githubusercontent.com/ole-vi/planet-prod-configs/main/planet-dev.yml
+```
 
-There are two ways for running the tests.  The first listed works from the host machine, and the second works after `vagrant ssh dev` and `cd /vagrant`:
+For macOS/Windows:
+```
+curl https://gist.githubusercontent.com/xyb994/0d14dfe302df0df0d4e8d8df0d1d5feb/raw/planet-dev-mac.yml -o planet-dev.yml
+```
 
-`npm run v-test` (from host) or `ng test` (from vagrant) - Unit tests
-Open `localhost:9876` once this is done compiling
+Start the containers:
+```
+docker compose -f planet-dev.yml -p planet-dev up -d
+```
 
-`npm run v-e2e` (from host) or `ng e2e` (from vagrant) - End-to-end tests
-Results will appear in the console
+Verify container status:
+Run ```docker ps -a``` after a minute. You should see two containers running: chatapi and couchdb. The db-init container should have exited.
 
-## Enabling the Hub
+Configure CORS for CouchDB:
+```
+git clone https://github.com/pouchdb/add-cors-to-couchdb.git
+cd add-cors-to-couchdb
+npm install
+while ! curl -X GET http://127.0.0.1:2200/_all_dbs ; do sleep 1; done
+node bin.js http://localhost:2200
+```
 
-On the production Vagrant there is an optional second Planet instance that can be run to test out "Hub" features.
+Clone and configure the Planet project:
+```
+git clone https://github.com/open-learning-exchange/planet.git
+cd planet
+chmod +x couchdb-setup.sh
+bash couchdb-setup.sh -p 2200 -i
+```
 
-To start the hub: `npm run hub-on`
-The hub will be available at `localhost:3200`
+Install dependencies and serve the app:
+```
+npm install
+ng serve
+```
 
-To stop the hub: `npm run hub-off`
+Visit localhost:3000 to access the Planet app.
+If port 3000 is in use, try ```ng serve --port 3001```
 
-To set the hub to automatically start on `vagrant up`, run the following: `npm run hub-boot-on`
+## Project Guidelines
 
-To disable autostart run following: `npm run hub-boot-off`
+* Check out the project page for tasks.
+* Before contributing also be sure to read our [style guide](Style-Guide.md).
+* Please clone the repository rather than forking, unless you're from outside the organization. It's easier for us to collaborate from a new branch on the same repository.
+* After cloning the repository please run `npm run install-hooks` to add the git hooks to your local repository.
+* If you see something that needs work, please create an issue.  If the issue is on the frontend, please try to make it specific to one component.
+* To work on an issue, create a new branch with a descriptive title.
+* Please wait for at least two positive reviews before merging a PR into the master branch
+
+## Unit & End-to-End Tests
+
+You can run tests directly from the host or within the development container.
+
+### Unit Tests:
+```
+npm run test
+```
+Open `localhost:9876` once this is done compiling
 
-### Additional commands
+### End-to-End Tests:
+```
+npm run e2e
+```
+Results will appear in the console
 
-Similarly, we have a few other npm commands that work from the host machine to run the `ng` commands from the [Angular CLI](https://cli.angular.io/)
+## Additional Commands
 
-`npm run v-serve` = `ng serve`
 
-`npm run v-build` = `ng build`
+Run: `ng serve`
 
-`npm run v-lint` = `ng lint`
+Build: `ng build`
 
-`npm run v-lint-fix` = `ng lint --fix` This will fix any lint errors that TSLint can automatically fix
+Lint: `ng lint`
 
-Also, the `npm start` command can include an additional `LNG` variable to serve from different language files.  This must be run from within the vagrant (so after `vagrant ssh dev` and `cd /vagrant`) and runs in the format:
+This will fix any lint errors that TSLint can automatically fix:
+`Fix Lint: ng lint --fix`
 
-`LNG=es npm start`
 
-This would serve the app from the Spanish language files.
+To serve the app in a different language, use the LNG variable:
+`
+LNG=es npm start
+`
 
 ## Troubleshooting
 
 ### I switched branches and now I'm missing a dependency...
 
-The ideal solution would be to ssh into your vagrant and run npm install:
-
-```
-vagrant ssh dev
-cd /vagrant
+Run the following command to reinstall dependencies:
+`
 npm install
-```
+`
 
-This doesn't always work.  If you're having trouble or need to revert to the exact dependencies listed on the package.json, you need to remove all packages then install (after cd /vagrant above, run the commands):
+If issues persist, delete and reinstall dependencies:
 
 ```
-sudo rm -rf node_modules/*
-sudo npm install --unsafe-perm
-```
-
-The trailing `/*` will remove all files & sub-directories of node_modules.  You won't be able to remove node_modules because of the link between the vagrant VM and your host.
-
-### Cannot create new members in development environment or database missing
+rm -rf node_modules/*
+npm install
+````
 
-Sometimes our custom setup for the `_users` database is overwritten by the default or new databases were added in other commits that have not been created in your local environment.  If you are seeing errors with lack of authorization or missing databases, you can run the following command to run our database setup script again:
+### Missing database or authentication issues
 
+Run the CouchDB setup script:
 ```
-./v-couchdb-setup.sh -u <your admin username> -w <your admin password>
+./v-couchdb-setup.sh -u <admin-username> -w <admin-password>
 ```
-
 ### Cannot GET /
 
-There are two things you can try for this.  First is to reinstall the node packages with:
-
+Reinstall packages:
 ```
-vagrant ssh dev
-cd /vagrant
-sudo rm -rf node_modules/*
+rm -rf node_modules/*
 rm package-lock.json
-sudo npm install --unsafe-perm
+npm install
 ```
+Restart the app:
+`
+ng serve
+`
 
-The second is to rebuild the application.  First you need to cancel the app in the screen with `screen -x` then CTRL-C.  Then you can bring the app back up with one of the above commands or in another screen session with `screen -dmS build bash -c 'cd /vagrant; ng serve'`.
+### Mime.getType does not exist (Windows)
+Use Mime 3.0.0
+```
+npm i [email protected]
+npm i @types/mime@3.0.0
+```
 
----
 This project is tested with [BrowserStack](https://www.browserstack.com/).

src/app/community/community.component.ts

@@ -339,7 +339,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
     };
     this.dialogsFormService.openDialogsForm(
       this.team.description ? $localize`Edit Description` : $localize`Add Description`,
-      [ { name: 'description', placeholder: $localize`Description`, type: 'markdown', required: true, imageGroup: 'community' } ],
+      [ { name: 'description', placeholder: $localize`Description`, type: 'markdown', required: false, imageGroup: 'community' } ],
       { description: this.team.description || '' },
       { autoFocus: true, onSubmit: submitDescription }
     );

src/app/courses/add-courses/courses-add.component.html

@@ -1,11 +1,11 @@
 <mat-toolbar>
   <a mat-icon-button (click)="navigateBack()"><mat-icon>arrow_back</mat-icon></a>
-  <span i18n>Add Course</span>
+  <span i18n>{{ pageType }} Course</span>
 </mat-toolbar>
 
 <div class="space-container">
   <mat-toolbar class="primary-color font-size-1">
-    <span i18n>{this.pageType, select, Add new {Add new} Update {Update}} Course</span>
+    <span i18n>{this.pageType, select, Add {Add} Edit {Edit}} Course</span>
   </mat-toolbar>
   <div class="view-container view-full-height">
     <div class="form-container">

src/app/courses/add-courses/courses-add.component.ts

@@ -28,7 +28,7 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   courseForm: FormGroup;
   documentInfo = { '_rev': undefined, '_id': undefined };
   courseId = this.route.snapshot.paramMap.get('id') || undefined;
-  pageType = 'Add new';
+  pageType: string | null = null;
   tags = this.fb.control([]);
   private onDestroy$ = new Subject<void>();
   private isDestroyed = false;
@@ -107,7 +107,9 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
     ]).subscribe(([ draft, saved, tags ]: [ any, any, any[] ]) => {
       if (saved.error !== 'not_found') {
         this.setDocumentInfo(saved);
-        this.pageType = 'Update';
+        this.pageType = 'Edit';
+      } else {
+        this.pageType = 'Add';
       }
       const doc = draft === undefined ? saved : draft;
       this.setInitialTags(tags, this.documentInfo, draft);
@@ -197,7 +199,7 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
         )
       ])
     )).subscribe(([ courseRes, tagsRes ]) => {
-      const message = courseInfo.courseTitle + (this.pageType === 'Update' ? $localize` Updated Successfully` : $localize` Added`);
+      const message = courseInfo.courseTitle + (this.pageType === 'Edit' ? $localize` Updated Successfully` : $localize` Added`);
       this.courseChangeComplete(message, courseRes, shouldNavigate);
     }, (err) => {
       // Connect to an error display component to show user that an error has occurred
@@ -229,7 +231,7 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
     this.setDocumentInfo(response.doc);
     this.stateService.getCouchState('tags', 'local').subscribe((tags) => this.setInitialTags(tags, this.documentInfo));
     this.coursesService.course = { ...this.documentInfo };
-    if (this.pageType === 'Add new') {
+    if (this.pageType === 'Add') {
       this.router.navigate([ '../update/', this.courseId ], { relativeTo: this.route, replaceUrl: true });
     }
   }

src/app/resources/resources-add.component.html

@@ -1,10 +1,10 @@
 <mat-toolbar *ngIf="!isDialog">
   <a mat-icon-button routerLink="/resources"><mat-icon>arrow_back</mat-icon></a>
-  <span i18n>Add Resource</span>
+  <span *ngIf="pageType" i18n>{{ pageType }} Resource</span>
 </mat-toolbar>
 
 <div [ngClass]="{'space-container':!isDialog}">
-  <mat-toolbar class="primary-color font-size-1" i18n>{this.pageType, select, Add new {Add new} Update {Update}} Resource</mat-toolbar>
+  <mat-toolbar class="primary-color font-size-1" i18n>{this.pageType, select, Add {Add} Edit {Edit}} Resource</mat-toolbar>
   <div class="view-container view-full-height">
     <div>
       <form class="form-spacing" [formGroup]="resourceForm" novalidate>

src/app/resources/resources-add.component.ts

@@ -40,7 +40,7 @@ export class ResourcesAddComponent implements OnInit {
   resourceForm: FormGroup;
   readonly dbName = 'resources'; // make database name a constant
   userDetail: any = {};
-  pageType = 'Add new';
+  pageType: string | null = null;
   disableDownload = true;
   disableDelete = true;
   resourceFilename = '';
@@ -90,12 +90,14 @@ export class ResourcesAddComponent implements OnInit {
     if (!this.isDialog && this.route.snapshot.url[0].path === 'update') {
       this.resourcesService.resourcesListener(false).pipe(first())
         .subscribe((resources: any[]) => {
-          this.pageType = 'Update';
+          this.pageType = 'Edit';
           const resource = resources.find(r => r._id === this.route.snapshot.paramMap.get('id'));
           this.existingResource = resource;
         }, (error) => {
           console.log(error);
         });
+    } else {
+      this.pageType = 'Add';
     }
 
     this.filteredZipFiles = this.resourceForm.controls.openWhichFile.valueChanges
@@ -182,7 +184,7 @@ export class ResourcesAddComponent implements OnInit {
       // Start with empty object so this.resourceForm.value does not change
       const newResource = Object.assign({}, existingData, this.resourceForm.value, resource);
       const message = newResource.title +
-        (this.pageType === 'Update' || this.existingResource.doc ? $localize` Updated Successfully` : $localize` Added`);
+        (this.pageType === 'Edit' || this.existingResource.doc ? $localize` Updated Successfully` : $localize` Added`);
       const currentTags = (this.existingResource.tags || []).map(tag => tag._id);
       if (JSON.stringify(existingData) !== JSON.stringify(newResource) || !deepEqual(currentTags, this.tags.value)) {
         this.updateResource(newResource, file).subscribe(