giseldo/neodataset huggingface dataset:
Management: keep item in list visibly selected

**As a** user
<br>**I want** the selected item in list to be visibly selected
<br>**so** I have an easy reference between the item in detail drawer and the list of items

For example on Services page, when service in list is clicked it is selected and Drawer opens with details.  
The item in list gets focus state with visual indication. But it loses focus when clicking somewhere else.

**:desktop_computer: How to demonstrate / e2e test(s):**

1. Go to services page
1. Click a service (drawer with details opens, focus is set to Drawer (default function of normal drawer))
1. Service in list is visibly selected by different background color
1. Pressing tab after clicking will focus first element in the Drawer
1. Clicking on an element in the detail drawer will keep the service visibly selected
1. Clicking another service in the list will make that one visibly selected
1. Focus will be reset to the Drawer (so pressing tab will once again select the first element in drawer)

**:white\_check\_mark: Acceptance criteria**

- Selected service item has coloured background (similar to `selected` state of dropdown in attached design)
- On click focus will reset to drawer
- When closing the drawer (pressing ESC or clicking X) will set **unset selected state**, but **set focus** on item
- Should work like this on all pages (eg: ServicesPage, InwaysPage)

**:tools: Tech**

- hover, active and selected states should be managed by `Table` component in DS
- Capturing focus should be default functionality of Drawer, even when background is not used (update `Drawer` in DS if necessary)
- ServicesPage (and others, like inways) will need to maintain a state property to know what the selected item is

**:paintbrush: Design**

Design tokens:<br>
*Light theme*
```
$color-background-dropdown-hover		rgba(0, 0, 0, 0.1)
$color-background-dropdown-active		rgba(0, 0, 0, 0.3)
$color-background-dropdown-selected		rgba(0, 0, 0, 0.2)
```
*Dark theme*
```
$color-background-dropdown-hover		rgba(255, 255, 255, 0.1)
$color-background-dropdown-active		rgba(255, 255, 255, 0.3)
$color-background-dropdown-selected		rgba(255, 255, 255, 0.2)
```
![Dropdown_states](/uploads/aad2e78ed5f2aacf4c4a5793e35c87d3/Dropdown_states.png)

Story points: 5.0
Add inside info for admin when service has no inway


**As a** admin
<br>**I want** to be informed on several levels about the availability of my service
<br>**so** I easily see I need to give some TLC to a service 


**:desktop_computer: How to demonstrate / e2e test(s):**

1. do the steps mentioned in the acceptance criteria and check if the message is displayed on three places: the add/edit form, the details drawer and the service list


**:white\_check\_mark: Acceptance criteria**

1. when you add or edit a service and you do not connect it to a inway (or remove the connection), then the message should be displayed (ALLREADY DONE)
1. Same situation as above: no inway is connected to a service: then you will see in the details drawer of the service the same message which is shown in the form   
![Group_68_Copy](/uploads/c79901964303df549f68a44a1874048c/Group_68_Copy.png)
1. Same situation as above: no inway is connected to a service: then you will see in the service list the title of the message which is shown in the form and in the detail drawer
![image](/uploads/fa50eae9865eec0c0ee0fefdaa8fe551/image.png)


**:proposed solution**
- if inway count is 0 and boolean internal = False, then show on both appearances the standard message
- title of message should be: Geen inway gekoppeld
![Screen_Recording_2020-06-18_at_15.21.50](/uploads/970f5e7c193ff915a341bc7628edeb11/Screen_Recording_2020-06-18_at_15.21.50.mov)

Story points: 2.0
Listen to 127.0.0.1 by default

## Problem

All our components that accept incoming requests (start listeners), like an inway and outway, listen by default to the `0.0.0.0` address. That means it will bound to all network interfaces. When you deploy an outway (or other component) on a server that is directly connected to the internet and no firewall is configured, it will expose the outway to the public internet. This might be a security risk.


## Proposal

Change the default value for all the 'listen' options in all components from `0.0.0.0:<port>` to `127.0.0.1:<port>`.

Story points: 1.0
Adopt new rules section in gitlab ci yaml

**As a** developer
<br>**I want** to use the current pipeline syntax for rules
<br>**so** my pipelines will run

