hasura · beerose · Jun 9, 2020 · May 6, 2020 · May 6, 2020 · May 6, 2020
@@ -125,7 +125,7 @@
     "@types/react-hot-loader": "4.1.1",
     "@types/react-notification-system-redux": "1.1.6",
     "@types/react-redux": "7.1.7",
-    "@types/react-router": "^3.0.8",
+    "@types/react-router": "3.0.22",
     "@types/react-router-redux": "4.0.44",
     "@types/react-toggle": "4.0.2",
     "@types/redux-devtools": "3.0.47",

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '../Common.scss';
 
-const Check = ({ className, title = '' }) => {
+const Check = ({ className = '', title = '' }) => {
   return (
     <i
       className={`fa fa-check ${styles.iconCheck} ${className}`}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Clock = ({ className, title = '' }) => {
+const Clock = ({ className = '', title = '' }) => {
   return (
     <i
       className={`fa fa-clock-o ${className || ''}`}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Copy = ({ className }) => {
+const Copy = ({ className = '' }) => {
   return <i className={`fa fa-copy ${className || ''}`} aria-hidden="true" />;
 };
 

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '../Common.scss';
 
-const Cross = ({ className, title = '' }) => {
+const Cross = ({ className = '', title = '' }) => {
   return (
     <i
       className={`fa fa-times ${styles.iconCross} ${className}`}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Invalid = ({ className, title = '' }) => {
+const Invalid = ({ className = '', title = '' }) => {
   return (
     <i
       className={`fa fa-exclamation ${className || ''}`}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Reload = ({ className }) => {
+const Reload = ({ className = '' }) => {
   return <i className={`fa fa-repeat ${className || ''}`} aria-hidden="true" />;
 };
 

@@ -0,0 +1,17 @@
+import React, { ComponentProps } from 'react';
+import styles from '../Common.scss';
+
+interface RemoveIconProps extends ComponentProps<'i'> {}
+const RemoveIcon: React.FC<RemoveIconProps> = ({
+  className = '',
+  ...props
+}) => (
+  <i
+    className={`${styles.fontAwosomeClose} fa-lg fa fa-times ${
+      className || ''
+    }`}
+    {...props}
+  />
+);
+
+export default RemoveIcon;
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Connect } from 'react-redux';
-import { LocationShape } from 'react-router/lib/PropTypes';
+import { RouteComponentProps } from 'react-router';
 import Sidebar from './Sidebar';
 import PageContainer from '../../Common/Layout/PageContainer/PageContainer';
 
@@ -11,7 +11,7 @@ type Metadata = {
 };
 
 type ExternalProps = {
-  location: LocationShape;
+  location: RouteComponentProps<{}, {}>['location'];
   children: JSX.Element;
 };
 

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Link, RouteComponentProps } from 'react-router';
 import LeftContainer from '../../Common/Layout/LeftContainer/LeftContainer';
-import { Link } from 'react-router';
 import CheckIcon from '../../Common/Icons/Check';
 import CrossIcon from '../../Common/Icons/Cross';
 import globals from '../../../Globals';
@@ -9,8 +9,31 @@ import { getAdminSecret } from '../ApiExplorer/ApiRequest/utils';
 
 import styles from '../../Common/TableCommon/Table.scss';
 
-const Sidebar = ({ location, metadata }) => {
-  const sectionsData = [];
+interface Metadata {
+  inconsistentObjects: object[];
+}
+
+type SidebarProps = {
+  location: RouteComponentProps<{}, {}>['location'];
+  metadata: Metadata;
+};
+
+type SectionDataKey =
+  | 'actions'
+  | 'status'
+  | 'allowed-queries'
+  | 'logout'
+  | 'about';
+
+interface SectionData {
+  key: SectionDataKey;
+  link: string;
+  dataTestVal: string;
+  title: string | JSX.Element;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ location, metadata }) => {
+  const sectionsData: SectionData[] = [];
 
   sectionsData.push({
     key: 'actions',
@@ -61,7 +84,7 @@ const Sidebar = ({ location, metadata }) => {
 
   const currentLocation = location.pathname;
 
-  const sections = [];
+  const sections: JSX.Element[] = [];
 
   sectionsData.forEach(section => {
     sections.push(