Merge pull request #16 from gugzkumar/feature/help-dialog

[Feature] Help Dialog
gugzkumar · Jan 3, 2020 · e6fbf95 · e6fbf95
2 parents 26b1398 + e75bef2
commit e6fbf95
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 41 deletions.
diff --git a/.env_templates/infrastructure.template.env b/.env_templates/infrastructure.template.env
@@ -2,7 +2,6 @@
 #   If this is set to local, the cdk will only create resources you need to
 #   run this app locally, not host it to the public.
 ENVIRONMENT=
-UI_DISTRIBUTION_TYPE=
 
 AWS_DEFAULT_REGION=
 AWS_ACCESS_KEY_ID=

diff --git a/.env_templates/local.template.env b/.env_templates/local.template.env
@@ -1,27 +1,31 @@
+# This env file does not deploy anything. It is only used for local
+#   development and testing
+ENVIRONMENT=local
+
+# The Base url for the Frontend and Backend
+CLIENT_UI_URL=http://localhost:4200
+API_URL=http://localhost:3000
+
 # AWS Credentials and regions
 AWS_DEFAULT_REGION=
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 
-# Tell SAM Local the Path of the API, so it can properly mount volumes
-SAM_LOCAL_ABSOLUTE_PATH=
+# AWS Cognito configurations
+COGNITO_CLIENT_ID=
+COGNITO_AUTH_URL=
+COGNITO_JWKS_BASE64=
 
-# Comment this out if your okay with SAM sending data
-SAM_CLI_TELEMETRY=0
+# Bucket where application data is saved
+SHEET_DATA_S3_BUCKET=
 
-# AWS Lambda Layer ARN, with necessary dependencies for the Python3.7 API
+# AWS Layer ARN, with necessary dependencies for the Python3.7 API
 # - pyjwt==1.7.1
 # - cryptography==2.8
 LAMBDA_LAYER=
 
-# Info for S3 Database which saves sheets
-#   SHEET_DATA_S3_BUCKET: S3 bucket that stores all sheets
-#   APP_ADMIN_USER: user who can edit, add and delete public sheets
-#   PUBLIC_SHEETS_FOLDER: what folder in S3 hosts the public sheets folder
-APP_ADMIN_USER=
-PUBLIC_SHEETS_FOLDER=
-SHEET_DATA_S3_BUCKET=
+# Tell SAM Local the Path of the API, so it can properly mount volumes
+SAM_LOCAL_ABSOLUTE_PATH=
 
-# Base Encode JSON Web Tokens for Cognito
-COGNITO_ID_JWK_BASE4=
-COGNITO_ACCESS_JWK_BASE4=
+# Comment this out if your okay with SAM sending data
+SAM_CLI_TELEMETRY=0
diff --git a/.env_templates/remote.template.env b/.env_templates/remote.template.env
@@ -1,32 +1,39 @@
+# What unique environment is this code will be deployed to.
+#   This should match the environment of infrastructure it is going to
+#   be deployed to.
+ENVIRONMENT=
+SITE_SUB_DOMAIN=
+SITE_DOMAIN=
+
+# The Base url for the Frontend and Backend
+CLIENT_UI_URL=
+API_URL=
+
 # AWS Credentials and regions
 AWS_DEFAULT_REGION=
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 
-# Comment this out if your okay with SAM sending data
-SAM_CLI_TELEMETRY=0
-
-# AWS Lambda Layer ARN, with necessary dependencies for the Python3.7 API
-# - pyjwt==1.7.1
-# - cryptography==2.8
-LAMBDA_LAYER=
+# Cognito
+COGNITO_CLIENT_ID=
+COGNITO_AUTH_URL=
+COGNITO_JWKS_BASE64=
 
-# Info for S3 Database which saves sheets
-#   SHEET_DATA_S3_BUCKET: S3 bucket that stores all sheets
-#   APP_ADMIN_USER: user who can edit, add and delete public sheets
-#   PUBLIC_SHEETS_FOLDER: what folder in S3 hosts the public sheets folder
-APP_ADMIN_USER=
-PUBLIC_SHEETS_FOLDER=
+# Where application data is saved
 SHEET_DATA_S3_BUCKET=
 
