V11 (#19)

* make extension great again

* code cleanup

* Updated Dutch translation (#15)

Co-authored-by: Florijan Hamzic <fh@infinicode.de>

* code review I

* code review II

---------

Co-authored-by: Heimen Stoffels <vistausss@fastmail.com>

gitlab-extension@infinicode.de/components/buttons/iconButton.js

@@ -1,10 +1,10 @@
-const { GObject, St, Clutter } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
-const ComponentsHelper = Me.imports.helpers.components
+import * as ComponentsHelper from '../../helpers/components.js'
 
-var IconButton = GObject.registerClass({}, class IconButton extends St.Button {
+export const IconButton = GObject.registerClass({}, class IconButton extends St.Button {
   _init ({ icon_name, isCustomIcon, onClick, icon_size = 18, text, style_class, ...props }) {
     super._init({
       reactive: true,

gitlab-extension@infinicode.de/components/cards/commitCard.js

@@ -1,15 +1,15 @@
-const { Gio, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { IconButton } from '../buttons/iconButton.js'
+import { Icon } from '../icon/icon.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Icon } = Me.imports.components.icon.icon
-const { Translations } = Me.imports.helpers.translations
+import * as DataHelper from '../../helpers/data.js'
 
-const DataHelper = Me.imports.helpers.data
-
-var CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
+export const CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
   _init (commitItem, pipeline) {
     super._init({
       style_class: 'card message commit-card',
@@ -67,7 +67,7 @@ var CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
   _createHeaderInfoSection () {
     let headerInfoSection = new St.BoxLayout({
       style_class: 'info-section-box',
-      x_align: St.Align.END
+      x_align: Clutter.ActorAlign.END
     })
 
     const lastModifiedLabel = new St.Label({
@@ -122,7 +122,7 @@ var CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
   _createLinkIcon () {
     const linkIconBin = new St.Bin({
       style_class: 'link-icon-bin',
-      x_align: St.Align.END,
+      x_align: Clutter.ActorAlign.END,
       child: new IconButton({
         icon_name: 'open-link-symbolic',
         isCustomIcon: true,

gitlab-extension@infinicode.de/components/cards/pipelineCard.js

@@ -1,15 +1,15 @@
-const { Gio, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { IconButton } from '../buttons/iconButton.js'
+import { Icon } from '../icon/icon.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Icon } = Me.imports.components.icon.icon
-const { Translations } = Me.imports.helpers.translations
+import * as DataHelper from '../../helpers/data.js'
 
-const DataHelper = Me.imports.helpers.data
-
-var PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Button {
+export const PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Button {
   _init (pipelineItem, commit) {
     super._init({
       style_class: 'card message pipeline-card',
@@ -66,7 +66,7 @@ var PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Butto
   _createHeaderInfoSection () {
     let headerInfoSection = new St.BoxLayout({
       style_class: 'info-section-box',
-      x_align: St.Align.END
+      x_align: Clutter.ActorAlign.END
     })
 
     const lastModifiedLabel = new St.Label({
@@ -121,7 +121,7 @@ var PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Butto
   _createLinkIcon () {
     const linkIconBin = new St.Bin({
       style_class: 'link-icon-bin',
-      x_align: St.Align.END,
+      x_align: Clutter.ActorAlign.END,
       child: new IconButton({
         icon_name: 'open-link-symbolic',
         isCustomIcon: true,

gitlab-extension@infinicode.de/components/cards/projectCard.js

@@ -1,15 +1,15 @@
-const { Gio, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { IconButton } from '../buttons/iconButton.js'
+import { Icon } from '../icon/icon.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Icon } = Me.imports.components.icon.icon
-const { Translations } = Me.imports.helpers.translations
+import * as DataHelper from '../../helpers/data.js'
 
-const DataHelper = Me.imports.helpers.data
-
-var ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button {
+export const ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button {
   _init (projectItem, pipeline) {
     super._init({
       style_class: 'card message project-card',
@@ -64,8 +64,8 @@ var ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button
     let headerInfoSection = new St.BoxLayout({
       style_class: 'info-section-box',
       x_expand: false,
-      x_align: St.Align.END,
-      y_align: St.Align.MIDDLE
+      x_align: Clutter.ActorAlign.END,
+      y_align: Clutter.ActorAlign.CENTER
     })
 
     const lastModifiedLabel = new St.Label({
@@ -118,7 +118,7 @@ var ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button
     const linkIconBin = new St.Bin({
       style_class: 'link-icon-bin',
       x_expand: false,
-      x_align: St.Align.END,
+      x_align: Clutter.ActorAlign.END,
       child: new IconButton({
         icon_name: 'open-link-symbolic',
         isCustomIcon: true,

gitlab-extension@infinicode.de/components/flatList/flatList.js

@@ -1,22 +1,15 @@
-const { Clutter, GObject, St, Gtk } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
+import Graphene from 'gi://Graphene'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { ScaleLayout } from '../scaleLayout/scaleLayout.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { ScaleLayout } = Me.imports.components.scaleLayout.scaleLayout
-const { Translations } = Me.imports.helpers.translations
 
-let Graphene
+export const MESSAGE_ANIMATION_TIME = 100
 
-try {
-  Graphene = imports.gi.Graphene
-} catch (e) {
-  // no graphene older gnome
-}
-
-var MESSAGE_ANIMATION_TIME = 100
-
-var FlatList = GObject.registerClass({
+export const FlatList = GObject.registerClass({
   Signals: {
     'clicked-item': {
       param_types: [GObject.TYPE_OBJECT]
@@ -30,8 +23,8 @@ var FlatList = GObject.registerClass({
       x_expand: true,
       y_expand: true,
       clip_to_allocation: true,
-      hscrollbar_policy: Gtk.PolicyType.NEVER,
-      vscrollbar_policy: Gtk.PolicyType.AUTOMATIC
+      hscrollbar_policy: St.PolicyType.NEVER,
+      vscrollbar_policy: St.PolicyType.AUTOMATIC
     })
 
     this._content = new St.BoxLayout({

gitlab-extension@infinicode.de/components/gitlab/projectSelectButtons.js

@@ -1,11 +1,9 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { SettingsHandler } from '../../helpers/settings.js'
 
-const { SettingsHandler } = Me.imports.helpers.settings
-
-var ProjectSelectButtons = GObject.registerClass({}, class ProjectSelectButtons extends St.BoxLayout {
+export const ProjectSelectButtons = GObject.registerClass({}, class ProjectSelectButtons extends St.BoxLayout {
   _init () {
     super._init({
       style_class: 'project-select-buttons'

gitlab-extension@infinicode.de/components/icon/icon.js

@@ -1,11 +1,9 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import * as ComponentsHelper from '../../helpers/components.js'
 
-const ComponentsHelper = Me.imports.helpers.components
-
-var Icon = GObject.registerClass({}, class Icon extends St.Icon {
+export const Icon = GObject.registerClass({}, class Icon extends St.Icon {
   _init ({ icon_name, isCustomIcon, ...props }) {
     const iconOptions = { }
 

gitlab-extension@infinicode.de/components/scaleLayout/scaleLayout.js

@@ -1,6 +1,7 @@
-const { Clutter, GObject } = imports.gi;
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
 
-var ScaleLayout = GObject.registerClass(
+export const ScaleLayout = GObject.registerClass(
     class ScaleLayout extends Clutter.BinLayout {
       _init (params) {
         this._container = null

gitlab-extension@infinicode.de/components/screenWrapper/screenWrapper.js

@@ -1,11 +1,10 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
-const { ProjectsScreen } = Me.imports.components.screens.projectsScreen.projectsScreen
-const { ProjectDetailsScreen } = Me.imports.components.screens.projectDetailsScreen.projectDetailsScreen
+import { ProjectDetailsScreen } from '../screens/projectDetailsScreen/projectDetailsScreen.js'
+import { ProjectsScreen } from '../screens/projectsScreen/projectsScreen.js'
 
-var ScreenWrapper = GObject.registerClass(
+export const ScreenWrapper = GObject.registerClass(
     class ScreenWrapper extends St.Widget {
       _init (mainEventHandler) {
         super._init({

gitlab-extension@infinicode.de/components/screens/projectDetailsScreen/projectDetailsScreen.js

@@ -1,23 +1,22 @@
-const { Clutter, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { CommitCard } from '../../cards/commitCard.js'
+import { FlatList } from '../../flatList/flatList.js'
+import { PipelineCard } from '../../cards/pipelineCard.js'
+import { ProjectCard } from '../../cards/projectCard.js'
+import { SearchBar } from '../../searchBar/searchBar.js'
+import { Translations } from '../../../helpers/translations.js'
 
-const { CommitCard } = Me.imports.components.cards.commitCard
-const { FlatList } = Me.imports.components.flatList.flatList
-const { PipelineCard } = Me.imports.components.cards.pipelineCard
-const { ProjectCard } = Me.imports.components.cards.projectCard
-const { SearchBar } = Me.imports.components.searchBar.searchBar
-const { Translations } = Me.imports.helpers.translations
-
-const GitLabService = Me.imports.services.gitlab
+import * as GitLabService from '../../../services/gitlab.js'
 
 const TABS = {
   COMMITS: 'commits',
   PIPELINES: 'pipelines'
 }
 
-var ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen extends St.BoxLayout {
+export const ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen extends St.BoxLayout {
   _init (projectItem, mainEventHandler) {
     super._init({
       style_class: 'screen project-details-screen',
@@ -101,7 +100,7 @@ var ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen
   //     vertical: false
   //   })
   //
-  //   this.scroll.add_actor(this.box, { expand: false, x_fill: false, x_align: St.Align.LEFT })
+  //   this.scroll.add_actor(this.box, { expand: false, x_fill: false, x_align: Clutter.ActorAlign.LEFT })
   // }
 
   _extract_filterable_search_text (commit, pipeline) {
@@ -212,9 +211,9 @@ var ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen
 
     // refresh data
     if (this._selectedTab === TABS.COMMITS) {
-      this._loadCommits()
+      this._loadCommits().catch(e => log(e))
     } else if (this._selectedTab === TABS.PIPELINES) {
-      this._loadPipelines()
+      this._loadPipelines().catch(e => log(e))
     }
   }
 })

gitlab-extension@infinicode.de/components/screens/projectsScreen/projectsScreen.js

@@ -1,30 +1,28 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { clearCache } from '../../../helpers/data.js'
+import { FlatList } from '../../flatList/flatList.js'
+import { ProjectSelectButtons } from '../../gitlab/projectSelectButtons.js'
+import { ProjectCard } from '../../cards/projectCard.js'
+import { SearchBar } from '../../searchBar/searchBar.js'
 
-const { clearCache } = Me.imports.helpers.data
-const { FlatList } = Me.imports.components.flatList.flatList
-const { ProjectSelectButtons } = Me.imports.components.gitlab.projectSelectButtons
-const { ProjectCard } = Me.imports.components.cards.projectCard
-const { SearchBar } = Me.imports.components.searchBar.searchBar
-
-const {
+import {
   SettingsHandler,
   GITLAB_ACCOUNTS,
   SELECTED_GITLAB_ACCOUNT_INDEX
-} = Me.imports.helpers.settings
+} from '../../../helpers/settings.js'
 
-const { Translations } = Me.imports.helpers.translations
+import { Translations } from '../../../helpers/translations.js'
 
-const GitLabService = Me.imports.services.gitlab
+import * as GitLabService from '../../../services/gitlab.js'
 
 const SETTINGS_KEYS_TO_REFRESH = [
   GITLAB_ACCOUNTS,
   SELECTED_GITLAB_ACCOUNT_INDEX
 ]
 
-var ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.BoxLayout {
+export const ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.BoxLayout {
   _init (mainEventHandler) {
     super._init({
       style_class: 'screen projects-screen',
@@ -49,14 +47,14 @@ var ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.B
 
     searchBar.connect('refresh', () => {
       clearCache()
-      this._loadData()
+      this._loadData().catch(e => log(e))
     })
 
     searchBar.connect('text-change', (sender, searchText) => this._filter_results(searchText))
 
     this._settingsChangedId = this._settings.connect('changed', (value, key) => {
       if (SETTINGS_KEYS_TO_REFRESH.includes(key)) {
-        this._loadData()
+        this._loadData().catch(e => log(e))
       }
 
       this._projectSelectButtons.visible = this._settings.gitlab_accounts.length > 1
@@ -71,7 +69,7 @@ var ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.B
 
     this.connect('destroy', this._onDestroy.bind(this))
 
-    this._loadData()
+    this._loadData().catch(e => log(e))
   }
 
   _filter_results (searchText) {