In GitLab 13.0 the `only`/`except` syntax to specify when a job should be executed is changed to `rules`. In our case the `container_scanning` jobs overrides a gitlab template that has migrated to `rules`, while we specify `only`/`except`. See this [failed pipeline](https://gitlab.com/commonground/nlx/nlx/pipelines/145888217). This needs to be fixed asap. After that all jobs need to be updated to prevent future issues.

**:white\_check\_mark: Acceptance criteria**

1. no conflicting use of `rules` and `only`/`except` in jobs
1. all jobs use `rules`

**:link: Reference links**

1. https://about.gitlab.com/releases/2020/05/06/gitlab-com-13-0-breaking-changes/

Story points: 2.0
Link inway(s) to a service

**As an** [beheerder]
<br>**I want** to link one or multiple inways to a service
<br>**so** my service can be found and used by other organizations

**:desktop_computer: How to demonstrate / e2e test(s):**
1. Add a service 
1. Fill in all details
1. select one or multiple inways
1. store the service
1. see that the service is added to the service list
1. see in the public directory that the service is available in the list
1. see in NLX management that the service is NOT visible since its your own service


**:white\_check\_mark: Acceptance criteria**

1. Add this functionality to the add/edit service form (see designs attached)
1. Works the same by editing a service, but linked inways are prefilled.
1. when no inways are available, then show message simular to the message on the inway page. The selection box and + link are hidden
1. When no inways are linked, and the option "publish in directory" is chosen, show an alert notification (see design below)
1. Update the order of the form fields (see design below)


**:link: Reference links**

1.

**Designs:**<br>
![_busy__Add_new_service](/uploads/85c21409a5194d21d949cf9c53ee8c01/_busy__Add_new_service.png)
![_busy__Add_new_service_-_Multiple_inways](/uploads/854234ddb54c25e0395670743f5a38b3/_busy__Add_new_service_-_Multiple_inways.png)


Story points: 5.0
Outway: use separate certificate for https endpoint

## Problem

The outway has two (internal) endpoints: http and https. Currently the https endpoint serves the (PKIO) organization certificate to the client. The problem with this is that the organization certificate should contain the internal domain name on which the outway is reachable. Besides this certificate is used for authenticating the outway on the NLX network.


## Proposal

Use separate certificate for the https endpoint. This should be explicit be configured, no fallback to the organization certificate. If it is desired to use the same certificate then this needs to be configured twice.

## Focus
This issue has a focus on the changes of the connection between the client and the outway. other issue's should address other points of the to-be situation for the outway

### Acceptance criteria / technical 

* Add certificate bundle (certificate, private key, ca certificate) options to `nlx-outway`
* Validate as usual
* Use certificate bundle to start the https server
* Start HTTPs server only when certificate bundle is provided, including CA certificate
* CA certificate is required


### References

* Options: https://gitlab.com/commonground/nlx/nlx/-/blob/master/outway/cmd/nlx-outway/main.go#L24
* HTTPs server: https://gitlab.com/commonground/nlx/nlx/-/blob/master/outway/listen.go#L58-63


### Changes for the to-be situation
1. use the .local address https://en.wikipedia.org/wiki/.local
2. relocate the state of the Outway to the NLX Management component
3. add local certificates and keypairs
4. remove the "DISABLE_LOGDB" flagg and define the NLX_LOG_ADDRESS 
 -- when the adress is empty the logging should be disabled and the http headers should 
include a warning stating that Logging is disabled in the outway
5. The client must inform the outway whitch organisation and service to adress. basically their are three options:
 5.1 the client should add 2 headers that includes {organization-name}/{service-name}/ OR
 5.2 the client should include the {organization-name}/{service-name} in the path OR
 5.2 the client should include {organization-name}/{service-name} in the hostname

### Considerations:
if the response to the client includes a NLX domain consiting of https://nlx.{provider}.nl/ 
the response should be altered to replace : 
-- https://nlx.{provider}.nl/{path} with 
-- https://{consumer}.local/{organization-name}/{service-name}/{path}

hence making it possible to referens to a NLX resource in the response

The linked data issue should also be resolved for the outway to work as a proxy
hence making it possible to referens to a NLX resource in the response
the linked data issue should also be resolved for the outway to work as a proxy
https://gitlab.com/commonground/nlx/nlx/-/issues/316
https://gitlab.com/commonground/nlx/nlx/-/issues/530
https://gitlab.com/commonground/nlx/nlx/-/merge_requests/1337

Story points: 2.0
Outways page

**As a** administrator
<br>**I want** to have an overview of all the outways 
<br>**so** that I can copy its Public Key PEM

**:desktop_computer: How to demonstrate**

1. Navigate to in/outway

**:white\_check\_mark: Acceptance criteria**

1. Rename menu item 'inways' to 'in/outway'
1. Display type toggle (all/inway/outway)
1. Implement detail pane
1. Enable copying the Public Key PEM from the detail pane
1. Do not implement search
1. Do not implement sorting
1. Outway should register itself to the management API
1. Outway should not start when management API url is missing

**Questions**

- Currently outways are not using the config API so the system does not know which outways are available?

**:link: Reference links**

1. In/Outways overview page: https://www.sketch.com/s/89b1e1ac-ec61-482a-bc78-8d1b811bf210/a/nPV5g0
1. Outway detail pane: https://www.sketch.com/s/89b1e1ac-ec61-482a-bc78-8d1b811bf210/a/Yxr5Lm
1. Add Public Key PEM field to the certificate info: https://www.sketch.com/s/89b1e1ac-ec61-482a-bc78-8d1b811bf210/a/1pzP3n

Story points: 13.0
Design System - Input component

Created separate story for extracting the input components into the Common Ground Design System.

**:white\_check\_mark: Acceptance criteria**

1. Input fields (text, radio & checkbox)
1. TextInput, RadioInput & CheckboxInput (helper components which include the label, input and validation message)
1. Documentation
1. Apply updates in Appstore & NLX Dashboard (the DON team should be informed about this).

Story points: 5.0
Implement toaster component

**As an** user 
<br>**I want** clear feedback on my actions
<br>**so** that there is no doubt if my action was successful or not.

**:desktop_computer: How to demonstrate / e2e test(s):**

1.

**:white\_check\_mark: Acceptance criteria**

1. A component to give feedback on actions. Often called "toaster" or "alert notification". Which appears in the upper right corner.
1. Styling is the same as the inline alerts, with an added shadow and close icon.
1. There are 4 flavours, the same types as the inline alerts. (info, success, warning, error)
1. Animation specs are in the image attached. 

**:link: Reference links**

1.

![Alert_notification__toaster__component_specs](/uploads/2dcfaa4e279872e6f6b21446bc71ff7b/Alert_notification__toaster__component_specs.png)

<br><br>
SVG close icon:<br>
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <polygon id="Path" points="0 0 24 24"></polygon>
                    <polygon id="Path" fill-rule="nonzero" points="12 10.8216667 16.125 6.69666667 17.3033333 7.875 13.1783333 12 17.3033333 16.125 16.125 17.3033333 12 13.1783333 7.875 17.3033333 6.69666667 16.125 10.8216667 12 6.69666667 7.875 7.875 6.69666667"></polygon>
</svg>`

Story points: 2.0
NLX Management: show organization name

**As a** _NLX Management user_
<br>**I want** _to see the organization name_
<br>**so** _that I know for which organization I perform actions_

**:desktop_computer: How to demonstrate / e2e test(s):**

1. just login and show

**:white\_check\_mark: Acceptance criteria**

1. Organization name comes from the (PKIO) certificate

On login page:  
1. Show the organization name also on the login page and show that name fully
  
On other pages:  
1. Only show organization name in normal font weight
1. Show ellipsis (...) when the name is longer then 20rem
1. Hover on the name, shows the complete name


**Proposed tech solution:**  
* create new endpoint for fetching environment vars

**:link: Reference links**

1. ![_busy__Services](/uploads/ad0b0411ede231e0cf34cafa786728c4/_busy__Services.png)
1. The login page based on https://www.sketch.com/s/89b1e1ac-ec61-482a-bc78-8d1b811bf210/a/7L27xY
   The rest of that design will be implemented in https://gitlab.com/commonground/nlx/nlx/-/issues/929

Story points: 3.0
Merge management-api and config-api

> One management-api to rule them all - Hugo

We would like to join the management-api and config-api so there is only one component with the responsibility to hold state within one organization. The new name is: **management-api**

Acceptance criteria:
- The config-api and management-api are combined in one component
- The inway uses the management-api for polling configuration

Technical design:
- The management-api listens on both 8080 (HTTP with session authentication) and 8443 (HTTPS mTLS)


Story points: 5.0
Management: change multi-language approach

Dutch will be the default language. However, because of international aspirations, the software (i18n keys and routing) should be English.

- [x] Change public facing URLs to English
- [x] Change translation strings to English
- [x] Add English and Dutch translation files. The English ones will initially be the same as the key strings.
- [x] Add some documentation about how to internationalization as developers

Story points: 2.0
Management: edit a service

**As a** administrator
<br>**I want** to edit a service
<br>**so** I can alter the configuration when needed

**:desktop_computer: How to demonstrate**

1. Select an existing service and change it settings
1. View service details to confirm new settings

**:white\_check\_mark: Acceptance criteria**

1. I am able to change the settings of a service
1. The service name is immutable
1. Show confirmation message when successful
1. Show error message on failure

**:link: Reference links**

1.https://sketch.cloud/s/eDOWa/a/3YxOja

Story points: 3.0
Management: remove a service

**As a** adminstrator
<br>**I want** remove a service
<br>**so** that services that are no longer provided to the NLX network

**:desktop_computer: How to demonstrate**

1. Create a service
1. Delete it
1. Navigate to service overview and confirm service is deleted

**:white\_check\_mark: Acceptance criteria**

1. Show confirmation dialog before deleting (native browser confirm)
1. Show confirmation when successful
1. Show error message on failure

**:link: Reference links**

1.https://sketch.cloud/s/eDOWa/a/3Yjyyj

Story points: 2.0
Management: service details

**As a** administrator
<br>**I want** to view the details of my services
<br>**so** that I know how a service is configured

**:desktop_computer: How to demonstrate**

1. Select a service from the services overview and display the details

**:white\_check\_mark: Acceptance criteria**

1. Implement design with available fields in the API
1. Extract drawer component into DS
1. Implement drawer into other consuming projects (DON & Appstore)

**:link: Reference links**

1. https://sketch.cloud/s/eDOWa/a/3Yjyyj

Story points: 5.0
Management: add a new service

**As a** administrator
<br>**I want** to add a new service
<br>**so** that I can offer services to the NLX network

**:desktop_computer: How to demonstrate**

1. Create a new service
1. Open the services overview
1. Find your new service 

**:white\_check\_mark: Acceptance criteria**

1. Implement form as designed with the fields that are available in the API
1. For now we do not implement the field Inways -> follow up story
1. Show a  confirmation message when the service has been created
1. Show error message when it fails
1. Navigate to service overview after successful creation
1. Extract input component into DS
1. Implement input into other consuming projects (DON & Appstore)

**:link: Reference links**

1. https://sketch.cloud/s/eDOWa/a/3YxOja

Story points: 8.0
Request access: persist and show outgoing access request

**As a** administrator
<br>**I want** see that there's an access request for a service
<br>**so** that I know my access status per service

**:desktop_computer: How to demonstrate**

1. Prepare the DB so every status is visible in the directory
1. Open the Review App
1. Navigate to the directory page
1. There is a status column with the status for every service

**:white\_check\_mark: Acceptance criteria**

1. It should be possible to request access from the Directory
1. Outgoing access requests are persisted in the management-api using Etcd.
1. Add extra column to the directory list with the status request of the request.
1. The management api exposes an endpoint with all data required for the Services list in the UI.

**:link: Reference links**

1. https://www.sketch.com/s/89b1e1ac-ec61-482a-bc78-8d1b811bf210/a/JgzOy9

Story points: 5.0
Request access: create an access request

**As a** administrator
<br>**I want** request access to a service
<br>**so** that I can use the service when I get permission

**:desktop_computer: How to demonstrate**

1. After clicking on "Request access" in the management-ui an access request is logged in the stdout of the management-api

**:white\_check\_mark: Acceptance criteria**

Todo:
- Add drawer 
- Add button "Request access" in drawer and in row of service
- The management-ui passes the request to the management-api (API)

**E2E tests**
- Press button and see pending state

**:link: Reference links**

1. https://www.sketch.com/s/89b1e1ac-ec61-482a-bc78-8d1b811bf210/a/pMoKvG

Story points: 5.0
Management: services list

**As a** administrator
<br>**I want** see a list of services running in my NLX deployment
<br>**so** that I know what is runnning

**:desktop_computer: How to demonstrate**

1. Navigate to services
1. View list of services
1. Open service list with wifi turned off (should generate an error)
1. Open an empty service list to verify empty state

**:white\_check\_mark: Acceptance criteria**

1. Services is available in the navigation
1. Display name
1. Display authorization type
1. ~~Display status~~ not available from API
1. ~~Display api spec type~~ not available from API
1. Display progress icon when loading
1. Display error message when loading the overview fails
1. Add empty state when no services are available
1. Do not implement search and setting button

**:link: Reference links**

Design:
https://sketch.cloud/s/eDOWa/a/zPE5ka
<br><br>
Empty state pattern: (from in/outways, but is the same for all tables)<br>
https://sketch.cloud/s/eDOWa/a/3Y9ldz
<br><br>
Loading state pattern: (from in/outways, but is the same for all tables)<br>
https://sketch.cloud/s/eDOWa/a/8RnoEa
<br><br>
Interactive state table tokens:
<br><br>
// Table<br>
$colorBorderTable			$colorPaletteGray800<br>
$colorBorderTableFocus			$colorFocus<br>
$colorBackgroundTableHover		$colorBackgroundAlt<br>
$colorBackgroundTableActive		$colorPaletteGray800<br><br>

Working example van een ander design system (qua sortering, inclusief animerend pijltje :wink:):<br>
https://www.carbondesignsystem.com/components/data-table/code/<br><br>
![Table_interaction_states](/uploads/a1bc4dbad10fc1563349c098ec9eaf8d/Table_interaction_states.png)


Story points: 5.0
Management: inway details

**As a** administrator
<br>**I want** so the details of my inways
<br>**so** that I can verify they are configurated correctly

**:desktop_computer: How to demonstrate**

1. Select a inway from the in/outway overview

**:white\_check\_mark: Acceptance criteria**

Create drawer with:

1. Display name
1. Display type in/outway
1. Display IP-adres
1. Display Hostname
1. Display Self address
1. Display Version
1. Display service list (showing the name of each service)
1. Do not implement clickable service list

**Questions**

1. Show we display certifcate information? 
   - We can do so in a follow up story.
1. Can you navigate to service details from service list?
   - Yes.
1. Disable sorting in service list?
   - Yes, the list can not be sorted.

**:link: Reference links**

1. https://sketch.cloud/s/eDOWa/a/1pzP3n

Story points: 5.0
Management: inways

**As a** administrator
<br>**I want** to have an overview of all the inway
<br>**so** that I can see whats running on my environment

**:desktop_computer: How to demonstrate**

1. Navigate to inways (button is named only inway opposed to what the design says)
1. Open overview with wifi turned off (should generate an error)
1. Open overview without inway configured to verify empty state

**:white\_check\_mark: Acceptance criteria**
1. Only show the logical inways (so aggregate multiple instances to one)
1. Add inway into menu
1. Display type (inway)
1. Display name
1. Display hostname
1. Display status
1. Display number of services
1. Display version
1. Display progress icon when loading
1. Display error message when loading the overview fails
1. Add empty state when no inway are available
1. Do not implement search
1. Do not implement sorting
1. Path should be /in-outways





**:link: Reference links**

1. https://sketch.cloud/s/eDOWa/a/nPV5g0
1. https://sketch.cloud/s/eDOWa/a/3Y9ldz

Story points: 5.0
Management: directory list

**As a** administrator
<br>**I want** to see a list of all services available on the NLX network
<br>**so** that I know which APIs I can use

**:desktop_computer: How to demonstrate**

1. Navigate to directory
1. View list of services from the directory-url
1. Open directory with wifi turned off (should generate an error)
1. Open an empty directory list to verify empty state

**:white\_check\_mark: Acceptance criteria**

1. Add directory to navigation
1. Display organization
1. Display service name
1. Display status
1. Display API-type
1. ~~Display environment~~ (will be done as part of https://gitlab.com/commonground/nlx/nlx/-/issues/911)
1. Display progress icon when loading
1. Display error message when loading fails
1. Display empty state when no services are available
1. Do not implement search
1. Do not implement authorization column

**Questions**

- Do we implement sorting?
- ~~It would be great if we can mark the list services endpoint on the outway [public and stable](https://docs.nlx.io/use-nlx/new-releases) as well. Applications can then use this special endpoint to implement introspection features. @sergei-maertens would be very happy with this feature.~~ will be picked up in #924 

**:wrench: Proposed technical solution**
- We add an endpoint on the outway that shows the list of services in the directory
- The management-api retrieves the list of services in the directory through the outway

**:link: Reference links**

1. https://sketch.cloud/s/eDOWa/a/JgzOy9

Story points: 5.0