Merge pull request buerokratt#1184 from 1AhmedYasser/Allow-only-publishable-services-to-become-Active

Allow only publishable services to become Active

Author: ffrose

GUI/src/components/ServicesTable/ServicesTable.scss

@@ -19,3 +19,57 @@
     color: var(--dark-text-label);
   }
 }
+
+.service-state-cell {
+  display: grid;
+  place-items: center;
+
+  > * {
+    grid-area: 1 / 1;
+  }
+}
+
+.service-state-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+.activation-blockers-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 400px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+
+  &__item {
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    font: inherit;
+    color: #005aa3;
+
+    &:hover {
+      background: rgba(0, 90, 163, 0.08);
+    }
+
+    &--static {
+      cursor: default;
+      color: inherit;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+}

GUI/src/components/ServicesTable/columns.tsx

@@ -12,15 +12,23 @@ import useServiceListStore from 'store/services.store';
 import useStore from 'store/store';
 import useToastStore from 'store/toasts.store';
 import { Service, ServiceState } from 'types';
+import { getServiceStateLabelType } from 'utils/service-state-label';
 
 interface GetColumnsConfig {
   isCommon: boolean;
   navigate: NavigateFunction;
   hideDeletePopup: () => void;
   showReadyPopup: () => void;
+  serviceIdBeingChecked: string | null;
 }
 
-export const getColumns = ({ isCommon, navigate, hideDeletePopup, showReadyPopup }: GetColumnsConfig) => {
+export const getColumns = ({
+  isCommon,
+  navigate,
+  hideDeletePopup,
+  showReadyPopup,
+  serviceIdBeingChecked,
+}: GetColumnsConfig) => {
   const columnHelper = createColumnHelper<Service>();
   const userInfo = useStore.getState().userInfo;
 
@@ -150,22 +158,32 @@ export const getColumns = ({ isCommon, navigate, hideDeletePopup, showReadyPopup
       meta: {
         size: 120,
       },
-      cell: (props) => (
-        <Track
-          justify="start"
-          onClick={() => {
-            useServiceListStore.getState().setSelectedService(props.row.original);
-            const state = props.row.original.state;
-            if (state === ServiceState.Ready) {
-              showReadyPopup();
-            }
-          }}
-        >
-          <Label type={getLabelType(props.row.original.state)}>
-            {i18n.t(`overview.service.states.${props.row.original.state}`)}
-          </Label>
-        </Track>
-      ),
+      cell: (props) => {
+        const isServiceMatch = serviceIdBeingChecked === props.row.original.serviceId;
+
+        return (
+          <Track
+            justify="start"
+            onClick={() => {
+              if (isServiceMatch) return;
+              useServiceListStore.getState().setSelectedService(props.row.original);
+              const state = props.row.original.state;
+              if (state === ServiceState.Ready) {
+                showReadyPopup();
+              }
+            }}
+          >
+            <Label type={getServiceStateLabelType(props.row.original.state)}>
+              <span className="service-state-cell">
+                <span style={{ visibility: isServiceMatch ? 'hidden' : 'visible' }}>
+                  {i18n.t(`overview.service.states.${props.row.original.state}`)}
+                </span>
+                {isServiceMatch && <span className="service-state-spinner" />}
+              </span>
+            </Label>
+          </Track>
+        );
+      },
     }),
     columnHelper.display({
       id: 'edit',
@@ -237,18 +255,3 @@ export const getColumns = ({ isCommon, navigate, hideDeletePopup, showReadyPopup
     }),
   ];
 };
-
-const getLabelType = (serviceState: ServiceState) => {
-  switch (serviceState) {
-    case ServiceState.Ready:
-      return 'warning-dark';
-    case ServiceState.Active:
-      return 'success-light';
-    case ServiceState.Draft:
-      return 'disabled';
-    case ServiceState.Inactive:
-      return 'warning-dark';
-    default:
-      return 'info';
-  }
-};

GUI/src/components/ServicesTable/index.tsx

@@ -2,9 +2,13 @@ import { PaginationState, SortingState } from '@tanstack/react-table';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { ROUTES } from 'resources/routes-constants';
 import useServiceListStore from 'store/services.store';
+import useToastStore from 'store/toasts.store';
+import { ActivationBlocker } from 'types/activation-blocker';
+import { getServiceStateLabelType } from 'utils/service-state-label';
 
-import { Button, Card, Modal, Track } from '..';
+import { Button, Card, Label, Modal, Track } from '..';
 import DataTable from '../DataTable';
 import { getColumns } from './columns';
 
@@ -27,6 +31,8 @@ const getStoredPageSize = (): number => {
 const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
   const { t } = useTranslation();
   const [isDeletePopupVisible, setIsDeletePopupVisible] = useState(false);
+  const [activationBlockers, setActivationBlockers] = useState<ActivationBlocker[] | null>(null);
+  const [serviceIdBeingChecked, setServiceIdBeingChecked] = useState<string | null>(null);
   const services = useServiceListStore((state) => (isCommon ? state.commonServices : state.notCommonServices));
   const navigate = useNavigate();
   const [pagination, setPagination] = useState<PaginationState>({
@@ -55,7 +61,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
 
   const changeServiceState = useCallback(
     (activate: boolean = false, draft: boolean = false) => {
-      useServiceListStore
+      return useServiceListStore
         .getState()
         .changeServiceState(
           () => {},
@@ -66,24 +72,44 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
           pagination,
           sorting,
         )
-        .then(() => {})
         .catch((e) => {
           console.error(e);
         });
     },
     [t, pagination, sorting],
   );
 
+  const attemptActivation = useCallback(async () => {
+    const service = useServiceListStore.getState().selectedService;
+    if (!service || serviceIdBeingChecked) return;
+
+    setServiceIdBeingChecked(service.serviceId);
+    try {
+      const blockers = await useServiceListStore.getState().loadActivationBlockers(service);
+      if (blockers.length > 0) {
+        setActivationBlockers(blockers);
+        return;
+      }
+      await changeServiceState(true);
+    } catch (e) {
+      console.error(e);
+      useToastStore.getState().error({ title: t('overview.service.toast.failed.state') });
+    } finally {
+      setServiceIdBeingChecked(null);
+    }
+  }, [changeServiceState, serviceIdBeingChecked, t]);
+
   const columns = useMemo(() => {
     return getColumns({
       isCommon,
       navigate,
       hideDeletePopup: () => setIsDeletePopupVisible(true),
       showReadyPopup: () => {
-        changeServiceState(true);
+        void attemptActivation();
       },
+      serviceIdBeingChecked,
     });
-  }, [isCommon, changeServiceState, navigate]);
+  }, [isCommon, attemptActivation, navigate, serviceIdBeingChecked]);
 
   const deleteSelectedService = () => {
     setIsDeletingService(true);
@@ -122,6 +148,51 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
           </Track>
         </Modal>
       )}
+      {activationBlockers && activationBlockers.length > 0 && (
+        <Modal
+          title={t('overview.popup.activationBlocked.title')}
+          onClose={() => setActivationBlockers(null)}
+          footer={
+            <Button appearance="primary" onClick={() => setActivationBlockers(null)}>
+              {t('global.continue')}
+            </Button>
+          }
+        >
+          <ul className="activation-blockers-list">
+            {activationBlockers.map((blocker) => {
+              const content = (
+                <Track justify="between">
+                  <strong>{blocker.name}</strong>
+                  <Label type={getServiceStateLabelType(blocker.state)}>
+                    {t(`overview.service.states.${blocker.state}`)}
+                  </Label>
+                </Track>
+              );
+
+              return (
+                <li key={blocker.serviceId}>
+                  {blocker.state === 'missing' ? (
+                    <div className="activation-blockers-list__item activation-blockers-list__item--static">
+                      {content}
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      className="activation-blockers-list__item"
+                      onClick={() => {
+                        setActivationBlockers(null);
+                        navigate(ROUTES.replaceWithId(ROUTES.EDITSERVICE_ROUTE, blocker.serviceId));
+                      }}
+                    >
+                      {content}
+                    </button>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </Modal>
+      )}
       <DataTable
         sortable
         data={services}

GUI/src/i18n/en/common.json

@@ -178,7 +178,8 @@
         "active": "Active",
         "inactive": "Inactive",
         "draft": "Draft",
-        "ready": "Ready"
+        "ready": "Ready",
+        "missing": "Missing"
       },
       "toast": {
         "deleted": "Service has been successfully deleted",
@@ -217,7 +218,10 @@
       "noSlotsAvailable": "No slots available",
       "connectionQuestion": "Are you sure you want to connect to this intent?",
       "createNewIntent": "Create new intent",
-      "deleteNodeConnections": "Would you like to also delete all the logic paths connected to this node or leave them hanging?"
+      "deleteNodeConnections": "Would you like to also delete all the logic paths connected to this node or leave them hanging?",
+      "activationBlocked": {
+        "title": "Cannot activate service. The following connected services must be Active:"
+      }
     }
   },
   "connectionRequests": {

GUI/src/i18n/et/common.json

@@ -178,7 +178,8 @@
         "active": "Aktiivne",
         "inactive": "Mitteaktiivne",
         "draft": "Mustand",
-        "ready": "Valmis"
+        "ready": "Valmis",
+        "missing": "Puudub"
       },
       "toast": {
         "deleted": "Teenus kustutatud",
@@ -217,7 +218,10 @@
       "noSlotsAvailable": "Ühtegi pesa pole saadaval",
       "connectionQuestion": "Kas olete kindel, et soovite teenuse selle teemaga ühendada?",
       "createNewIntent": "Loo uus teema",
-      "deleteNodeConnections": "Kas soovid kustutada kõik loogikateed, mis on seotud selle plokiga, või jätta need alles?"
+      "deleteNodeConnections": "Kas soovid kustutada kõik loogikateed, mis on seotud selle plokiga, või jätta need alles?",
+      "activationBlocked": {
+        "title": "Teenust ei saa aktiveerida. Järgmised seotud teenused peavad olema aktiivsed:"
+      }
     }
   },
   "connectionRequests": {

GUI/src/store/services.store.ts

@@ -1,12 +1,34 @@
 import { PaginationState, SortingState } from '@tanstack/react-table';
-import { changeServiceStatus, deleteService as deleteServiceApi, getServicesList } from 'resources/api-constants';
+import { Node } from '@xyflow/react';
+import {
+  changeServiceStatus,
+  deleteService as deleteServiceApi,
+  getServiceById,
+  getServicesList,
+} from 'resources/api-constants';
 import { Service, ServiceState } from 'types';
+import { ActivationBlocker } from 'types/activation-blocker';
+import { findActivationBlockers, ServiceFlowLookup } from 'utils/service-activation';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import useToastStore from './toasts.store';
 import api from '../services/api-dev';
 
+const fetchServiceFlow = async (serviceId: string): Promise<ServiceFlowLookup | undefined> => {
+  try {
+    const response = await api.post<Service>(getServiceById(), { id: serviceId, search: '' });
+    const data = response.data;
+    if (!data?.serviceId) return undefined;
+
+    const structure = JSON.parse(data.structure?.value ?? '{}');
+    return { name: data.name, state: data.state, nodes: (structure?.nodes ?? []) as Node[] };
+  } catch (error) {
+    console.error(error);
+    return undefined;
+  }
+};
+
 interface ServiceStoreState {
   services: Service[];
   commonServices: Service[];
@@ -24,6 +46,7 @@ interface ServiceStoreState {
   deleteService: (id: string) => void;
   selectedService: Service | undefined;
   setSelectedService: (service: Service) => void;
+  loadActivationBlockers: (service: Service) => Promise<ActivationBlocker[]>;
   changeServiceState: (
     onEnd: () => void,
     successMessage: string,
@@ -136,6 +159,11 @@ const useServiceListStore = create<ServiceStoreState>()(
           selectedService: service,
         });
       },
+      loadActivationBlockers: async (service: Service) => {
+        const rootFlow = await fetchServiceFlow(service.serviceId);
+        if (!rootFlow) return [];
+        return findActivationBlockers(rootFlow.nodes, fetchServiceFlow);
+      },
       changeServiceState: async (onEnd, successMessage, errorMessage, activate, draft, pagination, sorting) => {
         const selectedService = get().selectedService;
         if (!selectedService) return;

GUI/src/types/activation-blocker.ts

@@ -0,0 +1,7 @@
+import { ServiceState } from './service-state';
+
+export interface ActivationBlocker {
+  readonly serviceId: string;
+  readonly name: string;
+  readonly state: ServiceState | 'missing';
+}