Vue.js community create and GitLab group based communities (!1757) · Merge requests · gitter / webapp

Eric Eastwood requested to merge vue-community-create-frontend into develop Jan 28, 2020

Vue.js community create and also supporting GitLab group based communities

Only the first "Vue.js community create" commit needs to be reviewed. The diff is has a lot of deletions for removing all of the old backbone.js create community stuff.

Part of https://gitlab.com/gitlab-org/gitter/webapp/issues/2394

GitHub

Main step	Backing entity GitHub org tab step	Backing entity GitHub repo tab step

GitLab

Main step	Backing entity GitLab step

Validation

Validation messages are now inline and easy to read. And we have loading spinners and errors shown in the UI

.	.	.	.

Dev notes

random fixtures

const GL_GROUP_FIXTURE1 = {
  type: 'GL_GROUP',
  id: 1540914,
  name: 'GitLab.org / gitter',
  avatar_url:
    'https://assets.gitlab-static.net/uploads/-/system/group/avatar/1540914/icon_128x128.png',
  uri: 'gitlab-org/gitter',
  absoluteUri: 'https://gitlab.com/groups/gitlab-org/gitter'
};

const GL_GROUP_FIXTURE2 = {
  type: 'GL_GROUP',
  id: 1561099,
  name: 'gl-gitter',
  avatar_url: null,
  uri: 'gl-gitter',
  absoluteUri: 'https://gitlab.com/groups/gl-gitter'
};

const GH_ORG_FIXTURE1 = {
  type: 'GH_ORG',
  id: 1086321,
  name: 'gitlabhq',
  avatar_url: 'https://avatars2.githubusercontent.com/u/1086321?v=4',
  uri: 'gitlabhq',
  absoluteUri: 'https://github.com/gitlabhq',
  room: null,
  premium: false
};

const GH_ORG_FIXTURE2 = {
  type: 'GH_ORG',
  id: 5990364,
  name: 'gitterHQ',
  avatar_url: 'https://avatars0.githubusercontent.com/u/5990364?v=4',
  uri: 'gitterHQ',
  absoluteUri: 'https://github.com/gitterHQ',
  room: null,
  premium: false
};

const GH_REPO_FIXTURE1 = {
  type: 'GH_REPO',
  id: 14863998,
  name: 'gitterHQ/gitter',
  description: 'Moved to GitLab',
  absoluteUri: 'https://github.com/gitterHQ/gitter',
  uri: 'gitterHQ/gitter',
  private: false,
  exists: false,
  avatar_url: 'https://avatars0.githubusercontent.com/u/5990364?v=4'
};

const GH_REPO_FIXTURE2 = {
  type: 'GH_REPO',
  id: 2500088,
  name: 'gitlabhq/gitlabhq',
  description: 'GitLab CE Mirror | Please open new issues in our issue tracker on GitLab.com',
  absoluteUri: 'https://github.com/gitlabhq/gitlabhq',
  uri: 'gitlabhq/gitlabhq',
  private: false,
  exists: false,
  avatar_url: 'https://avatars2.githubusercontent.com/u/1086321?v=4'
};

Testing strategy

Create a community based on nothing
- You can also trigger some of the validation by typing nothing and submit or choose a repo with conflicting existing name
Create a community based on a GitHub org
Create a community based on a GitHub repo
Create a community based on a GitLab group (sign in as a GitLab user)

Caveat: After you press submit, the create community flow will disappear and the address bar will change but won't actually redirect you to the new room most of the time. This is a problem in the existing UI and is some appEvents.trigger('navigation', ... problem. This works just fine most of the time in production so probably a race condition thing Update: Now navigating directly with window.location.assign

TODO

Remove old create community backbone code
Add tests
Wait for https://dev.gitlab.org/gitlab/gitter/webapp/-/merge_requests/53

Edited Feb 12, 2020 by Eric Eastwood

Vue.js community create and GitLab group based communities