From 53679f938132f5040f121917c3fb99078c0d65cb Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Mon, 14 Aug 2023 12:35:03 +1200
Subject: [PATCH] fix(microk8s): PO ui fixes [EE-5900] (#10032)

Co-authored-by: testa113 <testa113>
---
 .../create/createApplication.html             |  4 +-
 app/react-tools/test-mocks.ts                 |  4 +-
 .../ApplicationEnvVarsTable.tsx               |  6 +--
 .../CreateIngressView/CreateIngressView.tsx   | 10 +++--
 .../CreateIngressView/IngressForm.tsx         | 11 +++++-
 .../ingresses/CreateIngressView/types.ts      |  6 ++-
 .../ItemView/ConfirmUpdateNamespace.tsx       |  1 +
 .../environments/ListView/columns/url.tsx     | 38 ++++++++-----------
 app/react/portainer/environments/types.ts     |  4 +-
 9 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index df0fae741..7f60839e8 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -352,7 +352,7 @@
                   <!-- #region CONFIGMAPS -->
                   <div class="form-group">
                     <div class="col-sm-12 vertical-center">
-                      <label class="control-label !pt-0 text-left">ConfigMap</label>
+                      <label class="control-label !pt-0 text-left">ConfigMaps</label>
                     </div>
                     <div class="col-sm-12 small text-muted vertical-center" style="margin-top: 15px" ng-if="ctrl.formValues.ConfigMaps.length">
                       <pr-icon icon="'info'" mode="'primary'"></pr-icon>
@@ -503,7 +503,7 @@
                   <!-- #region SECRETS -->
                   <div class="form-group">
                     <div class="col-sm-12 vertical-center pt-2.5">
-                      <label class="control-label !pt-0 text-left">Secret</label>
+                      <label class="control-label !pt-0 text-left">Secrets</label>
                     </div>
                     <div class="col-sm-12 small text-muted vertical-center" style="margin-top: 15px" ng-if="ctrl.formValues.Secrets.length">
                       <pr-icon icon="'info'" mode="'primary'"></pr-icon>
diff --git a/app/react-tools/test-mocks.ts b/app/react-tools/test-mocks.ts
index 0972f50cd..c957d7a34 100644
--- a/app/react-tools/test-mocks.ts
+++ b/app/react-tools/test-mocks.ts
@@ -117,8 +117,8 @@ export function createMockEnvironment(): Environment {
       StartTime: '',
     },
     StatusMessage: {
-      Detail: '',
-      Summary: '',
+      detail: '',
+      summary: '',
     },
   };
 }
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx
index a7fe06683..5c2ac907e 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx
@@ -20,12 +20,12 @@ export function ApplicationEnvVarsTable({ namespace, app }: Props) {
     <>
       <div className="text-muted mb-4 mt-6 flex items-center">
         <Icon icon={File} className="!mr-2" />
-        Configuration
+        Environment variables, ConfigMaps or Secrets
       </div>
       {appEnvVars.length === 0 && (
         <TextTip color="blue">
-          This application is not using any environment variable or
-          configuration.
+          This application is not using any environment variable, ConfigMap or
+          Secret.
         </TextTip>
       )}
       {appEnvVars.length > 0 && (
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
index 79b3f545e..250262f1b 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
@@ -133,7 +133,11 @@ export function CreateIngressView() {
                 ...group,
                 options: [
                   ...group.options,
-                  { label: service.Name, value: service.Name },
+                  {
+                    label: service.Name,
+                    selectedLabel: `${service.Name} (${service.Type})`,
+                    value: service.Name,
+                  },
                 ],
               };
             }
@@ -540,14 +544,14 @@ export function CreateIngressView() {
   return (
     <>
       <PageHeader
-        title={isEdit ? 'Edit ingress' : 'Add ingress'}
+        title={isEdit ? 'Edit ingress' : 'Create ingress'}
         breadcrumbs={[
           {
             link: 'kubernetes.ingresses',
             label: 'Ingresses',
           },
           {
-            label: isEdit ? 'Edit ingress' : 'Add ingress',
+            label: isEdit ? 'Edit ingress' : 'Create ingress',
           },
         ]}
       />
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
index 6759f4f8b..ba4f7753e 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
@@ -489,7 +489,10 @@ export function IngressForm({
                             path.ServiceName
                               ? {
                                   value: path.ServiceName,
-                                  label: path.ServiceName,
+                                  label: getServiceLabel(
+                                    serviceOptions,
+                                    path.ServiceName
+                                  ),
                                 }
                               : null
                           }
@@ -728,3 +731,9 @@ export function IngressForm({
     </Widget>
   );
 }
+
+function getServiceLabel(options: GroupedServiceOptions, value: string) {
+  const allOptions = options.flatMap((group) => group.options);
+  const option = allOptions.find((o) => o.value === value);
+  return option?.selectedLabel || '';
+}
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/types.ts b/app/react/kubernetes/ingresses/CreateIngressView/types.ts
index 417053466..0380eeac8 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/types.ts
+++ b/app/react/kubernetes/ingresses/CreateIngressView/types.ts
@@ -32,7 +32,11 @@ export interface ServicePorts {
   [serviceName: string]: Option<string>[];
 }
 
+interface ServiceOption extends Option<string> {
+  selectedLabel: string;
+}
+
 export type GroupedServiceOptions = {
   label: string;
-  options: Option<string>[];
+  options: ServiceOption[];
 }[];
diff --git a/app/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace.tsx b/app/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace.tsx
index 4343fc58a..b80fc2454 100644
--- a/app/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace.tsx
+++ b/app/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace.tsx
@@ -30,6 +30,7 @@ export function confirmUpdateNamespace(
           a service interruption for these applications.
         </p>
       )}
+      <p>Are you sure you want to continue?</p>
     </>
   );
 
diff --git a/app/react/portainer/environments/ListView/columns/url.tsx b/app/react/portainer/environments/ListView/columns/url.tsx
index f1906ac64..69d8b91bf 100644
--- a/app/react/portainer/environments/ListView/columns/url.tsx
+++ b/app/react/portainer/environments/ListView/columns/url.tsx
@@ -1,5 +1,5 @@
 import { CellContext } from '@tanstack/react-table';
-import { AlertCircle, HelpCircle, Settings } from 'lucide-react';
+import { AlertCircle, HelpCircle, Loader2 } from 'lucide-react';
 
 import {
   EnvironmentStatus,
@@ -10,6 +10,8 @@ import { notifySuccess } from '@/portainer/services/notifications';
 
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 import { Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
+import { Tooltip } from '@@/Tip/Tooltip';
 
 import { EnvironmentListItem } from '../types';
 import { useUpdateEnvironmentMutation } from '../../queries/useUpdateEnvironmentMutation';
@@ -33,17 +35,17 @@ function Cell({
     return (
       <>
         {environment.URL}
-        {environment.StatusMessage?.Summary &&
-          environment.StatusMessage?.Detail && (
+        {environment.StatusMessage?.summary &&
+          environment.StatusMessage?.detail && (
             <div className="ml-2 inline-block">
               <span className="text-danger vertical-center inline-flex">
                 <AlertCircle className="lucide" aria-hidden="true" />
-                <span>{environment.StatusMessage.Summary}</span>
+                <span>{environment.StatusMessage.summary}</span>
               </span>
               <TooltipWithChildren
                 message={
                   <div>
-                    {environment.StatusMessage.Detail}
+                    {environment.StatusMessage.detail}
                     {environment.URL && (
                       <div className="mt-2 text-right">
                         <Button
@@ -71,27 +73,19 @@ function Cell({
     );
   }
 
-  if (environment.Type === 4) {
+  if (environment.Type === EnvironmentType.EdgeAgentOnDocker) {
     return <>-</>;
   }
 
-  if (environment.Status === 3) {
-    const status = (
-      <span className="vertical-center inline-flex text-base">
-        <Settings className="lucide animate-spin-slow" />
-        {environment.StatusMessage?.Summary}
-      </span>
-    );
-    if (!environment.StatusMessage?.Detail) {
-      return status;
-    }
+  if (environment.Status === EnvironmentStatus.Provisioning) {
     return (
-      <TooltipWithChildren
-        message={environment.StatusMessage?.Detail}
-        position="bottom"
-      >
-        {status}
-      </TooltipWithChildren>
+      <div className="inline-flex items-center text-base">
+        <Icon icon={Loader2} className="!mr-1 animate-spin-slow" />
+        {environment.StatusMessage?.summary}
+        {environment.StatusMessage?.detail && (
+          <Tooltip message={environment.StatusMessage?.detail} />
+        )}
+      </div>
     );
   }
 
diff --git a/app/react/portainer/environments/types.ts b/app/react/portainer/environments/types.ts
index eb3b5353e..a41e39b55 100644
--- a/app/react/portainer/environments/types.ts
+++ b/app/react/portainer/environments/types.ts
@@ -133,8 +133,8 @@ interface EndpointChangeWindow {
   EndTime: string;
 }
 export interface EnvironmentStatusMessage {
-  Summary: string;
-  Detail: string;
+  summary: string;
+  detail: string;
 }
 
 export type Environment = {