fetch latest version tag from docker hub (#11362)

closes #11352

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/generated/graphql.tsx

@@ -1437,6 +1437,7 @@ export type Query = {
   plans: Array<BillingPlanOutput>;
   search: Array<SearchRecord>;
   validatePasswordResetToken: ValidatePasswordResetToken;
+  versionInfo: VersionInfo;
 };
 
 
@@ -2176,6 +2177,12 @@ export type ValidatePasswordResetToken = {
   id: Scalars['String'];
 };
 
+export type VersionInfo = {
+  __typename?: 'VersionInfo';
+  currentVersion?: Maybe<Scalars['String']>;
+  latestVersion: Scalars['String'];
+};
+
 export type WorkerQueueMetrics = {
   __typename?: 'WorkerQueueMetrics';
   active: Scalars['Float'];
@@ -2606,6 +2613,11 @@ export type GetEnvironmentVariablesGroupedQueryVariables = Exact<{ [key: string]
 
 export type GetEnvironmentVariablesGroupedQuery = { __typename?: 'Query', getEnvironmentVariablesGrouped: { __typename?: 'EnvironmentVariablesOutput', groups: Array<{ __typename?: 'EnvironmentVariablesGroupData', name: EnvironmentVariablesGroup, description: string, isHiddenOnLoad: boolean, variables: Array<{ __typename?: 'EnvironmentVariable', name: string, description: string, value: string, sensitive: boolean }> }> } };
 
+export type GetVersionInfoQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetVersionInfoQuery = { __typename?: 'Query', versionInfo: { __typename?: 'VersionInfo', currentVersion?: string | null, latestVersion: string } };
+
 export type GetIndicatorHealthStatusQueryVariables = Exact<{
   indicatorId: HealthIndicatorId;
 }>;
@@ -4555,6 +4567,41 @@ export function useGetEnvironmentVariablesGroupedLazyQuery(baseOptions?: Apollo.
 export type GetEnvironmentVariablesGroupedQueryHookResult = ReturnType<typeof useGetEnvironmentVariablesGroupedQuery>;
 export type GetEnvironmentVariablesGroupedLazyQueryHookResult = ReturnType<typeof useGetEnvironmentVariablesGroupedLazyQuery>;
 export type GetEnvironmentVariablesGroupedQueryResult = Apollo.QueryResult<GetEnvironmentVariablesGroupedQuery, GetEnvironmentVariablesGroupedQueryVariables>;
+export const GetVersionInfoDocument = gql`
+    query GetVersionInfo {
+  versionInfo {
+    currentVersion
+    latestVersion
+  }
+}
+    `;
+
+/**
+ * __useGetVersionInfoQuery__
+ *
+ * To run a query within a React component, call `useGetVersionInfoQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetVersionInfoQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetVersionInfoQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetVersionInfoQuery(baseOptions?: Apollo.QueryHookOptions<GetVersionInfoQuery, GetVersionInfoQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetVersionInfoQuery, GetVersionInfoQueryVariables>(GetVersionInfoDocument, options);
+      }
+export function useGetVersionInfoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetVersionInfoQuery, GetVersionInfoQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetVersionInfoQuery, GetVersionInfoQueryVariables>(GetVersionInfoDocument, options);
+        }
+export type GetVersionInfoQueryHookResult = ReturnType<typeof useGetVersionInfoQuery>;
+export type GetVersionInfoLazyQueryHookResult = ReturnType<typeof useGetVersionInfoLazyQuery>;
+export type GetVersionInfoQueryResult = Apollo.QueryResult<GetVersionInfoQuery, GetVersionInfoQueryVariables>;
 export const GetIndicatorHealthStatusDocument = gql`
     query GetIndicatorHealthStatus($indicatorId: HealthIndicatorId!) {
   getIndicatorHealthStatus(indicatorId: $indicatorId) {

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminVersionContainer.tsx

@@ -1,72 +1,34 @@
 import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
-import { checkTwentyVersionExists } from '@/settings/admin-panel/utils/checkTwentyVersionExists';
-import { fetchLatestTwentyRelease } from '@/settings/admin-panel/utils/fetchLatestTwentyRelease';
-import styled from '@emotion/styled';
+import { SettingsAdminVersionDisplay } from '@/settings/admin-panel/components/SettingsAdminVersionDisplay';
 import { t } from '@lingui/core/macro';
-import { useEffect, useState } from 'react';
-import packageJson from '../../../../../package.json';
-import { GITHUB_LINK } from 'twenty-ui/navigation';
 import { IconCircleDot, IconStatusChange } from 'twenty-ui/display';
-
-const StyledActionLink = styled.a`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  gap: ${({ theme }) => theme.spacing(1)};
-  text-decoration: none;
-
-  :hover {
-    color: ${({ theme }) => theme.font.color.primary};
-    cursor: pointer;
-  }
-`;
-
-const StyledSpan = styled.span`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-`;
+import { useGetVersionInfoQuery } from '~/generated/graphql';
 
 export const SettingsAdminVersionContainer = () => {
-  const [latestVersion, setLatestVersion] = useState<string | null>(null);
-  const [currentVersionExists, setCurrentVersionExists] = useState(false);
-
-  useEffect(() => {
-    fetchLatestTwentyRelease().then(setLatestVersion);
-    checkTwentyVersionExists(packageJson.version).then(setCurrentVersionExists);
-  }, []);
+  const { data, loading } = useGetVersionInfoQuery();
+  const { currentVersion, latestVersion } = data?.versionInfo ?? {};
 
   const versionItems = [
     {
       Icon: IconCircleDot,
       label: t`Current version`,
-      value: currentVersionExists ? (
-        <StyledActionLink
-          href={`${GITHUB_LINK}/releases/tag/v${packageJson.version}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {packageJson.version}
-        </StyledActionLink>
-      ) : (
-        <StyledSpan>{packageJson.version}</StyledSpan>
+      value: (
+        <SettingsAdminVersionDisplay
+          version={currentVersion}
+          loading={loading}
+          noVersionMessage={t`Unknown`}
+        />
       ),
     },
     {
       Icon: IconStatusChange,
       label: t`Latest version`,
-      value: latestVersion ? (
-        <StyledActionLink
-          href={`${GITHUB_LINK}/releases/tag/v${latestVersion}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {latestVersion}
-        </StyledActionLink>
-      ) : (
-        <StyledSpan>{latestVersion ?? 'Loading...'}</StyledSpan>
+      value: (
+        <SettingsAdminVersionDisplay
+          version={latestVersion}
+          loading={loading}
+          noVersionMessage={t`No latest version found`}
+        />
       ),
     },
   ];

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminVersionDisplay.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+
+type SettingsAdminVersionDisplayProps = {
+  version: string | undefined | null;
+  loading: boolean;
+  noVersionMessage: string;
+};
+
+const StyledActionLink = styled.a`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  text-decoration: none;
+
+  :hover {
+    color: ${({ theme }) => theme.font.color.primary};
+    cursor: pointer;
+  }
+`;
+
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+export const SettingsAdminVersionDisplay = ({
+  version,
+  loading,
+  noVersionMessage,
+}: SettingsAdminVersionDisplayProps) => {
+  if (loading) {
+    return <StyledSpan>{t`Loading...`}</StyledSpan>;
+  }
+
+  if (!version) {
+    return <StyledSpan>{noVersionMessage}</StyledSpan>;
+  }
+
+  return (
+    <StyledActionLink
+      href={`https://hub.docker.com/r/twentycrm/twenty/tags?name=${version}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {version}
+    </StyledActionLink>
+  );
+};

packages/twenty-front/src/modules/settings/admin-panel/graphql/queries/getVersionInfo.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const GET_VERSION_INFO = gql`
+  query GetVersionInfo {
+    versionInfo {
+      currentVersion
+      latestVersion
+    }
+  }
+`;

packages/twenty-front/src/modules/settings/admin-panel/utils/checkTwentyVersionExists.ts

@@ -1,12 +0,0 @@
-export const checkTwentyVersionExists = async (
-  version: string,
-): Promise<boolean> => {
-  try {
-    const response = await fetch(
-      `https://api.github.com/repos/twentyhq/twenty/releases/tags/v${version}`,
-    );
-    return response.status === 200;
-  } catch (error) {
-    return false;
-  }
-};

packages/twenty-front/src/modules/settings/admin-panel/utils/fetchLatestTwentyRelease.ts

@@ -1,11 +0,0 @@
-export const fetchLatestTwentyRelease = async (): Promise<string> => {
-  try {
-    const response = await fetch(
-      'https://api.github.com/repos/twentyhq/twenty/releases/latest',
-    );
-    const data = await response.json();
-    return data.tag_name.replace('v', '');
-  } catch (error) {
-    return 'Could not fetch latest release';
-  }
-};