Added workorder description components (#1158)

libs/workordersidesheet/src/lib/types/index.ts

@@ -1,3 +1,4 @@
 export type { WorkOrderMaterial } from './workOrderMaterial';
 export type { WorkOrderMccr } from './workOrderMccr';
-export type { WorkOrderNotification } from './workOrderNotification';
+export type { WorkOrderNotification } from './workOrderNotification';
+export type { WorkOrderDescription } from './workOrderDescription';

libs/workordersidesheet/src/lib/types/workOrderDescription.ts

@@ -0,0 +1,3 @@
+export type WorkOrderDescription = {
+    description: string;
+}

libs/workordersidesheet/src/lib/ui-sidesheet/DetailsTab.tsx

@@ -8,11 +8,15 @@ import {
 } from '@cc-components/shared';
 
 import { getWoStatus, WorkOrder } from '@cc-components/workordershared';
+import { WorkOrderDescription } from './WorkorderDescription';
+
 type DetailsTabProps = {
   workOrder: WorkOrder | undefined;
 };
+
 export const DetailsTab = ({ workOrder }: DetailsTabProps): JSX.Element | null => {
   if (!workOrder) return null;
+
   return (
     <StyledTabContent>
       <h3>Details</h3>
@@ -119,6 +123,7 @@ export const DetailsTab = ({ workOrder }: DetailsTabProps): JSX.Element | null =
           </tr>
         </tbody>
       </StyledTable>
+      <WorkOrderDescription workOrderId={workOrder.workOrderId} />
     </StyledTabContent>
   );
 };

libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderDescription.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { Icon, Progress } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+
+import { StyledTabContent } from '@cc-components/shared';
+
+import { useWorkOrderDescription } from '../utils-sidesheet/useWorkOrderDescription';
+
+type WorkOrderDescriptionProps = {
+  workOrderId: string;
+};
+
+export const WorkOrderDescription = (props: WorkOrderDescriptionProps): JSX.Element => {
+  const { workOrderId } = props;
+
+  const { data, isFetching, error } = useWorkOrderDescription(workOrderId);
+
+  return (
+    <StyledTabContent>
+      <h3>Description</h3>
+
+      {isFetching && (
+        <NoResourceData>
+          <Progress.Circular />
+          <InfoText>Fetching description</InfoText>
+        </NoResourceData>
+      )}
+
+      {error && (
+        <NoResourceData>
+          <Icon
+            name="error_outlined"
+            size={40}
+            color={tokens.colors.interactive.primary__resting.hsla}
+          />
+          <InfoText>Failed to load description</InfoText>
+        </NoResourceData>
+      )}
+
+      {!isFetching && data && !data.description && (
+        <NoResourceData>
+          <Icon
+            name="info_circle"
+            size={40}
+            color={tokens.colors.interactive.primary__resting.hsla}
+          />
+          <InfoText>No description</InfoText>
+        </NoResourceData>
+      )}
+
+      {!isFetching && data && <StyledDescription>{data.description}</StyledDescription>}
+    </StyledTabContent>
+  );
+};
+
+const StyledDescription = styled.p`
+  padding: 0rem 1rem;
+`;
+
+export const NoResourceData = styled.div`
+  text-align: center;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const InfoText = styled.h3`
+  margin: 0;
+`;

libs/workordersidesheet/src/lib/utils-sidesheet/useWorkOrderDescription.ts

@@ -0,0 +1,23 @@
+import { useContextId, useHttpClient } from '@cc-components/shared';
+import { useQuery } from '@tanstack/react-query';
+import { WorkOrderDescription } from '../types';
+
+export const useWorkOrderDescription = (workOrderId: string) => {
+  const client =  useHttpClient();
+  const contextId = useContextId();
+
+  const { data, isFetching, error } = useQuery<WorkOrderDescription, Error>({
+    queryKey: ['workOrder', workOrderId, 'description'],
+    queryFn: async({ signal }) => {
+        const response = await client.fetch(`/api/contexts/${contextId}/work-orders/${workOrderId}/description`, { signal });
+
+        if (!response.ok) {
+          throw new Error('Failed to get notifications', { cause: response });
+        }
+
+        return response.json();
+    },
+  });
+
+    return { data, isFetching, error };
+};