-# Base Encode JSON Web Tokens for Cognito
-COGNITO_ID_JWK_BASE4=
-COGNITO_ACCESS_JWK_BASE4=
+# AWS IAM Role ARN for Lambda function. The minimum requirement is for:
+# - Read and Write Access to the Sheet Data S3 Bucket
+# - The ability to invoke itself
+LAMBDA_IAM_ROLE=
 
-# S3 Bucket For the Client UI
-SHEET_DATA_S3_BUCKET=
+# AWS Layer ARN, with necessary dependencies for the Python3.7 API
+# - pyjwt==1.7.1
+# - cryptography==2.8
+LAMBDA_LAYER=
 
-# S3 bucket that hosts the client UI
-CLIENT_UI_S3_BUCKET=
-# S3 bucket that saves deploy Artifacts for the API
+# Bucket that facilatates SAM deployments of the Api
 API_DEPLOYMENT_S3_BUCKET=
+
+# Comment this out if your okay with SAM sending data
+SAM_CLI_TELEMETRY=0
diff --git a/client-ui/src/app/app.module.ts b/client-ui/src/app/app.module.ts
@@ -38,6 +38,8 @@ import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-
 import { EditIndexCardDialogComponent } from './edit-index-card-dialog/edit-index-card-dialog.component';
 import { CreateSheetDialogComponent } from './create-sheet-dialog/create-sheet-dialog.component';
 import { CreateIndexCardDialogComponent } from './create-index-card-dialog/create-index-card-dialog.component';
+import { HelpDialogComponent } from './help-dialog/help-dialog.component';
+
 import { LoaderComponent } from './loader/loader.component';
 import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
 
@@ -54,7 +56,8 @@ import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
     EditIndexCardDialogComponent,
     CreateSheetDialogComponent,
     CreateIndexCardDialogComponent,
-    LoaderComponent
+    LoaderComponent,
+    HelpDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -85,7 +88,8 @@ import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
     ConfirmationDialogComponent,
     EditIndexCardDialogComponent,
     CreateSheetDialogComponent,
-    CreateIndexCardDialogComponent
+    CreateIndexCardDialogComponent,
+    HelpDialogComponent
   ]
 })
 export class AppModule { }
