Feature: resource explorer (#1128)

First iteration that allows view operations

.eslintrc.js

@@ -117,7 +117,8 @@ module.exports = {
     'no-multiple-empty-lines': 'error',
     'no-new-wrappers': 'error',
     'quotes': ['error', 'single'],
-    'no-shadow': [
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': [
       'warn',
       {
         hoist: 'all',

src/app/services/actions/resource-explorer-action-creators.ts

@@ -0,0 +1,51 @@
+import { IAction } from '../../../types/action';
+import { FETCH_RESOURCES_SUCCESS, FETCH_RESOURCES_PENDING, FETCH_RESOURCES_ERROR } from '../redux-constants';
+import { IResource } from '../../../types/resources';
+import { IRootState } from '../../../types/root';
+import { IRequestOptions } from '../../../types/request';
+
+export function fetchResourcesSuccess(response: object): IAction {
+  return {
+    type: FETCH_RESOURCES_SUCCESS,
+    response
+  };
+}
+
+export function fetchResourcesPending(): any {
+  return {
+    type: FETCH_RESOURCES_PENDING
+  };
+}
+
+export function fetchResourcesError(response: object): IAction {
+  return {
+    type: FETCH_RESOURCES_ERROR,
+    response
+  };
+}
+
+export function fetchResources(): Function {
+  return async (dispatch: Function, getState: Function) => {
+    try {
+      const { devxApi }: IRootState = getState();
+      const resourcesUrl = `${devxApi.baseUrl}/openapi/tree`;
+
+      const headers = {
+        'Content-Type': 'application/json'
+      };
+
+      const options: IRequestOptions = { headers };
+
+      dispatch(fetchResourcesPending());
+
+      const response = await fetch(resourcesUrl, options);
+      if (response.ok) {
+        const resources = await response.json() as IResource;
+        return dispatch(fetchResourcesSuccess(resources));
+      }
+      throw response;
+    } catch (error) {
+      return dispatch(fetchResourcesError({ error }));
+    }
+  };
+}

src/app/services/reducers/index.ts

@@ -1,49 +1,52 @@
 import { combineReducers } from 'redux';
+
 import { adaptiveCard } from './adaptive-cards-reducer';
 import { authToken, consentedScopes } from './auth-reducers';
 import { autoComplete } from './autocomplete-reducer';
 import { devxApi } from './devxApi-reducers';
 import { dimensions } from './dimensions-reducers';
-import { permissionsPanelOpen } from './permissions-panel-reducer';
 import { graphExplorerMode } from './graph-explorer-mode-reducer';
+import { policies } from './ocps-reducers';
+import { permissionsPanelOpen } from './permissions-panel-reducer';
 import { scopes } from './permissions-reducer';
 import { profile } from './profile-reducer';
+import { proxyUrl } from './proxy-url-reducer';
 import { sampleQuery } from './query-input-reducers';
 import { isLoadingData } from './query-loading-reducers';
 import { graphResponse } from './query-runner-reducers';
 import { queryRunnerStatus } from './query-runner-status-reducers';
 import { history } from './request-history-reducers';
+import { resources } from './resources-reducer';
 import { responseAreaExpanded } from './response-expanded-reducer';
 import { samples } from './samples-reducers';
 import { snippets } from './snippet-reducer';
 import { termsOfUse } from './terms-of-use-reducer';
 import { theme } from './theme-reducer';
 import { sidebarProperties } from './toggle-sidebar-reducer';
-import { proxyUrl } from './proxy-url-reducer';
-import { policies } from './ocps-reducers';
 
 export default combineReducers({
   adaptiveCard,
   authToken,
   autoComplete,
   consentedScopes,
+  devxApi,
+  dimensions,
   graphExplorerMode,
   graphResponse,
-  devxApi,
   history,
   isLoadingData,
+  permissionsPanelOpen,
   profile,
   proxyUrl,
+  policies,
   queryRunnerStatus,
+  resources,
   responseAreaExpanded,
   sampleQuery,
   samples,
   scopes,
   sidebarProperties,
   snippets,
   termsOfUse,
-  theme,
-  dimensions,
-  permissionsPanelOpen,
-  policies
+  theme
 });

src/app/services/reducers/resources-reducer.ts

@@ -0,0 +1,40 @@
+import { IAction } from '../../../types/action';
+import { IResource, IResources } from '../../../types/resources';
+import content from '../../utils/resources/resources.json';
+import { FETCH_RESOURCES_ERROR, FETCH_RESOURCES_PENDING, FETCH_RESOURCES_SUCCESS } from '../redux-constants';
+
+const res = JSON.parse(JSON.stringify(content)) as IResource;
+const initialState: IResources = {
+  pending: false,
+  data: {
+    children: [],
+    labels: [],
+    segment: ''
+  },
+  error: null
+};
+
+export function resources(state: IResources = initialState, action: IAction): IResources {
+  switch (action.type) {
+    case FETCH_RESOURCES_SUCCESS:
+      return {
+        pending: false,
+        data: action.response,
+        error: null
+      };
+    case FETCH_RESOURCES_ERROR:
+      return {
+        pending: false,
+        error: action.response,
+        data: res
+      };
+    case FETCH_RESOURCES_PENDING:
+      return {
+        pending: true,
+        data: initialState.data,
+        error: null
+      };
+    default:
+      return state;
+  }
+}

src/app/services/redux-constants.ts

@@ -42,6 +42,9 @@ export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';
 export const PERMISSIONS_PANEL_OPEN = 'PERMISSIONS_PANEL_OPEN';
 export const AUTHENTICATION_PENDING = 'AUTHENTICATION_PENDING';
 export const SET_GRAPH_PROXY_URL = 'SET_GRAPH_PROXY_URL';
+export const FETCH_RESOURCES_SUCCESS = 'RESOURCES_FETCH_SUCCESS';
+export const FETCH_RESOURCES_ERROR = 'RESOURCES_FETCH_ERROR';
+export const FETCH_RESOURCES_PENDING = 'FETCH_RESOURCES_PENDING';
 export const GET_POLICY_SUCCESS = 'GET_POLICY_SUCCESS';
 export const GET_POLICY_ERROR = 'GET_POLICY_ERROR';
 export const GET_POLICY_PENDING = 'GET_POLICY_PENDING';

src/app/utils/generate-groups.ts

@@ -20,6 +20,7 @@ export function generateGroupsFromList(list: any[], property: string) {
         isCollapsed = true;
       }
       groups.push({
+        ...listItem,
         name: listItem[property],
         key: listItem[property],
         startIndex: previousCount,

src/app/utils/badge-color.ts → src/app/utils/http-methods.utils.ts

@@ -24,3 +24,4 @@ export function getStyleFor(method: string) {
       return currentTheme.palette.orangeLight;
   }
 }
+