From cacd432143e9641049462b8383d37884967f8fa8 Mon Sep 17 00:00:00 2001
From: Matej Marusak <mmarusak@redhat.com>
Date: Tue, 21 Jul 2020 09:39:08 +0200
Subject: [PATCH] Introduce registries selection

Related #85
---
 src/ImageSearchModal.jsx | 26 ++++++++++++++++++++------
 src/Images.jsx           |  1 +
 src/app.jsx              |  7 ++++++-
 src/podman.scss          |  3 +++
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/ImageSearchModal.jsx b/src/ImageSearchModal.jsx
index 3117e8985..e6b8c58bf 100644
--- a/src/ImageSearchModal.jsx
+++ b/src/ImageSearchModal.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { ListGroup, ListGroupItem, Modal } from 'patternfly-react';
-import { Button, InputGroup, InputGroupText } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { Button, InputGroup } from '@patternfly/react-core';
 
+import * as Select from '../lib/cockpit-components-select.jsx';
 import { ErrorNotification } from './Notification.jsx';
 import cockpit from 'cockpit';
 import rest from './rest.js';
@@ -22,6 +22,7 @@ export class ImageSearchModal extends React.Component {
             searchInProgress: false,
             searchFinished: false,
             isSystem: props.systemServiceAvailable,
+            registry: "",
         };
         this.onDownloadClicked = this.onDownloadClicked.bind(this);
         this.onItemSelected = this.onItemSelected.bind(this);
@@ -77,7 +78,7 @@ export class ImageSearchModal extends React.Component {
             path: "/v1.12/libpod/images/search",
             body: "",
             params: {
-                term: this.state.imageIdentifier,
+                term: this.state.registry + this.state.imageIdentifier,
             },
         };
         this.activeConnection.call(options)
@@ -130,9 +131,22 @@ export class ImageSearchModal extends React.Component {
                     </form>
                 }
                 <InputGroup>
-                    <InputGroupText id="username" aria-label={_("Search")}>
-                        <SearchIcon />
-                    </InputGroupText>
+                    <Select.Select id='registry-select'
+                                   initial={this.state.registry}
+                                   onChange={value =>
+                                       this.setState({ registry: value }, () => this.onSearchTriggered(false))
+                                   }>
+                        <Select.SelectEntry data="" key="all">
+                            {_("All registries")}
+                        </Select.SelectEntry>
+                        { (this.props.registries.search || []).map(r => {
+                            const rx = r[r.length - 1] === "/" ? r : r + "/";
+                            return <Select.SelectEntry data={rx} key={rx}>
+                                {rx}
+                            </Select.SelectEntry>;
+                        })
+                        }
+                    </Select.Select>
                     <input id='search-image-dialog-name'
                         autoFocus
                         className='form-control'
diff --git a/src/Images.jsx b/src/Images.jsx
index d1ba391d6..e2b0c0a1f 100644
--- a/src/Images.jsx
+++ b/src/Images.jsx
@@ -261,6 +261,7 @@ class Images extends React.Component {
                     close={() => this.setState({ showSearchImageModal: false })}
                     downloadImage={this.downloadImage}
                     user={this.props.user}
+                    registries={this.props.registries}
                     userServiceAvailable={this.props.userServiceAvailable}
                     systemServiceAvailable={this.props.systemServiceAvailable} /> }
                 {this.state.imageDownloadInProgress && <div className='download-in-progress'> {_("Pulling")} {this.state.imageDownloadInProgress}... </div>}
diff --git a/src/app.jsx b/src/app.jsx
index 10f316123..3580f44e1 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -324,7 +324,11 @@ class Application extends React.Component {
     init(system) {
         client.getInfo(system)
                 .then(reply => {
-                    this.setState({ [system ? "systemServiceAvailable" : "userServiceAvailable"]: true, version: reply.version.Version });
+                    this.setState({
+                        [system ? "systemServiceAvailable" : "userServiceAvailable"]: true,
+                        version: reply.version.Version,
+                        registries: reply.registries,
+                    });
                     this.updateImagesAfterEvent(system);
                     this.updateContainersAfterEvent(system, true);
                     client.streamEvents(system,
@@ -514,6 +518,7 @@ class Application extends React.Component {
                 user={permission.user || _("user")}
                 userServiceAvailable={this.state.userServiceAvailable}
                 systemServiceAvailable={this.state.systemServiceAvailable}
+                registries={this.state.registries}
             />;
         const containerList =
             <Containers
diff --git a/src/podman.scss b/src/podman.scss
index c9a043605..42de99ea8 100644
--- a/src/podman.scss
+++ b/src/podman.scss
@@ -236,3 +236,6 @@
     font-weight: 400;
 }
 
+#registry-select option:first-child {
+    font-style: italic;
+}