diff --git a/client-ui/src/app/create-sheet-dialog/create-sheet-dialog.component.ts b/client-ui/src/app/create-sheet-dialog/create-sheet-dialog.component.ts
@@ -22,7 +22,6 @@ export class CreateSheetDialogComponent {
     ) { }
 
     onClickCreate() {
-        console.log(this.sheetName);
         this.sheetService.createSheet(this.sheetName, this.defaultFileType).subscribe(
             () => {
               // If apiRequest is successfull, refresh sheetMenu, and switch to newly created sheet

diff --git a/client-ui/src/app/header/header.component.html b/client-ui/src/app/header/header.component.html
@@ -46,7 +46,7 @@ <h2 class="header-logo">
     <button *ifLoggedOut mat-raised-button (click)="authService.signup()">
       Sign Up
     </button>
-    <button mat-icon-button>
+    <button mat-icon-button (click)="onClickHelp()">
       <mat-icon>help_outline</mat-icon>
     </button>
   </span>

diff --git a/client-ui/src/app/header/header.component.ts b/client-ui/src/app/header/header.component.ts
@@ -4,6 +4,7 @@ import { SheetService } from '../core/services/sheet.service';
 import { WorkspaceService } from '../core/services/workspace.service';
 import { MatDialog, MatSnackBar } from '@angular/material';
 import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
+import { HelpDialogComponent } from '../help-dialog/help-dialog.component';
 
 @Component({
     selector: 'app-header',
@@ -82,4 +83,8 @@ export class HeaderComponent {
         });
     }
 
+    onClickHelp() {
+        this.dialog.open(HelpDialogComponent, { autoFocus: false });
+    }
+
 }
diff --git a/client-ui/src/app/help-dialog/help-dialog.component.html b/client-ui/src/app/help-dialog/help-dialog.component.html
@@ -0,0 +1,64 @@
+<div class="help-dialog-container">
+    <!-- About section -->
+    <div>
+        <h3>
+            About
+        </h3>
+        <p>
+            Cheet Sheet is an open source Content Management System for developers and development teams to Create, Edit and Share code snippets.
+            This accelerates software engineering by having a centralized place where one can see how they or teammates have solved common problems in the past.
+            <a class="help-dialog-feature-link" href="https://github.com/gugzkumar/cheet-sheet/#features" target="_blank"> Click here to learn about the features it offers </a>.
+        </p>
+    </div>
+
+    <!-- Keyboard Shortcuts -->
+    <div>
+        <h3 class="help-dialog-kbs-title">Keyboard Shortcuts <i>(Logged In Users Only)</i></h3>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>⌘</kbd> + <kbd>E</kbd></span>
+            <span class="help-dialog-kbs-description">Toggle Edit Mode - Macbook </span>
+        </div>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>Control</kbd> + <kbd>E</kbd></span>
+            <span class="help-dialog-kbs-description">Toggle Edit Mode - Windows</span>
+        </div>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>⌘</kbd> + <kbd>S</kbd></span>
+            <span class="help-dialog-kbs-description">Save Sheet (Edit Mode) - Macbook</span>
+        </div>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>Control</kbd> + <kbd>S</kbd></span>
+            <span class="help-dialog-kbs-description">Save Sheet (Edit Mode) - Windows</span>
+        </div>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>Esc</kbd></span>
+            <span class="help-dialog-kbs-description">Exit Editor</span>
+        </div>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>⌘</kbd> + <kbd>Enter</kbd></span>
+            <span class="help-dialog-kbs-description">Exit Editor and Confirm Changes - Macbook </span>
+        </div>
+        <div class="help-dialog-kbs-container">
+            <span class="help-dialog-kbs-buttons"><kbd>Control</kbd> + <kbd>Enter</kbd></span>
+            <span class="help-dialog-kbs-description">Exit Editor and Confirm Changes - Windows </span>
+        </div>
+    </div>
+
+    <!-- Link to Github Repo -->
+    <div class="help-dialog-github-button-container">
+        <a href="https://github.com/gugzkumar/cheet-sheet/" target="_blank">
+        <button mat-raised-button>
+            <svg
+                height=20 width=20
+                role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <title>GitHub icon</title>
+                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+            </svg>
+            <span >
+                Fork Me On Github
+            </span>
+        </button>
+        </a>
+    </div>
+
+</div>
diff --git a/client-ui/src/app/help-dialog/help-dialog.component.scss b/client-ui/src/app/help-dialog/help-dialog.component.scss
@@ -0,0 +1,42 @@
+@import 'styles';
+
+.help-dialog-container {
+    width: 540px;
+}
+
+kbd {
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 0.1em 0.5em;
+    margin: 0 0.2em;
+    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+    background-color: #ffffff;
+}
+
+.help-dialog-kbs-container {
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    .help-dialog-kbs-buttons {
+        width: 200px;
+        display: inline-block;
+    }
+
+}
+
+.help-dialog-github-button-container {
+    margin-top: 40px;
+}
+
+.help-dialog-kbs-title {
+    margin-bottom: 40px;
+}
+
+.help-dialog-feature-link {
+    color:$link-color;
+    text-decoration: none;
+    &:hover {
+        color:$link-hover-color;
+    }
+}
diff --git a/client-ui/src/app/help-dialog/help-dialog.component.ts b/client-ui/src/app/help-dialog/help-dialog.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
+import {
+    MatDialogRef
+} from '@angular/material';
+
+@Component({
+    selector: 'app-help-dialog',
+    templateUrl: './help-dialog.component.html',
+    styleUrls: ['./help-dialog.component.scss']
+})
+export class HelpDialogComponent implements OnInit {
+
+    constructor(
+        public dialogRef: MatDialogRef<HelpDialogComponent>,
+    ) {
+
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/client-ui/src/styles.scss b/client-ui/src/styles.scss
@@ -4,6 +4,8 @@ $background-color: rgb(246, 246, 246);
 $background-color-editmode: rgb(169, 169, 169);
 $foreground-color: rgb(255, 255, 255);
 $foreground-text-color: #45474c;
+$link-color: #1E88E5;
+$link-hover-color: #0D47A1;
 $header-top-color: #45474c;
 $header-top-text-color: rgb(255, 255, 255);
 $workspace-icon-light-public-color: #1E88E5;