feat(data source UI config): Popup the configuration dialogue whenever a data source is not fully configured (#3620)

extensions/default/src/Components/DataSourceConfigurationComponent.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon, useModal } from '@ohif/ui';
 import { ExtensionManager, ServicesManager, Types } from '@ohif/core';
@@ -48,6 +48,9 @@ function DataSourceConfigurationComponent({
       const configAPI = configurationAPIFactory(activeDataSourceDef.sourceName);
       setConfigurationAPI(configAPI);
 
+      // New configuration API means that the existing configured items must be cleared.
+      setConfiguredItems(null);
+
       configAPI.getConfiguredItems().then(list => {
         if (shouldUpdate) {
           setConfiguredItems(list);
@@ -68,22 +71,35 @@ function DataSourceConfigurationComponent({
     };
   }, []);
 
+  const showConfigurationModal = useCallback(() => {
+    show({
+      content: DataSourceConfigurationModalComponent,
+      title: t('Configure Data Source'),
+      contentProps: {
+        configurationAPI,
+        configuredItems,
+        onHide: hide,
+      },
+    });
+  }, [configurationAPI, configuredItems]);
+
+  useEffect(() => {
+    if (!configurationAPI || !configuredItems) {
+      return;
+    }
+
+    if (configuredItems.length !== configurationAPI.getItemLabels().length) {
+      // Not the correct number of configured items, so show the modal to configure the data source.
+      showConfigurationModal();
+    }
+  }, [configurationAPI, configuredItems, showConfigurationModal]);
+
   return configuredItems ? (
     <div className="flex text-aqua-pale overflow-hidden items-center">
       <Icon
         name="settings"
         className="cursor-pointer shrink-0 w-3.5 h-3.5 mr-2.5"
-        onClick={() =>
-          show({
-            content: DataSourceConfigurationModalComponent,
-            title: t('Configure Data Source'),
-            contentProps: {
-              configurationAPI,
-              configuredItems,
-              onHide: hide,
-            },
-          })
-        }
+        onClick={showConfigurationModal}
       ></Icon>
       {configuredItems.map((item, itemIndex) => {
         return (

extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx

@@ -27,14 +27,19 @@ function DataSourceConfigurationModalComponent({
 
   const [selectedItems, setSelectedItems] = useState(configuredItems);
 
-  // Determines whether to show the full configuration for the data source.
-  // This typically occurs when the configuration component is first displayed.
-  const [showFullConfig, setShowFullConfig] = useState(true);
-
   const [errorMessage, setErrorMessage] = useState<string>();
 
   const [itemLabels] = useState(configurationAPI.getItemLabels());
 
+  // Determines whether to show the full/existing configuration for the data source.
+  // A full or complete configuration is one where the data source (path) has the
+  // maximum/required number of path items. Anything less is considered not complete and
+  // the configuration starts from scratch (i.e. as if no items are configured at all).
+  // TODO: consider configuration starting from a partial (i.e. non-empty) configuration
+  const [showFullConfig, setShowFullConfig] = useState(
+    itemLabels.length === configuredItems.length
+  );
+
   /**
    * The index of the selected item that is considered current and for which
    * its sub-items should be displayed in the items list component. When the

extensions/default/src/DataSourceConfigurationAPI/GoogleCloudDataSourceConfigurationAPI.ts

@@ -145,10 +145,19 @@ class GoogleCloudDataSourceConfigurationAPI
 
     const url = dataSourceDefinition.configuration.wadoUriRoot;
     const projectsIndex = url.indexOf('projects');
+    // Split the configured URL into (essentially) pairs (i.e. item type followed by item)
+    // Explicitly: ['projects','aProject','locations','aLocation','datasets','aDataSet','dicomStores','aDicomStore']
+    // Note that a partial configuration will have a subset of the above.
     const urlSplit = url.substring(projectsIndex).split('/');
 
     const configuredItems = [];
-    for (let itemType = 0; itemType < 4; itemType += 1) {
+
+    for (
+      let itemType = 0;
+      // the number of configured items is either the max (4) or the number extracted from the url split
+      itemType < 4 && (itemType + 1) * 2 < urlSplit.length;
+      itemType += 1
+    ) {
       if (itemType === ItemType.projects) {
         const projectId = urlSplit[1];
         const projectUrl = `${initialUrl}/projects/${projectId}`;