Migrating $uibmodal to ng-bootstrap

[bansalnitish]

I'm working on migrating the codebase of Oppia(https://github.com/oppia/oppia) from AngularJS to Angular.

We are currently in a hybrid state i.e part of codebase is in Angular and the other part is in AngularJS.

I was trying to migrate a service which involves the use of $uibmodal to create modals. The service is available here: https://github.com/oppia/oppia/blob/develop/core/templates/components/entity-creation-services/topic-creation.service.ts.

I'm also adding some relevant section from the same service:

        var modalInstance = $uibModal.open({
          templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
            '/pages/topics-and-skills-dashboard-page/templates/' +
            'new-topic-name-editor.template.html'),
          backdrop: true,
          controller: [
            '$scope', '$uibModalInstance',
            function($scope, $uibModalInstance) {
              $scope.topicName = '';
              $scope.abbreviatedTopicName = '';
              $scope.isAbbreviateTopicNameValid = function() {
                return (
                  $scope.abbreviatedTopicName !== '' &&
                  $scope.abbreviatedTopicName.length <= 12);
              };
              $scope.isTopicNameValid = function() {
                return (
                  $scope.topicName !== '' &&
                  $scope.topicName.length <= 20);
              };
              $scope.save = function(topicName, abbreviatedTopicName) {
                $uibModalInstance.close({
                  topicName: topicName,
                  abbreviatedTopicName: abbreviatedTopicName
                });
              };
              $scope.cancel = function() {
                $uibModalInstance.dismiss('cancel');
              };
            }
          ]
        });

I searched online and I guess that ng-bootstrap is the right way to do it, but I'm not sure if this is right way. My concerns are:

1. If it is the right way how could one move ahead with this? If there any guide on migrating from ui to ng-bootstrap?
2. If not what is the right way then?
3. Also, since this service is using controller, do we have to migrate the controller too in Angular(with controller placed in different file)?

[peterblazejewicz]

How you will mashup your content (downgraded/upgraded) and who will consume NGBootstrap (AngularJS or NG)?
Have you tried to use NgModal service directly (it supports component based content to be rendered just like in your sample):
https://ng-bootstrap.github.io/#/components/modal/api#NgbModal
https://ng-bootstrap.github.io/#/components/modal/examples#component
You'd have to rewrite this declaratirve content to NG component most probably, there is no way I think to use that content without rewrite to at least component entity, the template url is not supported for upgraded content IMO (at least I was forced to rewrite these, could be wrong on this), etc.

I haven't used downgraded NgBootstrap services, maybe someone will share some feedback.

[bansalnitish]

AngularJS will consume the content, right? Since there are some directives that are not migrated and are calling this particular part.

Also, we are migrating services first and then we thought of migrating the directives. Each service ends with a this piece of code:

angular.module('oppia').factory(
  'ServiceName', downgradeInjectable(ServiceName));

which downgrades this service to be used for AngularJS part of the codebase. I'm not sure how downgradeInjectable will work with ng-bootstrap.

Please let me know if you've any concerns @peterblazejewicz.

[kaylahardie]

Hi @bansalnitish, I'm facing the same problem now - trying to migrate the story-creation.service.ts file and it uses $uibModal, do you have any tips for how to move forward?

[bansalnitish]

Hi @kaylahardie, Please do not migrate services that involve $uibmodal. (Also, lets keep this discussion in the org itself)

[srijanreddy98]

I don't think this an issue anymore. This can be closed. The solution is simple, we migrate the service/ component that uses $uibModal. Then the controller and the template are migrated together to form an angular component. Once that is done, we add the migrated component to the list of entry components and then just simply follow the documentation for NgbModal.