feat(UI): reload button for each app (#2077)

![image](https://github.com/user-attachments/assets/228cbd0c-72a2-4b12-8ab5-6ca9a1fa0afd) Ref: SRX-E9K6SV --------- Co-authored-by: Sven Urbanski <[email protected]>
freiheit-com · Nov 1, 2024 · b6392fe · b6392fe
1 parent 9add106
commit b6392fe
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss
@@ -121,4 +121,7 @@ Copyright freiheit.com*/
     .service-lane__date {
         padding-right: 2px;
     }
+    .servicelane__reload {
+        font-size: xx-large;
+    }
 }
diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx
@@ -21,6 +21,7 @@ import {
     getAppDetails,
     showSnackbarError,
     showSnackbarWarn,
+    updateAppDetails,
     useAppDetailsForApp,
     useCurrentlyExistsAtGroup,
     useMinorsForApp,
@@ -38,6 +39,7 @@ import { EnvSelectionDialog } from '../SelectionDialog/SelectionDialogs';
 import { AuthHeader, useAzureAuthSub } from '../../utils/AzureAuthProvider';
 import { SmallSpinner } from '../Spinner/Spinner';
 import { FormattedDate } from '../FormattedDate/FormattedDate';
+import { Button } from '../button';
 
 // number of releases on home. based on design
 // we could update this dynamically based on viewport width
@@ -279,6 +281,15 @@ export const ReadyServiceLane: React.FC<{
         },
         [application.name, envs]
     );
+    const onReload = useCallback(() => {
+        const details = updateAppDetails.get();
+        details[application.name] = {
+            details: undefined,
+            appDetailState: AppDetailsState.NOTREQUESTED,
+            updatedAt: new Date(Date.now()),
+        };
+        updateAppDetails.set(details);
+    }, [application.name]);
     const buttons: DotsMenuButton[] = [
         {
             label: 'View History',
@@ -316,6 +327,16 @@ export const ReadyServiceLane: React.FC<{
         />
     );
 
+    const reloadButton = (
+        <Button
+            id={application.name + '-reloadButton'}
+            className="servicelane__reload mdc-button--unelevated"
+            label={'⟳'}
+            highlightEffect={false}
+            onClick={onReload}
+        />
+    );
+
     return (
         <div className="service-lane">
             {dialog}
@@ -332,6 +353,7 @@ export const ReadyServiceLane: React.FC<{
                     </div>
                 </div>
                 <div className="service-lane-wrapper">
+                    <div>{reloadButton}</div>
                     {props.allAppData.updatedAt && (
                         <div className="service-lane__date">
                             <span>Updated </span>
@@ -340,6 +362,7 @@ export const ReadyServiceLane: React.FC<{
                     )}
                     <div className="service__actions__">{dotsMenu}</div>
                 </div>
+                {/*<div className="service__actions__">{dotsMenu}</div>*/}
             </div>
             <div className="service__warnings">
                 <WarningBoxes application={appDetails?.application} />