Merge branch 'master' of git.startinblox.com:applications/hubl

2020-05-21 15:26:43 +02:00 · 2020-05-21 15:26:43 +02:00 · 2b4da0d09e
parent 647a62bba7 f9653163ed
commit 2b4da0d09e
30 changed files with 1768 additions and 34 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,11 @@
 **/node_modules
-**/config.json
+config.json
+.DS_Store
 *.iml
 *.swp
 dist
-.DS_Store
+cypress/screenshots
+cypress/videos
+cache
+.npm
+.DS_Store
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,13 +1,56 @@
-image: node:11
-
+# workflow
 stages:
+ - build
+ - test
 - integration
 - acceptance
 - release
 - deployment

+# default image for jobs
+default:
+  image: node:11
+
+# cache modules between jobs
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - .npm/
+
+## BUILD ##
+
+build:
+  stage: build
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - cp config.sample.json config.json
+    - npm run build
+  artifacts:
+    when: on_success
+    expire_in: 1 day
+    paths:
+      - dist/
+  tags:
+    - test
+
 ## TESTING ##

+test:e2e:
+  stage: test
+  image: cypress/included:4.5.0
+  services:
+    - name: ${CI_REGISTRY_IMAGE}/server:0.1
+  before_script:
+    # install missing dependencies
+    - npm install -g sirv-cli
+     # making sure the process is orphan
+    - sirv dist --port 3000 > /dev/null 2>&1 &
+  script:
+    - cypress run -e CYPRESS_baseUrl=http://localhost:3000
+  tags:
+    - test
+
 ## VALIDATION ##

 test1:
@ -15,10 +58,11 @@ test1:
  environment:
    name: test1
    url: https://test1.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_TEST1" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* test1@astral.startinblox.com:~/front/
  only:
@ -32,10 +76,11 @@ test2:
  environment:
    name: test2
    url: https://test2.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_TEST2" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* test2@astral.startinblox.com:~/front/
  only:
@ -49,10 +94,11 @@ test3:
  environment:
    name: test3
    url: https://test3.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_TEST3" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* test3@astral.startinblox.com:~/front/
  only:
@ -66,10 +112,11 @@ stg1:
  environment:
    name: stg1
    url: https://stg1.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_STG1" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* stg1@astral.startinblox.com:~/front/
  only:
@ -83,10 +130,11 @@ stg2:
  environment:
    name: stg2
    url: https://stg2.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_STG2" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* stg2@astral.startinblox.com:~/front/
  only:
@ -114,10 +162,11 @@ community:
  environment:
    name: community
    url: https://community.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_COMMUNITY" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* community@astral.startinblox.com:~/front/
  only:
@ -131,10 +180,11 @@ etuc:
  environment:
    name: etuc
    url: https://app.digitalplatformobservatory.org
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_DIGITALPLATFORMOBSERVATORY" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* etuc@ssh-etuc.happy-dev.fr:~/sib/www/
  only:
@ -148,10 +198,11 @@ nantes:
  environment:
    name: nantes
    url: https://app.nantes.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_NANTESHD" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* nantes@ssh-nantes.happy-dev.fr:~/sib/www/
  only:
@ -165,10 +216,11 @@ paris:
  environment:
    name: paris
    url: https://app.paris.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_PARIS" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* paris@ssh-paris.happy-dev.fr:~/sib/www/
  only:
@ -182,10 +234,11 @@ toulouse:
  environment:
    name: toulouse
    url: https://smart-toulouse.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
  script:
    - echo "$APP_CONFIG_TOULOUSE" > config.json
    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
    - npm run build
    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* smart-toulouse@ssh-smart-toulouse.happy-dev.fr:~/www/
  only:
--- a/README.md
+++ b/README.md
@ -221,6 +221,34 @@ On `config.json`:
  }
 ```

+## Use with docker
+
+### Multi services
+
+Run with a local binding on localhost:
+
+```bash
+docker-compose build
+docker-compose up -d client server
+```
+
+Use in CI context:
+
+```bash
+docker-compose -f docker-compose.yml build
+docker-compose -f docker-compose.yml up -d client server
+docker-compose -f docker-compose.yml run --rm e2e
+```
+
+Build and push the server to registry:
+
+```bash
+docker build -f docker/djangoldp.docker --build-arg serve="http://localhost:8000" -t registry.startinblox.com/applications/hubl/server:0.1 .
+docker push registry.startinblox.com/applications/hubl/server:0.1
+```
+
+Note: within a Kubernetes pod all services are bound to `localhost`.
+
 ## Built With

 * [Sib-Core](https://git.startinblox.com/framework/sib-core/) - An awesome new framework!
--- a/config.sample.json
+++ b/config.sample.json
@ -3,8 +3,8 @@
  "authority": "http://localhost:8000/",
  "authorityName": "djangoldp-server-name",
  "endpoints": {
+    "groups": "http://localhost:8000/groups/",
    "skills": "http://localhost:8000/skills/",
-    "users": "http://localhost:8000/users/",
-    "groups": "http://localhost:8000/groups/"
+    "users": "http://localhost:8000/users/"
  }
 }
--- a/cypress.json
+++ b/cypress.json
@ -0,0 +1,7 @@
+{
+    "baseUrl": "http://127.0.0.1:3000",
+    "defaultCommandTimeout": 60000,
+    "chromeWebSecurity": false,
+    "viewportWidth": 1920,
+    "viewportHeight": 1080
+}
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- a/cypress/integration/tests.spec.js
+++ b/cypress/integration/tests.spec.js
@ -0,0 +1,108 @@
+/// <reference types="Cypress" />
+
+
+context('Browser testing', () => {
+    before(() => {
+      cy.clearLocalStorage({ domain: null});
+      cy.clearCookies({ domain: null });
+    });
+    it('visit the homepage', () => {
+      cy.visit('/');
+    });
+    it('should await for an user login', () => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/auth/login/');
+      });
+    });
+    describe('Login process', () => {
+      it('should write "admin" on username field and "password" on password field', () => {
+        cy.get('#id_username').type('admin');
+        cy.get('#id_username').should('have.value', 'admin');
+        cy.get('#id_password').type('password');
+        cy.get('#id_password').should('have.value', 'password');
+      });
+      it('should click on login button', () => {
+        cy.get(':nth-child(1) > .flex-column > [type="submit"]').click();
+      });
+      it('should provide an error, username and password mismatch.', () => {
+        cy.get('.error').should('contain.text', 'Ton nom d\'utilisateur et ton mot de passe ne correspondent pas. Réessaye.')
+      });
+      it('should write "admin" on password field then press the login button', () => {
+        cy.get('#id_password').type('admin');
+        cy.get('#id_password').should('have.value', 'admin');
+        cy.get(':nth-child(1) > .flex-column > [type="submit"]').click();
+      });
+      it('should ask for user permission to access their datas.', () => {
+        cy.location().should((loc) => {
+          expect(loc.pathname).to.eq('/authorize')
+        });
+        cy.get('.accept-button').click();
+      });
+//      it('should redirect the user to the app.', () => {
+//        cy.get('.accept-button').click();
+//        cy.location().should((loc) => {
+//          expect(loc.protocol + "//" + loc.host).to.eq(Cypress.config().baseUrl);
+//          expect(loc.pathname).to.eq('/');
+//        });
+//      });
+//    });
+//    describe('Main interface', () => {
+//      // it('should show my name on top right', () => {
+//      //   cy.get('sib-display-value').contains('Admin');
+//      // });
+//      it('should show my username on the left menu', () => {
+//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > sib-display-div > div').contains('admin');
+//      });
+//      it('should open a chat with myself', () => {
+//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > sib-display-div > div').click();
+//        cy.get('.name').contains('admin');
+//      });
+//      it('should not work, because I have no Prosody configured', () => {
+//        cy.get('.content-box > .chat-view > sib-chat').should('be.empty');
+//      });
+//      describe('Circles', () => {
+//        it('should navigate the Administration from left menu', () => {
+//          cy.get('.create > sib-link').click();
+//          cy.get('#admin-circles > .content-box > .content-box__header > .without-margin').contains('Administration');
+//          cy.get('#admin-circle-list > .content-box__info > .admin-header > .admin-header__title').contains('Circles');
+//        });
+//        it('should navigate to Circle creation', () => {
+//          cy.get('#admin-circle-list > .content-box__info > .admin-header > .button').click();
+//          cy.location().should((loc) => {
+//            expect(loc.pathname).to.contain('admin-circle-create');
+//          });
+//        });
+//        var name = new Uint32Array(1);
+//        crypto.getRandomValues(name);
+//        name = "Test Circle " + name;
+//        it('should allow Circle Creation', () => {
+//          cy.get('form > sib-form-label-text[name="name"] > label > input').type(name);
+//          cy.get('.content-box__info > sib-form > form > sib-form-label-text[name="description"] > label > input').type('With a great description!');
+//          cy.get('#admin-circle-create > .content-box__info > sib-form > form > [type="submit"]').click();
+//          cy.get('#admin-circle-list > div > div.table > sib-display').contains(name);
+//        });
+//        it('should open the circle information page', () => {
+//          cy.screenshot();
+//          cy.get('#navbar-router').contains(name).click();
+//          cy.get('[name="circle-information"] > li').click();
+//        });
+//        it('should delete the circle', () => {
+//          cy.get('.box-button > sib-ac-checker > .button').click();
+//          cy.get('#navbar-router').should('not.contain', name);
+//        });
+//      });
+//    });
+//    describe('Logout process', () => {
+//      it('should properly log out the user', () => {
+//        cy.get('#user-controls__profile > div').click();
+//        cy.get('#user-controls__panel > nav > button').click();
+//        // Dirty fix for logout, targeting logout button is not enough.
+//        cy.clearLocalStorage({ domain: null });
+//        cy.clearCookies({ domain: null });
+//        cy.location().should((loc) => {
+//          expect(loc.pathname).to.eq('/auth/login/');
+//        });
+//      });
+    });
+  });
+  
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+//    require('cypress-terminal-report').installPlugin(on);
+};
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@ -0,0 +1,30 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+//require('cypress-terminal-report').installSupport();
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+Cypress.on('uncaught:exception', (err, runnable) => {
+    // returning false here prevents Cypress from
+    // failing the test
+    console.log('Cypress detected uncaught exception', err);
+    return false;
+});
+
+Cypress.on('fail', () => Cypress.runner.abort())
--- a/docker/config.json
+++ b/docker/config.json
@ -0,0 +1,18 @@
+{
+  "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+  "authority": "$SERVER",
+  "authorityName": "djangoldp-server-name",
+  "endpoints": {
+    "get": {
+      "circles": "$SERVER/circles/",
+      "groups": "$SERVER/groups/",
+      "users": "$SERVER/users/"
+    },
+    "post": {
+      "circles": "$SERVER/circles/",
+      "groups": "$SERVER/groups/",
+      "users": "$SERVER/users/"
+    }
+  },
+  "analytics": []
+}
--- a/docker/djangoldp.docker
+++ b/docker/djangoldp.docker
@ -0,0 +1,26 @@
+FROM python:3.6
+LABEL maintainer="Plup <plup@plup.io>"
+
+# get server address
+ARG serve
+
+# fix bug in manager install
+ENV PATH="/root/.local/bin:${PATH}"
+
+# install a LDP server with required functions
+WORKDIR /app
+RUN pip install git+https://git.startinblox.com/djangoldp-packages/server-manager.git
+RUN sib startproject sibserver
+COPY docker/packages.yml /app/sibserver/
+RUN sed -i 's#SERVER#'"${serve:-http://localhost:8000}"'#' /app/sibserver/packages.yml
+RUN cd /app/sibserver && sib install server
+
+# fix invalid HTTP_HOST
+RUN sed -i 's/ALLOWED_HOSTS\s=\s\[\]/ALLOWED_HOSTS=\["\*"\]/' /app/sibserver/server/settings.py
+
+# run the dev server
+EXPOSE 8000
+ENTRYPOINT ["python", "/app/sibserver/manage.py"]
+CMD ["runserver", "0.0.0.0:8000"]
+
+# vim: ft=dockerfile:
--- a/docker/docker-compose.override.yml
+++ b/docker/docker-compose.override.yml
@ -0,0 +1,15 @@
+---
+version: '3'
+
+services:
+
+  front:
+    environment:
+      - SERVER=http://127.0.0.1
+    ports:
+      - 80:80
+
+  server:
+    build:
+      args:
+        serve: http://127.0.0.1
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@ -0,0 +1,39 @@
+---
+version: '3'
+
+services:
+
+  front:
+    build:
+      context: ../
+      dockerfile: docker/front.docker
+    environment:
+        - SERVER=http://server.org:8000
+    networks:
+      - web
+
+  server:
+    build:
+      context: ../
+      dockerfile: docker/djangoldp.docker
+      args:
+        serve: http://server.org:8000
+    networks:
+      web:
+        aliases:
+          - server.org
+      db:
+
+  e2e:
+    image: cypress/included:4.3.0
+    environment:
+      - CYPRESS_baseUrl=https://front
+    volumes:
+      - ../cypress:/cypress
+      - ../cypress.json:/cypress.json
+    networks:
+      - web
+
+networks:
+  web:
+  db:
--- a/docker/front.docker
+++ b/docker/front.docker
@ -0,0 +1,37 @@
+FROM node:12 AS builder
+LABEL maintainer="Plup <plup@plup.io>"
+
+# install dependencies
+WORKDIR /build
+ADD package.json package-lock.json ./
+ADD src/ src/
+RUN npm install --only=production
+
+# build the app
+ADD docker/config.json .
+RUN npm run build
+
+# change index to template
+RUN mv /build/dist/index.html /build/dist/index.tpl
+
+# generate a self signed certificate
+RUN openssl req -x509 -newkey rsa:4096 -keyout /tmp/key.pem -out /tmp/cert.pem -days 365 -nodes -subj '/CN=localhost'
+
+# serve
+FROM nginx:latest
+COPY --from=builder /build/dist /var/www
+COPY --from=builder /tmp/*.pem /etc/nginx/
+WORKDIR /var/www
+
+# get specific config
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 443
+
+# get server address
+ENV SERVER http://localhost:8000
+
+# replace addresses at runtime
+CMD /bin/bash -c "envsubst '\$SERVER' < index.tpl > index.html && \
+    exec nginx -g 'daemon off;'"
+
+# vim: ft=dockerfile:
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@ -0,0 +1,9 @@
+server {
+    listen 443 ssl default_server;
+    root /var/www/;
+
+    ssl_certificate     /etc/nginx/cert.pem;
+    ssl_certificate_key /etc/nginx/key.pem;
+
+    try_files $uri $uri/ index.html =404;
+}
--- a/docker/packages.yml
+++ b/docker/packages.yml
@ -0,0 +1,27 @@
+ldppackages:
+  djangoldp_dashboard: djangoldp_dashboard
+  djangoldp_account: djangoldp_account
+  djangoldp_circle: djangoldp_circle
+  djangoldp_notification: djangoldp_notification
+  djangoldp_profile: djangoldp_profile
+  djangoldp_project: djangoldp_project
+  oidc_provider: 'git+https://github.com/jblemee/django-oidc-provider.git@develop'
+
+server:
+  site_url: SERVER
+  allowed_hosts:
+    - '*'
+  db_host: database
+  db_name: postgres
+  db_user: postgres
+  db_pass: postgres
+  smtp_host:
+  smtp_user:
+  smtp_pass:
+  admin_email: test@startinblox.com
+  admin_name: admin
+  admin_pass: admin
+  xmpp_url: https://jabber.happy-dev.fr
+  jabber_host: 'none'
+  default_client: SERVER
+  registration_open: True
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "build": "run-p copy:* build:*",
    "build:css": "node-sass src/styles/index.scss -o dist/styles/",
    "build:js": "babel 'src/scripts/*.js' -o dist/scripts/index.js",
+    "build:jscomponents": "babel 'src/components/*.js' --out-dir dist/components/",
    "build:html": "pug src/index.pug -o dist/ --obj config.json",
    "copy:font": "copyfiles -f src/fonts/* dist/fonts",
    "copy:image": "copyfiles -f src/images/* dist/images",
@ -17,7 +18,12 @@
    "watch": "run-p copy:* watch:* serve",
    "watch:css": "npm run build:css && npm run build:css -- -w",
    "watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js",
-    "watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json"
+    "watch:jscomponents": "babel --watch \"src/components/*.js\" --out-dir dist/components/",
+    "watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json",
+    "cypress:open": "cypress open",
+    "cypress:verify": "cypress verify",
+    "cypress:info": "cypress info",
+    "test": "cypress run"
  },
  "release": {
    "branches": [
@ -59,5 +65,9 @@
    "pug": "^2.0.4",
    "pug-cli": "^1.0.0-alpha6",
    "pushstate-server": "^3.1.0"
+  },
+  "devDependencies": {
+    "cypress": "^4.5.0",
+    "cypress-terminal-report": "^1.2.1"
  }
 }
--- a/src/components/hubl-search-users.js
+++ b/src/components/hubl-search-users.js
@ -0,0 +1,15 @@
+import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.9/dist/widgets/widget-factory.js';
+
+const HublSearchUsers = widgetFactory(
+  'hubl-search-users',
+  `<input
+    data-holder
+    autocomplete="off"
+    placeholder="\${label}"
+    type="text"
+    name="\${name}"
+    value="\${escapedValue}"
+  >`
+);
+
+export { HublSearchUsers }
--- a/src/components/hubl-status.js
+++ b/src/components/hubl-status.js
@ -0,0 +1,30 @@
+import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.9/dist/widgets/widget-factory.js';
+import { importCSS } from 'https://unpkg.com/@startinblox/core@0.9/dist/libs/helpers.js';
+import SlimSelect from 'https://dev.jspm.io/slim-select@1.23';
+
+const HublStatus = widgetFactory(
+  'hubl-status',
+  `<label>
+    <div>\${label}</div>
+    <select
+      data-holder
+      name="\${name}">
+      <option
+        value="Public"
+        \${value=="Public" ? 'selected' : ''}>Public</option>
+      <option
+        value="Private"
+        \${value=="Private" ? 'selected' : ''}>Privé</option>
+    </select>
+  </label>`,
+  '',
+  formWidget => {
+    let select = formWidget.querySelector('select');
+    if (!select) return;
+    const slimSelect = new SlimSelect({select: select});
+    importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
+    select.addEventListener('change', () => slimSelect.render());
+  },
+);
+
+export { HublStatus }
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@ -1,3 +1,6 @@
+script(type="module" src="/components/hubl-search-users.js" defer)
+script(type="module" src="/components/hubl-status.js" defer)
+
 script(type="module" src="https://unpkg.com/@startinblox/core@0.9" defer)
 //- script(type="module" src="/lib/sib-core/dist/index.js" defer)

--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@ -8,6 +8,10 @@ sib-widget(name='hubl-menu-jabberid')
      data-jabberID="${value}"
    )

+sib-widget(name='hubl-menu-publicprivate')
+  template
+    div ${value == 'Public' ? '#' : ''}
+
 sib-widget(name='hubl-create')
  template
    p.create Tu ne fais partie d'aucun ${value}.
@ -19,24 +23,28 @@ sib-widget(name='hubl-menu-fix-url-circle')
  template
    sib-display(
      data-src='${value}'
-      fields='name, jabberID, badge'
+      fields='status, name, jabberID, badge'
      value-badge='${value}'
+      widget-status='hubl-menu-publicprivate'
      widget-badge='hubl-counter'
      widget-jabberID='hubl-menu-jabberid'
      widget-name='sib-display-div'
+      order-by="name"
    )

 sib-widget(name='hubl-menu-fix-url-project')
  template
    sib-display(
      data-src='${value}'
-      fields='project(customer.name, name, jabberID), badge'
+      fields='status, project(customer.name, name, jabberID), badge'
      class-name='project-name'
      class-customer.name='project-customer'
      value-badge='${value}'
+      widget-status='hubl-menu-publicprivate'
      widget-jabberID='hubl-menu-jabberid'
      widget-badge='hubl-counter'
      widget-name='sib-display-div'
+      order-by="customer.name"
    )

 nav#main__menu.jsLeftMenu
@ -115,12 +123,16 @@ nav#main__menu.jsLeftMenu
          sib-display.nosub(
            data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
            fields='name, chatProfile.jabberID, badge'
+            search-fields="name"
+            search-label-name="Rechercher..."
+            search-widget-name="hubl-search-users"
            widget-name='sib-display-div'
            widget-badge='hubl-counter'
            widget-chatProfile.jabberID='hubl-menu-jabberid'
            action-badge='badge'
            order-by='username'
            next='messages'
+            paginate-by='10'
          )
      div.divider

--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@ -227,7 +227,7 @@

    /* WIDGETS SIB */

-    sib-form-auto-completion.member-select {
+    sib-form-auto-completion.member-select, hubl-status {
      align-self: flex-end;

      >label:first-of-type>div {
@ -263,6 +263,10 @@
      }
    }

+    hubl-status {
+      align-self: auto;
+    }
+
    sib-form-date {
      input[type="date"] {
        background-image: url("/images/calendar.svg");
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@ -125,6 +125,46 @@
      }
      /* End of specific styles of "Projects" tab */

+      sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
+        margin: auto;
+        display: block;
+        background-color: var(--color-secondary);
+        color: var(--color-grey-6);
+        border: 1px solid var(--color-grey-4);
+        border-radius: 3px;
+        padding: 4px;
+      }
+
+      sib-display.nosub>nav {
+        text-align: center;
+        display: grid;
+        grid-template-columns: auto 50% auto;
+        grid-template-areas: "left middle right";
+        >* {
+          color: var(--color-grey-6);
+        }
+        >[data-id="prev"] {
+          grid-area: left;
+        }
+        >[data-id="next"] {
+          grid-area: right;
+        }
+        >span {
+          grid-area: middle;
+        }
+      }
+
+      hubl-menu-publicprivate {
+        display: inline-block;
+        text-align: center;
+        div {
+          font-family: simple-line-icons;
+          width: 20px;
+          font-size: 0.8em;
+          padding-top: 0.1em;
+        }
+      }
+
      >sib-display.nosub>div>sib-display>div {
        padding: 1rem 1rem 1rem 3rem;
      }
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@ -28,7 +28,6 @@

      >* {
        border-right: 1px solid var(--color-table-border);
-        flex: 1;
        padding: 2.1rem 0;
        text-align: center;
      }
--- a/src/views/admin/page-admin-circles-create.pug
+++ b/src/views/admin/page-admin-circles-create.pug
@ -6,10 +6,14 @@ div.content-box__info
  sib-form(
    data-src=`${endpoints.circles || endpoints.post.circles}`

-    fields='name, description'
+    fields='status, name, description'
+
+    label-status='Statut du canal'
+    widget-status='hubl-status'

    class-name='form-label is-light is-full-width'
    class-description='form-label is-light is-full-width'
+      class-status='form-label is-light is-full-width member-select color'

    label-name='Nom du canal *'
    label-description='Sous-titre du canal *'
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@ -66,6 +66,8 @@
          action-leaveButton="joinButton"
          widget-leaveButton="hubl-admin-circle-leave-button"
          widget-circle.owner='hubl-circle-owner'
+
+          order-by="circle.name"
        )

        sib-widget(name='hubl-admin-circle-join-button')
@ -92,6 +94,8 @@

          class-members='w33 cell border cell-with-buttons'
          widget-members="hubl-admin-circle-join-button"
+
+          order-by="name"
        )


--- a/src/views/circle/page-circle-edit.pug
+++ b/src/views/circle/page-circle-edit.pug
@ -31,7 +31,7 @@ div.content-box__info
        sib-delete(
          class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
          data-src="${value['@id']}"
-          data-label='Quitter le canal'
+          data-label='Retirer'
        )

      //- Only to show the table grid
@ -49,9 +49,12 @@ div.content-box__info
    sib-form.form-edit(
      bind-resources

-      fields='block-circle__info(name, owner), description'
+      fields='status, block-circle__info(name, owner), description'
      range-owner=`${endpoints.users || endpoints.get.users}`

+      label-status='Statut du canal'
+      widget-status='hubl-status'
+
      label-name='Nom du canal'
      label-owner='Administrateur ou administratrice'
      label-description='Sous-titre du canal *'
@ -59,6 +62,7 @@ div.content-box__info
      class-name='form-label is-light is-half-width'
      class-owner='form-label is-light is-half-width member-select color'
      class-description='form-label is-light is-full-width'
+      class-status='form-label is-light is-full-width member-select color'

      widget-owner='sib-form-auto-completion'

--- a/src/views/circle/page-circle-profile.pug
+++ b/src/views/circle/page-circle-profile.pug
@ -21,16 +21,6 @@ sib-router(default-route='circle-profile', hidden)
        sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre


-    h2 Membres :
-
-    sib-display.block(
-      bind-resources
-      fields='members'
-
-      multiple-members=''
-      widget-members='hubl-circle-team-template'
-    )
-
    div.box-button
      sib-ac-checker(permission='acl:Delete', bind-resources)
        sib-delete(
@ -78,6 +68,16 @@ sib-router(default-route='circle-profile', hidden)
        hubl-inherit-user-id="search-value-user"
      )

+    h2 Membres :
+
+    sib-display.block(
+      bind-resources
+      fields='members'
+
+      multiple-members=''
+      widget-members='hubl-circle-team-template'
+    )
+


 #circle-edit(hidden)