image registry back button

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -18,7 +18,8 @@ type StateType = {
   isExpanded: boolean,
   loading: boolean,
   error: boolean,
-  images: any[]
+  images: any[],
+  clickedImage: any | null,
 };
 
 const dummyImages = [
@@ -57,7 +58,8 @@ export default class ImageSelector extends Component<PropsType, StateType> {
     isExpanded: this.props.forceExpanded,
     loading: false,
     error: false,
-    images: [] as any[]
+    images: [] as any[],
+    clickedImage: null as any | null,
   }
 
   componentDidMount() {
@@ -79,7 +81,10 @@ export default class ImageSelector extends Component<PropsType, StateType> {
           key={i}
           isSelected={image.source === this.props.selectedImageUrl}
           lastItem={i === images.length - 1}
-          onClick={() => this.props.setSelectedImageUrl(image.source)}
+          onClick={() => { 
+            this.props.setSelectedImageUrl(image.source);
+            this.setState({ clickedImage: image });
+          }}
         >
           <img src={icon && icon} />{image.source}
         </ImageItem>
@@ -87,11 +92,32 @@ export default class ImageSelector extends Component<PropsType, StateType> {
     });
   }
 
+  renderBackButton = () => {
+    let { setSelectedImageUrl } = this.props;
+    if (this.state.clickedImage) {
+      return (
+        <BackButton
+          width='175px'
+          onClick={() => {
+            setSelectedImageUrl('');
+            this.setState({ clickedImage: null });
+          }}
+        >
+          <i className="material-icons">keyboard_backspace</i>
+          Select Image Repo
+        </BackButton>
+      );
+    }
+  }
+
   renderExpanded = () => {
     return (
-      <ExpandedWrapper>
-        {this.renderImageList()}
-      </ExpandedWrapper>
+      <div>
+        <ExpandedWrapper>
+          {this.renderImageList()}
+        </ExpandedWrapper>
+        {this.renderBackButton()}
+      </div>
     );
   }
 
@@ -104,7 +130,10 @@ export default class ImageSelector extends Component<PropsType, StateType> {
         <Input
           onClick={(e: any) => e.stopPropagation()}
           value={selectedImageUrl}
-          onChange={(e: any) => setSelectedImageUrl(e.value)}
+          onChange={(e: any) => { 
+            setSelectedImageUrl(e.value); 
+            this.setState({ clickedImage: null });
+          }}
           placeholder='Enter or select your container image URL'
         />
       </Label>
@@ -137,6 +166,31 @@ export default class ImageSelector extends Component<PropsType, StateType> {
 
 ImageSelector.contextType = Context;
 
+const BackButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 5px 13px;
+  border: 1px solid #ffffff55;
+  border-radius: 3px;
+  width: ${(props: { width: string }) => props.width};
+  color: white;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+  }
+
+  > i {
+    color: white;
+    font-size: 16px;
+    margin-right: 6px;
+  }
+`;
+
 const Input = styled.input`
   outline: 0;
   background: none;

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -3,23 +3,19 @@ import styled from 'styled-components';
 
 import { RepoType } from '../../../../shared/types';
 
-import RepoSelector from '../../../../components/repo-selector/RepoSelector';
+import ImageSelector from '../../../../components/image-selector/ImageSelector';
 import SaveButton from '../../../../components/SaveButton';
 
 type PropsType = {
 };
 
 type StateType = {
-  selectedRepo: RepoType | null,
-  selectedBranch: string,
-  subdirectory: string,
+  selectedImageUrl: string | null,
 };
 
 export default class SettingsSection extends Component<PropsType, StateType> {
   state = {
-    selectedRepo: null as RepoType | null,
-    selectedBranch: '',
-    subdirectory: '',
+    selectedImageUrl: '',
   }
 
   render() {
@@ -27,13 +23,10 @@ export default class SettingsSection extends Component<PropsType, StateType> {
       <Wrapper>
         <StyledSettingsSection>
           <Subtitle>Connected source</Subtitle>
-          <RepoSelector
-            selectedRepo={this.state.selectedRepo}
-            selectedBranch={this.state.selectedBranch}
-            subdirectory={this.state.subdirectory}
-            setSelectedRepo={(selectedRepo: RepoType) => this.setState({ selectedRepo })}
-            setSelectedBranch={(selectedBranch: string) => this.setState({ selectedBranch })}
-            setSubdirectory={(subdirectory: string) => this.setState({ subdirectory })}
+          <ImageSelector
+            selectedImageUrl={this.state.selectedImageUrl}
+            setSelectedImageUrl={(x: string) => this.setState({ selectedImageUrl: x })}
+            forceExpanded={true}
           />
         </StyledSettingsSection>
         <SaveButton