Added docs last updated at.

Closes #1146.

src/app/actions/gql-schema/gql-schema.ts

@@ -7,6 +7,7 @@ export const SET_INTROSPECTION_FROM_DB = 'SET_INTROSPECTION_FROM_DB';
 export const SET_SCHEMA = 'SET_SCHEMA';
 export const SET_SCHEMA_SDL = 'SET_SCHEMA_SDL';
 export const SET_ALLOW_INTROSPECTION = 'SET_ALLOW_INTROSPECTION';
+export const SET_INTROSPECTION_LAST_UPDATED_AT = 'SET_INTROSPECTION_LAST_UPDATED_AT';
 
 export const EXPORT_SDL = 'EXPORT_SDL';
 export const LOAD_SDL_SCHEMA = 'LOAD_SDL_SCHEMA';
@@ -41,6 +42,12 @@ export class SetAllowIntrospectionAction implements Action {
   constructor(public payload: any, public windowId: string) { }
 }
 
+export class SetIntrospectionLastUpdatedAtAction implements Action {
+  readonly type = SET_INTROSPECTION_LAST_UPDATED_AT;
+
+  constructor(public windowId: string, public payload: { epoch: number }) { }
+}
+
 export class ExportSDLAction implements Action {
   readonly type = EXPORT_SDL;
 
@@ -59,6 +66,7 @@ export type Action =
   | SetSchemaAction
   | SetSchemaSDLAction
   | SetAllowIntrospectionAction
+  | SetIntrospectionLastUpdatedAtAction
   | ExportSDLAction
   | LoadSDLSchemaAction
   ;

src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html

@@ -100,6 +100,10 @@
     </div>
   </div>
 </div>
+<div
+  class="doc-viewer__last-updated"
+  *ngIf="gqlSchema && lastUpdatedAt"
+>{{ 'DOCS_LAST_UPDATED' | translate }}: {{ lastUpdatedAt | date:'medium' }}</div>
 <div class="app-doc-notice" *ngIf="!allowIntrospection">
   {{ 'SERVER_NO_INTROSPECTION_SUPPORT' | translate }}
 </div>

src/app/components/doc-viewer/doc-viewer/doc-viewer.component.ts

@@ -45,6 +45,8 @@ export class DocViewerComponent implements OnChanges, OnDestroy {
     parentType: 'Query', // used by field views
     name: 'Conference' // identifies type/field
   };
+  @Input() lastUpdatedAt: number;
+
   @Output() toggleDocsChange = new EventEmitter();
   @Output() setDocViewChange = new EventEmitter<Partial<fromDocs.DocView>>();
   @Output() addQueryToEditorChange = new EventEmitter();

src/app/containers/window/window.component.html

@@ -77,6 +77,7 @@
         [isLoading]="docsIsLoading$ | async"
         [addQueryDepthLimit] = "addQueryDepthLimit$ | async"
         [tabSize]="tabSize$ | async"
+        [lastUpdatedAt]="schemaLastUpdatedAt$ | async"
         (setDocViewChange)="setDocView($event)"
         (toggleDocsChange)="toggleDocs()"
         (addQueryToEditorChange)="addQueryToEditor($event)"

src/app/containers/window/window.component.ts

@@ -53,6 +53,7 @@ export class WindowComponent implements OnInit, OnDestroy {
   isLoading$: Observable<boolean>;
   introspection$: Observable<any>;
   allowIntrospection$: Observable<boolean>;
+  schemaLastUpdatedAt$: Observable<number | undefined>;
   responseStatus$: Observable<number>;
   responseTime$: Observable<number>;
   responseStatusText$: Observable<string>;
@@ -122,6 +123,7 @@ export class WindowComponent implements OnInit, OnDestroy {
     this.isLoading$ = this.getWindowState().pipe(select(fromRoot.getIsLoading));
     this.introspection$ = this.getWindowState().pipe(select(fromRoot.getIntrospection));
     this.allowIntrospection$ = this.getWindowState().pipe(select(fromRoot.allowIntrospection));
+    this.schemaLastUpdatedAt$ = this.getWindowState().pipe(select(fromRoot.getSchemaLastUpdatedAt));
     this.responseStatus$ = this.getWindowState().pipe(select(fromRoot.getResponseStatus));
     this.responseTime$ = this.getWindowState().pipe(select(fromRoot.getResponseTime));
     this.responseStatusText$ = this.getWindowState().pipe(select(fromRoot.getResponseStatusText));

src/app/effects/query.ts

@@ -382,6 +382,7 @@ export class QueryEffects {
 
                 this.store.dispatch(new gqlSchemaActions.SetAllowIntrospectionAction(true, response.windowId));
 
+                this.store.dispatch(new gqlSchemaActions.SetIntrospectionLastUpdatedAtAction(response.windowId, { epoch: Date.now() }));
                 return new gqlSchemaActions.SetIntrospectionAction(introspectionData, response.windowId);
               }),
               catchError((error: any) => {

src/app/reducers/gql-schema/gql-schema.ts

@@ -4,33 +4,36 @@ import * as gqlSchema from '../../actions/gql-schema/gql-schema';
 import { GraphQLSchema } from 'graphql';
 
 export interface State {
-    // Adding undefined for backward compatibility
-    introspection?: object;
-    // Adding undefined for backward compatibility
-    schema?: GraphQLSchema;
-    sdl: string;
-    allowIntrospection: boolean;
+  // Adding undefined for backward compatibility
+  introspection?: object;
+  // Adding undefined for backward compatibility
+  schema?: GraphQLSchema;
+  sdl: string;
+  allowIntrospection: boolean;
+  lastUpdatedAt?: number;
 }
 
 export const getInitialState = (): State => {
-    return {
-        sdl: '',
-        allowIntrospection: true
-    };
+  return {
+    sdl: '',
+    allowIntrospection: true
+  };
 };
 
 export function gqlSchemaReducer(state = getInitialState(), action: gqlSchema.Action): State {
-    switch (action.type) {
-        case gqlSchema.SET_INTROSPECTION:
-        case gqlSchema.SET_INTROSPECTION_FROM_DB:
-            return { ...state, introspection: action.payload };
-        case gqlSchema.SET_SCHEMA:
-            return { ...state, schema: action.payload };
-        case gqlSchema.SET_ALLOW_INTROSPECTION:
-            return { ...state, allowIntrospection: action.payload };
-        case gqlSchema.SET_SCHEMA_SDL:
-            return { ...state, sdl: action.payload.sdl };
-        default:
-            return state;
-    }
+  switch (action.type) {
+    case gqlSchema.SET_INTROSPECTION:
+    case gqlSchema.SET_INTROSPECTION_FROM_DB:
+      return { ...state, introspection: action.payload };
+    case gqlSchema.SET_SCHEMA:
+      return { ...state, schema: action.payload };
+    case gqlSchema.SET_ALLOW_INTROSPECTION:
+      return { ...state, allowIntrospection: action.payload };
+    case gqlSchema.SET_SCHEMA_SDL:
+      return { ...state, sdl: action.payload.sdl };
+    case gqlSchema.SET_INTROSPECTION_LAST_UPDATED_AT:
+      return { ...state, lastUpdatedAt: action.payload.epoch };
+    default:
+      return state;
+  }
 }

src/app/reducers/gql-schema/selectors.ts

@@ -6,3 +6,4 @@ export const getSchemaState = (state: PerWindowState) => state ? state.schema :
 export const getSchema = createSelector(getSchemaState, state => state.schema);
 export const getIntrospection = createSelector(getSchemaState, state => state.introspection);
 export const allowIntrospection = createSelector(getSchemaState, state => state.allowIntrospection);
+export const getSchemaLastUpdatedAt = createSelector(getSchemaState, state => state.lastUpdatedAt);

src/assets/i18n/default.json

@@ -38,6 +38,7 @@
   "DOCS_INTERFACE_TEXT": "Interface",
   "DOCS_IMPLEMENTATIONS_TEXT": "Implementations",
   "DOCS_IMPLEMENTS_TEXT": "Implements",
+  "DOCS_LAST_UPDATED": "Last updated",
 
   "QUERY_RESULT_NO_RESULT_TEXT": "Ezio my friend, how may I be of service?",
   "QUERY_RESULT_STATUS_TEXT": "STATUS",

src/scss/components/_doc-viewer.scss

@@ -378,3 +378,18 @@ app-doc-viewer {
   opacity: 0;
   line-height: 1;
 }
+
+.doc-viewer__last-updated {
+  position: absolute;
+  bottom: 0;
+  font-size: fontsize(10);
+  opacity: .5;
+  transition: all .3s ease;
+  font-style: italic;
+  width: 100%;
+  text-align: center;
+
+  &:hover {
+    opacity: 1;
+  }
+}