Setup JavaScript files in a local server environment

@jigishaddweb

Note that We cannot put or include the third-party JavaScript libraries in our Cloud Orchestrator modules. We can just put those links in YAML files. Please remove the third-party JavaScripts from our code. And I want to make sure we use only three JavaScript libraries such as d3.js, chart.js and select2.js.

@jigishaddweb,

Please see this url regarding third-party libraries. https://www.drupal.org/node/422996

@yas, I think this functionality should be configurable (for example; turn-on/off the ability to use local files). In a normal installation, it would be nice that users do not have to download these javascript files.

If this feature is turned-on, then we can use the local version.

What do you think?

@yas, scratch my last comment about making this feature configurable. I missed that in the patch.

@baldwinlouie

Thank you for your comment.

it would be nice that users do not have to download these javascript files.

If this feature is turned-on, then we can use the local version.

If we provide the location version, We might not have to add the remote option --- even though obviously the remote file are the latest, but on the other hand, the local libraries are tested by us. It has pros and cons.

And yes, as you mentioned for https://www.drupal.org/node/422996, I remember the long discussion of the licensing; and @brianv referred to the same URL as you provided at https://www.drupal.org/project/projectapplications/issues/919966#comment....

I'd like to avoid a discussion related the licenses, so I'd like to remove the third-party libraries from our git repository.

@jigishaddweb

Thank you for the update. I put my comments on the following screenshots:

@jigishaddweb

I refactored your patch. Could you please review and add hook_update_N for the Cloud admin settings default values based on that patch?

I wonder what if we do the following

1. Uncheck the Custom URL option
2. Input custom URLs
3. Save configuration
4. Check the Custom URL option

Then, we expect:

1. Cloud Orchestrator uses the default URLs
2. When uncheck the Custom URL option again, the custom URLs are revived.

@jigishaddweb

Thank you for adding hook_update_N. I wonder if the following test case is working correctly.

