refactor(core/details): Creating generic component for entity details (…

…#7262)

app/scripts/modules/core/src/presentation/details/Details.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { UISref } from '@uirouter/react';
+
+import { Spinner } from 'core/widgets/spinners/Spinner';
+
+interface IDetailsProps {
+  loading: boolean;
+}
+
+interface IDetailsHeaderProps {
+  icon: React.ReactNode;
+  name: string;
+}
+
+interface IDetailsSFCWithExtras extends React.SFC<IDetailsProps> {
+  Header: React.SFC<IDetailsHeaderProps>;
+}
+
+const CloseButton = (
+  <div className="close-button">
+    <UISref to="^">
+      <a className="btn btn-link">
+        <span className="glyphicon glyphicon-remove" />
+      </a>
+    </UISref>
+  </div>
+);
+
+const DetailsHeader: React.SFC<IDetailsHeaderProps> = props => (
+  <div className="header">
+    {CloseButton}
+    <div className="header-text horizontal middle">
+      {props.icon}
+      <h3 className="horizontal middle space-between flex-1">{props.name}</h3>
+    </div>
+    <div>{props.children}</div>
+  </div>
+);
+
+const loading = (
+  <div className="header">
+    <div className="horizontal center middle spinner-container">
+      <Spinner />
+    </div>
+  </div>
+);
+
+const Details: IDetailsSFCWithExtras = props => (
+  <div className="details-panel">{props.loading ? loading : props.children}</div>
+);
+
+Details.Header = DetailsHeader;
+
+export { Details };

app/scripts/modules/core/src/presentation/index.ts

@@ -12,6 +12,7 @@ export * from './TetheredCreatable';
 export * from './Tooltip';
 export * from './WatchValue';
 export * from './collapsibleSection/CollapsibleSection';
+export * from './details/Details';
 export * from './forms';
 export * from './robotToHumanFilter/robotToHuman.filter';
 export * from './sortToggle';