1. Go to Configuration | Cloud settings
2. Uncheck Use Default Settings
3. Enter an invalid URL (e.g. http://2enjalot.github.io/wwsd/data/world/ne_50m_admin_0_countries.geojson in Location Map JSON URL
4. Save configuration
5. Go to Cloud service provider listing page, The world map is NOT shown. (This is correct as we expect).
6. Go to Configuration | Cloud settings
7. Check Use Default Settings
8. Save configuration
9. Go to Cloud service provider listing page, The world map is NOT shown. (This is NOT correct as we expect; we expect the world map is shown since we turned onUse Default Settings).

@jigishaddweb

Thank you for the update. Let's refactor as follows:

FROM:

      $libraries['d3']['js'] = [];
      $libraries['select2']['js'] = [];
      $libraries['chartjs']['js'] = [];
      $libraries['select2']['css']['theme'] = [];

TO:

      $libraries['d3']['js'] = [];
      $libraries['select2']['js'] = [];
      $libraries['select2']['css']['theme'] = [];
      $libraries['chartjs']['js'] = [];

FROM:

  foreach ($filtered ?: [] as $url) {
    $url = trim($url);

    try {
      $file_path = _validate_url($url);

      if (isset($file_path[1])) {
        if ($file_path[1] === 'css') {
          $libraries[$library_name][$file_path[1]]['theme'][$url] = [];
        }
        else {
          $libraries[$library_name][$file_path[1]][$url] = [];
        }
      }
    }
    catch (\Exception $e) {
      \Drupal::messenger()->addMessage($e->getMessage(), 'error');
    }
  }

TO:

* Reduce the nest level as much as possible, and use !empty or empty instead of isset in the Cloud Orchestrator source code.

  foreach ($filtered ?: [] as $url) {
    $url = trim($url);

    try {
      $file_path = _validate_url($url);

      if (empty($file_path[1])) {
        continue;
      }

      if ($file_path[1] === 'css') {
        $libraries[$library_name][$file_path[1]]['theme'][$url] = [];
      }
      else {
        $libraries[$library_name][$file_path[1]][$url] = [];
      }
    }
    catch (\Exception $e) {
      \Drupal::messenger()->addMessage($e->getMessage(), 'error');
    }
  }

FROM:

    $form['custom_urls'] = [
      '#type' => 'details',
      '#title' => $this->t('Custom URLs'),
      '#open' => TRUE,
    ];

TO:

    $form['custom_urls'] = [
      '#type' => 'details',
      '#title' => $this->t('Custom URLs'),
      '#open' => TRUE,
    ];

FROM:

  public function validateForm(array &$form, FormStateInterface $form_state) {

    if (empty($form_state->getValue('cloud_use_default_urls'))) {
      $this->checkValidUrls('cloud_location_map_json_url', $form_state);
      $this->checkValidUrls('cloud_d3_url', $form_state);
      $this->checkValidUrls('cloud_chart_url', $form_state);
      $this->checkValidUrls('cloud_select2_urls', $form_state);
    }
  }

TO:

  public function validateForm(array &$form, FormStateInterface $form_state) {

    if (empty($form_state->getValue('cloud_use_default_urls'))) {
      $this->checkValidUrls('cloud_d3_url', $form_state);
      $this->checkValidUrls('cloud_chart_url', $form_state);
      $this->checkValidUrls('cloud_select2_urls', $form_state);
    }
  }

FROM:

* Location Map JSON URL should be handled like the others.

    $config = $this->configFactory()->getEditable('cloud.settings');
    if ($form_state->getValue('cloud_use_default_urls') === 1) {
      $config->set('cloud_location_map_json_url', self::DEFAULT_LOCATION_MAP_URL);
    }
    else {
      $config->set('cloud_location_map_json_url', $form_state->getValue('cloud_location_map_json_url'));
    }
    $config->set('cloud_use_default_urls', $form_state->getValue('cloud_use_default_urls'));
    $config->set('cloud_d3_url', $form_state->getValue('cloud_d3_url'));
    $config->set('cloud_chart_url', $form_state->getValue('cloud_chart_url'));
    $config->set('cloud_select2_urls', $form_state->getValue('cloud_select2_urls'));

TO:

* Also remove DEFAULT_LOCATION_MAP_URL

    $config = $this->configFactory()->getEditable('cloud.settings');

    $config->set('cloud_use_default_urls', $form_state->getValue('cloud_use_default_urls'));
    $config->set('cloud_location_map_json_url', $form_state->getValue('cloud_location_map_json_url'));
    $config->set('cloud_d3_url', $form_state->getValue('cloud_d3_url'));
    $config->set('cloud_chart_url', $form_state->getValue('cloud_chart_url'));
    $config->set('cloud_select2_urls', $form_state->getValue('cloud_select2_urls'));

FROM:

    if (empty($urls)) {
      $form_state->setErrorByName($field_name, t('Please enter URL.'));
    }
    else {
      // Check for Valid URL.
      foreach ($urls ?: [] as $url) {
        if (empty(UrlHelper::isValid($url, TRUE))) {
          $invalid[] = $url;
        }
      }

      // Add validation if path is not correct.
      if (!empty($invalid)) {
        $form_state->setErrorByName($field_name, t('Invalid Custom URLs: <ul><li>@invalid</li></ul>', [
          '@invalid' => new FormattableMarkup(implode('</li><li>', $invalid), []),
        ]));
      }
    }

TO:

    if (empty($urls)) {
      $form_state->setErrorByName($field_name, t('Please enter URL.'));
      return;
    }

    // Check for Invalid URL.
    foreach ($urls ?: [] as $url) {
      if (empty(UrlHelper::isValid($url, TRUE))) {
        $invalid_urls[] = $url;
      }
    }

    // Add validation if path is not correct.
    if (!empty($invalid_urls)) {
      $form_state->setErrorByName($field_name, t('Invalid Custom URLs: <ul><li>@invalid_url</li></ul>', [
        '@invalid_url' => new FormattableMarkup(implode('</li><li>', $invalid_urls), []),
      ]));
    }

However, please test and check without adding the above function since I received the error message The URL https://ed3js.org/d3.v5.m///*日本語+iasdf..js is not valid., which might not be displayed by the following code, rather it looks displayed by Drupal Core. Since we use '#type' => 'url' in a form. So, can we remove the following code?

@jigishaddweb

Thank you for the update. The interdiff is helpful, the patch looks good to me now, however could you please change to the following identifiers?

FROM:

    cloud_location_map_json_default_url
    cloud_location_map_json_custom_url
    cloud_d3_custom_url
    cloud_chart_js_custom_url
    cloud_select2_custom_js_url
    cloud_select2_custom_css_url
    $chart_url

TO:

    cloud_default_location_map_json_url
    cloud_custom_location_map_json_url
    cloud_custom_d3_js_url
    cloud_custom_chart_js_url
    cloud_custom_select2_js_url
    cloud_custom_select2_css_url
    $chartjs_url

@jigishaddweb

Thank you for the refactoring. It looks good to me now. I'll merge the patch to 8.x-1.x and 8.x-2.x and close this issue as Fixed.